diff --git a/src/components/column/Column.d.ts b/src/components/column/Column.d.ts index bb6f962cc..140edf842 100755 --- a/src/components/column/Column.d.ts +++ b/src/components/column/Column.d.ts @@ -3,21 +3,31 @@ interface ColumnProps { field?: string; sortField?: string | ((item: any) => any); filterField?: string; + dataType?: string; sortable?: boolean; header?: any; footer?: any; + style?: object; + class?: string; headerStyle?: object; headerClass?: string; bodyStyle?: object; bodyClass?: string; footerStyle?: object; footerClass?: string; + showFilterMenu?: boolean; + showFilterOperator?: boolean; + showClearButton?: boolean; + showApplyButton?: boolean; + showFilterMatchModes?: boolean; + showAddButton?: boolean; + filterMatchModeOptions?: any[]; + maxConstraints?: number; + excludeGlobalFilter?: boolean; filterHeaderStyle?: object; filterHeaderClass?: string; filterMenuStyle?: object; filterMenuClass?: string; - filterFunction?: Function; - excludeGlobalFilter?: boolean; selectionMode?: string; expander?: boolean; colspan?: number; @@ -27,6 +37,7 @@ interface ColumnProps { reorderableColumn?: boolean; rowEditor?: boolean; frozen?: boolean; + alignFrozen?: string; exportable?: boolean; } diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue index 39902abab..015bbfa9c 100755 --- a/src/components/datatable/DataTable.vue +++ b/src/components/datatable/DataTable.vue @@ -75,9 +75,8 @@ export default { emits: ['update:first', 'update:rows', 'page', 'update:sortField', 'update:sortOrder', 'update:multiSortMeta', 'sort', 'filter', 'row-click', 'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all', 'column-resize-end', 'column-reorder', 'row-reorder', 'update:expandedRows', 'row-collapse', 'row-expand', - 'update:expandedRowGroups', 'rowgroup-collapse', 'rowgroup-expand', 'update:filters', 'virtual-scroll', 'state-restore', 'state-save', - 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', - 'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'], + 'update:expandedRowGroups', 'rowgroup-collapse', 'rowgroup-expand', 'update:filters', 'state-restore', 'state-save', + 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel'], props: { value: { type: Array, @@ -295,10 +294,6 @@ export default { type: Array, default: null }, - frozenWidth: { - type: String, - default: null - }, virtualScroll: { type: Boolean, default: false diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue index be3e67182..1212f86ff 100755 --- a/src/views/datatable/DataTableDoc.vue +++ b/src/views/datatable/DataTableDoc.vue @@ -175,67 +175,101 @@ export default { null Footer content of the column. - + + style + object + null + Inline style of header, body and footer cells. + + + class + string + null + Style class of header, body and footer cells. + + headerStyle object null - Inline style of the column. + Inline style of the column header. headerClass string null - Style class of the column. + Style class of the column header. bodyStyle object null - Inline style of the column. + Inline style of the column body. bodyClass string null - Style class of the column. + Style class of the column body. footerStyle object null - Inline style of the column. + Inline style of the column footer. footerClass string null - Style class of the column. + Style class of the column footer. - filterHeaderStyle - object + showFilterMenu + boolean + true + Whether to display the filter overlay. + + + showFilterOperator + boolean + true + When enabled, match all and match any operator selector is displayed. + + + showClearButton + boolean + true + Displays a button to clear the column filtering. + + + showApplyButton + boolean + true + Displays a button to apply the column filtering. + + + showFilterMatchModes + boolean + true + Whether to show the match modes selector. + + + showAddButton + boolean + true + When enabled, a button is displayed to add more rules. + + + filterMatchModeOptions + array null - Inline style of the column filter header. + An array of label-value pairs to override the global match mode options. - filterHeaderClass - string - null - Style class of the column filter header. - - - filterMatchMode - string - startsWith - Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom". - - - filterFunction - function - null - A function that takes a value and a filter to compare against by returning either true or false. filterMatchMode must be set - to "custom" for this function to be triggered. - + maxConstraints + number + 2 + Maximum number of constraints for a column filter. excludeGlobalFilter @@ -243,6 +277,30 @@ export default { false Whether to exclude from global filtering or not. + + filterHeaderStyle + object + null + Inline style of the column filter header in row filter display. + + + filterHeaderClass + string + null + Style class of the column filter header in row filter display. + + + filterMenuStyle + object + null + Inline style of the column filter overlay. + + + filterMenuClass + string + null + Style class of the column filter overlay. + selectionMode string @@ -303,7 +361,13 @@ export default { false Whether the column is fixed in horizontal scrolling. - + + alignFrozen + string + left + Position of a frozen column, valid values are left and right. + + exportable boolean true @@ -538,75 +602,166 @@ data() {
Filtering
-

Filtering is enabled by defining a filter template per column to populate the filters property of the DataTable. The filters - property should be an key-value object where keys are the field name and the value is the filter value. The filter template receives the column properties - via the slotProps and accepts any form element as the filter element. Default match mode is "startsWith" and this can be configured per column using the filterMatchMode property that also accepts - "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom" as available modes.

-

Optionally a global filter is available to search against all the fields, in this case the special global keyword should be the property to be populated.

+

DataTable has advanced filtering capabilities that does the heavy lifting while providing flexible customization. Filtering has two layout alternatives defined with the filterDisplay. + In row setting, filter elements are displayed in a separate row at the header section whereas + in menu mode filter elements are displayed inside an overlay. Filter metadata is specified using the filters as a v-model and UI elements for the filtering + are placed inside the filter template. The template filter gets a filterModel and filterCallback, + use filterModel.value to populate the filter with your own form components and call the filterCallback with the event of your choice like @input, @change, @click.

+ +

+import CustomerService from '../../service/CustomerService';
+import {FilterMatchMode} from 'primevue/api';
+
+export default {
+    data() {
+        return {
+            customers: null,
+            filters: {
+                'name': {value: null, matchMode: FilterMatchMode.STARTS_WITH}
+            }
+        }
+    },
+    created() {
+        this.customerService = new CustomerService();
+    },
+    mounted() {
+        this.customerService.getCustomersLarge().then(data => this.customers = data);
+    }
+}
+
+ +
Filter Row
+

Input field is displayed in a separate header row.

+
-

Custom filtering is implemented by setting the filterMatchMode to "custom" and defining a filter function.

+
Filter Row
+

Input field is displayed in an overlay.

+ 

+
+ +
Multiple Constraints
+

In "menu" display, it is possible to add more constraints to a same filter. In this case, metadata could be an array of constraints. The operator + defines whether all or any of the constraints should match.

+ +

+data() {
+    return {
+        customers: null,
+        filters: {
+            'name': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.STARTS_WITH}]},
+        }
+    }
+}
+
+ +
Populate Filters
+

Providing a filters with predefined values would be enough to display the table as filtered by default.

+

+data() {
+    return {
+        customers: null,
+        filters: {
+            'name': {operator: FilterOperator.AND, constraints: [
+                {value: 'Prime', matchMode: FilterMatchMode.STARTS_WITH},
+                {value: 'Vue', matchMode: FilterMatchMode.CONTAINS}
+            ]},
+        }
+    }
+}
+
+ +
Match Modes
+

Depending on the dataType of the column, suitable match modes are displayed. Default configuration is available at PrimeVue.filterMatchModeOptions which can be used to customize the modes globally for all tables.

+ + 

+import {createApp} from 'vue';
+import PrimeVue from 'primevue/config';
+import FilterMatchMode from 'primevue/api',
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    filterMatchModeOptions: {
+        text: [
+            FilterMatchMode.STARTS_WITH,
+            FilterMatchMode.CONTAINS,
+            FilterMatchMode.NOT_CONTAINS,
+            FilterMatchMode.ENDS_WITH,
+            FilterMatchMode.EQUALS,
+            FilterMatchMode.NOT_EQUALS
+        ],
+        numeric: [
+            FilterMatchMode.EQUALS,
+            FilterMatchMode.NOT_EQUALS,
+            FilterMatchMode.LESS_THAN,
+            FilterMatchMode.LESS_THAN_OR_EQUAL_TO,
+            FilterMatchMode.GREATER_THAN,
+            FilterMatchMode.GREATER_THAN_OR_EQUAL_TO
+        ],
+        date: [
+            FilterMatchMode.DATE_IS,
+            FilterMatchMode.DATE_IS_NOT,
+            FilterMatchMode.DATE_BEFORE,
+            FilterMatchMode.DATE_AFTER
+        ]
+    }
+});
+
+ +

If you need to override the match modes for a particular column use the filterMatchModeOptions property and provide an array with label-value pairs.

+

+
+ + 

+matchModes: [
+    {label: 'Starts With', FilterMatchMode.STARTS_WITH},
+    {label: 'Contains', FilterMatchMode.CONTAINS},
+]
+
+ +
Custom Filter
+

Custom filtering is implemented using the FilterService, first register your filter and add it to your filterMatchModeOptions.

+

+import {FilterService} from 'primevue/api';
+
+FilterService.register('myfilter', (a,b) => a === b);
 

-methods: {
-    myOwnEquals(value, filter) {
-        if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
-            return true;
-        }
-
-        if (value === undefined || value === null) {
-            return false;
-        }
-
-        return value.toString().toLowerCase() === filter.toString().toLowerCase();
-    }
-}
-
+matchModes: [
+    {label: 'My Filter', "myfilter"},
+    {label: 'Starts With', FilterMatchMode.STARTS_WITH},
+    {label: 'Contains', FilterMatchMode.CONTAINS},
+]
Selection
@@ -654,7 +809,7 @@ methods: {
Scrolling

DataTable supports both horizontal and vertical scrolling as well as frozen columns and rows. Scrollable DataTable is enabled using scrollable property and scrollHeight to define the viewport height.