diff --git a/api-generator/components/datatable.js b/api-generator/components/datatable.js index 2146a6bcaf..0993462a38 100644 --- a/api-generator/components/datatable.js +++ b/api-generator/components/datatable.js @@ -318,6 +318,12 @@ const DataTableProps = [ default: 'null', description: 'Value of the global filter to use in filtering.' }, + { + name: 'globalFilterMatchMode', + type: 'string', + default: 'contains', + description: 'Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom".' + }, { name: 'filterDelay', type: 'number', diff --git a/api-generator/components/treetable.js b/api-generator/components/treetable.js index 9e160c9857..f405108d85 100644 --- a/api-generator/components/treetable.js +++ b/api-generator/components/treetable.js @@ -282,6 +282,12 @@ const TreeTableProps = [ default: 'null', description: 'Value of the global filter to use in filtering.' }, + { + name: 'globalFilterMatchMode', + type: 'string', + default: 'contains', + description: 'Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom".' + }, { name: 'filterMode', type: 'string', diff --git a/components/doc/datatable/index.js b/components/doc/datatable/index.js index 5ae7c4cb38..7625300f72 100644 --- a/components/doc/datatable/index.js +++ b/components/doc/datatable/index.js @@ -3353,12 +3353,6 @@ export const DataTableStateDemo = () => { null An array of FilterMetadata objects to provide external filters. - - globalFilter - any - null - Value of the global filter to use in filtering. - filterDelay number @@ -3577,12 +3571,24 @@ export const DataTableStateDemo = () => { pi pi-chevron-up Icon of the row toggler to display the row as collapsed. + + globalFilter + any + null + Value of the global filter to use in filtering. + globalFilterFields string[] null Define fields to be filtered globally. + + globalFilterMatchMode + string + contains + Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom". + showSelectionElement function diff --git a/components/doc/treetable/index.js b/components/doc/treetable/index.js index 3a0b11a01e..f4848c7086 100644 --- a/components/doc/treetable/index.js +++ b/components/doc/treetable/index.js @@ -1,9 +1,9 @@ -import React, { memo } from 'react'; import Link from 'next/link'; -import { TabView, TabPanel } from '../../lib/tabview/TabView'; -import { useLiveEditorTabs } from '../common/liveeditor'; +import React, { memo } from 'react'; +import { TabPanel, TabView } from '../../lib/tabview/TabView'; import { CodeHighlight } from '../common/codehighlight'; import { DevelopmentSection } from '../common/developmentsection'; +import { useLiveEditorTabs } from '../common/liveeditor'; const TreeTableDoc = memo(() => { const sources = { @@ -2430,6 +2430,12 @@ export const TreeTableResponsiveDemo = () => { null Value of the global filter to use in filtering. + + globalFilterMatchMode + string + contains + Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom". + filterMode string diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js index 9dac14ea3b..7dbf2ee342 100644 --- a/components/lib/datatable/DataTable.js +++ b/components/lib/datatable/DataTable.js @@ -1043,7 +1043,7 @@ export const DataTable = React.forwardRef((props, ref) => { if (isGlobalFilter && !globalMatch && globalFilterFieldsArray) { for (let j = 0; j < globalFilterFieldsArray.length; j++) { let globalFilterField = globalFilterFieldsArray[j]; - let matchMode = filters['global'] ? filters['global'].matchMode : FilterMatchMode.CONTAINS; + let matchMode = filters['global'] ? filters['global'].matchMode : props.globalFilterMatchMode; let value = filters['global'] ? filters['global'].value : props.globalFilter; globalMatch = FilterService.filters[matchMode](ObjectUtils.resolveFieldData(data[i], globalFilterField), value, props.filterLocale); @@ -1767,132 +1767,133 @@ export const DataTable = React.forwardRef((props, ref) => { DataTable.displayName = 'DataTable'; DataTable.defaultProps = { __TYPE: 'DataTable', - id: null, - value: null, - header: null, - footer: null, - style: null, - className: null, - tableStyle: null, - tableClassName: null, - paginator: false, - paginatorPosition: 'bottom', alwaysShowPaginator: true, - paginatorClassName: null, - paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', - paginatorLeft: null, - paginatorRight: null, - paginatorDropdownAppendTo: null, - pageLinkSize: 5, - rowsPerPageOptions: null, - currentPageReportTemplate: '({currentPage} of {totalPages})', - first: 0, - rows: null, - totalRecords: null, - lazy: false, - sortField: null, - sortOrder: null, - multiSortMeta: null, - sortMode: 'single', - defaultSortOrder: 1, - removableSort: false, - emptyMessage: null, - selectionMode: null, - dragSelection: false, + autoLayout: false, + breakpoint: '960px', + cellClassName: null, cellSelection: false, - selection: null, - selectionAriaLabel: null, - onSelectionChange: null, - contextMenuSelection: null, - onContextMenuSelectionChange: null, - compareSelectionBy: 'deepEquals', - dataKey: null, - metaKeySelection: true, - selectOnEdit: true, - selectionPageOnly: false, - selectionAutoFocus: true, - showSelectAll: true, - selectAll: false, - onSelectAllChange: null, - headerColumnGroup: null, - footerColumnGroup: null, - rowExpansionTemplate: null, - expandedRows: null, - onRowToggle: null, - resizableColumns: false, + className: null, + collapsedRowIcon: 'pi pi-chevron-right', columnResizeMode: 'fit', - reorderableColumns: false, - reorderableRows: false, - filters: null, - globalFilter: null, - filterDelay: 300, - filterLocale: undefined, - scrollable: false, - scrollHeight: null, - scrollDirection: 'vertical', - virtualScrollerOptions: null, - frozenWidth: null, - frozenValue: null, + compareSelectionBy: 'deepEquals', + contextMenuSelection: null, csvSeparator: ',', - exportFilename: 'download', - rowGroupMode: null, - autoLayout: false, - rowClassName: null, - cellClassName: null, - rowGroupHeaderTemplate: null, - rowGroupFooterTemplate: null, - loading: false, - loadingIcon: 'pi pi-spinner', - tabIndex: 0, - stateKey: null, - stateStorage: 'session', - groupRowsBy: null, + currentPageReportTemplate: '({currentPage} of {totalPages})', + customRestoreState: null, + customSaveState: null, + dataKey: null, + defaultSortOrder: 1, + dragSelection: false, editMode: 'cell', editingRows: null, + emptyMessage: null, expandableRowGroups: false, - rowHover: false, - showGridlines: false, - stripedRows: false, - size: 'normal', - responsiveLayout: 'stack', - breakpoint: '960px', - filterDisplay: 'menu', expandedRowIcon: 'pi pi-chevron-down', - collapsedRowIcon: 'pi pi-chevron-right', - onRowEditComplete: null, + expandedRows: null, + exportFilename: 'download', + exportFunction: null, + filterDelay: 300, + filterDisplay: 'menu', + filterLocale: undefined, + filters: null, + first: 0, + footer: null, + footerColumnGroup: null, + frozenValue: null, + frozenWidth: null, + globalFilter: null, globalFilterFields: null, - showSelectionElement: null, - showRowReorderElement: null, + globalFilterMatchMode: FilterMatchMode.CONTAINS, + groupRowsBy: null, + header: null, + headerColumnGroup: null, + id: null, isDataSelectable: null, + lazy: false, + loading: false, + loadingIcon: 'pi pi-spinner', + metaKeySelection: true, + multiSortMeta: null, + onAllRowsSelect: null, + onAllRowsUnselect: null, + onCellClick: null, + onCellSelect: null, + onCellUnselect: null, + onColReorder: null, onColumnResizeEnd: null, onColumnResizerClick: null, onColumnResizerDoubleClick: null, - onSort: null, - onPage: null, + onContextMenu: null, + onContextMenuSelectionChange: null, onFilter: null, - onAllRowsSelect: null, - onAllRowsUnselect: null, + onPage: null, onRowClick: null, + onRowCollapse: null, onRowDoubleClick: null, - onRowSelect: null, - onRowUnselect: null, + onRowEditCancel: null, + onRowEditChange: null, + onRowEditComplete: null, + onRowEditInit: null, + onRowEditSave: null, onRowExpand: null, - onRowCollapse: null, - onContextMenu: null, - onColReorder: null, - onCellClick: null, - onCellSelect: null, - onCellUnselect: null, onRowReorder: null, + onRowSelect: null, + onRowToggle: null, + onRowUnselect: null, + onSelectAllChange: null, + onSelectionChange: null, + onSort: null, + onStateRestore: null, + onStateSave: null, onValueChange: null, + pageLinkSize: 5, + paginator: false, + paginatorClassName: null, + paginatorDropdownAppendTo: null, + paginatorLeft: null, + paginatorPosition: 'bottom', + paginatorRight: null, + paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', + removableSort: false, + reorderableColumns: false, + reorderableRows: false, + resizableColumns: false, + responsiveLayout: 'stack', + rowClassName: null, rowEditValidator: null, - onRowEditInit: null, - onRowEditSave: null, - onRowEditCancel: null, - onRowEditChange: null, - exportFunction: null, - customSaveState: null, - customRestoreState: null, - onStateSave: null, - onStateRestore: null + rowExpansionTemplate: null, + rowGroupFooterTemplate: null, + rowGroupHeaderTemplate: null, + rowGroupMode: null, + rowHover: false, + rows: null, + rowsPerPageOptions: null, + scrollDirection: 'vertical', + scrollHeight: null, + scrollable: false, + selectAll: false, + selectOnEdit: true, + selection: null, + selectionAriaLabel: null, + selectionAutoFocus: true, + selectionMode: null, + selectionPageOnly: false, + showGridlines: false, + showRowReorderElement: null, + showSelectAll: true, + showSelectionElement: null, + size: 'normal', + sortField: null, + sortMode: 'single', + sortOrder: null, + stateKey: null, + stateStorage: 'session', + stripedRows: false, + style: null, + tabIndex: 0, + tableClassName: null, + tableStyle: null, + totalRecords: null, + value: null, + virtualScrollerOptions: null }; diff --git a/components/lib/datatable/datatable.d.ts b/components/lib/datatable/datatable.d.ts index e212ded119..b3430c6878 100644 --- a/components/lib/datatable/datatable.d.ts +++ b/components/lib/datatable/datatable.d.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Column } from '../column'; +import { Column, ColumnFilterMatchModeType } from '../column'; import { PaginatorTemplate } from '../paginator'; import { VirtualScroller, VirtualScrollerProps } from '../virtualscroller/virtualscroller'; @@ -268,6 +268,7 @@ export interface DataTableProps extends Omit { let copyNodeForGlobal = { ...copyNode }; filterValue = props.globalFilter; - filterConstraint = FilterService.filters['contains']; + filterConstraint = FilterService.filters[props.globalFilterMatchMode]; paramsWithoutNode = { filterField, filterValue, filterConstraint, isStrictMode }; if ( @@ -1004,79 +1004,80 @@ export const TreeTable = React.forwardRef((props, ref) => { TreeTable.displayName = 'TreeTable'; TreeTable.defaultProps = { __TYPE: 'TreeTable', - id: null, - value: null, - header: null, - footer: null, - style: null, + alwaysShowPaginator: true, + autoLayout: false, className: null, - tableStyle: null, - tableClassName: null, + columnResizeMode: 'fit', + contextMenuSelectionKey: null, + currentPageReportTemplate: '({currentPage} of {totalPages})', + defaultSortOrder: 1, + emptyMessage: null, expandedKeys: null, + filterDelay: 300, + filterLocale: undefined, + filterMode: 'lenient', + filters: null, + first: null, + footer: null, + footerColumnGroup: null, + frozenFooterColumnGroup: null, + frozenHeaderColumnGroup: null, + frozenWidth: null, + globalFilter: null, + globalFilterMatchMode: FilterMatchMode.CONTAINS, + header: null, + headerColumnGroup: null, + id: null, + lazy: false, + loading: false, + loadingIcon: 'pi pi-spinner', + metaKeySelection: true, + multiSortMeta: null, + onColReorder: null, + onCollapse: null, + onColumnResizeEnd: null, + onContextMenu: null, + onContextMenuSelectionChange: null, + onExpand: null, + onFilter: null, + onPage: null, + onRowClick: null, + onSelect: null, + onSelectionChange: null, + onSort: null, + onToggle: null, + onUnselect: null, + pageLinkSize: 5, paginator: false, - paginatorPosition: 'bottom', - alwaysShowPaginator: true, paginatorClassName: null, - paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', + paginatorDropdownAppendTo: null, paginatorLeft: null, + paginatorPosition: 'bottom', paginatorRight: null, - paginatorDropdownAppendTo: null, - pageLinkSize: 5, - rowsPerPageOptions: null, - currentPageReportTemplate: '({currentPage} of {totalPages})', - first: null, - rows: null, - totalRecords: null, - lazy: false, - sortField: null, - sortOrder: null, - multiSortMeta: null, - sortMode: 'single', - defaultSortOrder: 1, - removableSort: false, - selectionMode: null, - selectionKeys: null, - contextMenuSelectionKey: null, - metaKeySelection: true, - selectOnEdit: true, - propagateSelectionUp: true, + paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown', propagateSelectionDown: true, - autoLayout: false, - rowClassName: null, - loading: false, - loadingIcon: 'pi pi-spinner', - tabIndex: 0, - scrollable: false, - scrollHeight: null, + propagateSelectionUp: true, + removableSort: false, reorderableColumns: false, - headerColumnGroup: null, - footerColumnGroup: null, - frozenHeaderColumnGroup: null, - frozenFooterColumnGroup: null, - frozenWidth: null, resizableColumns: false, - columnResizeMode: 'fit', - emptyMessage: null, - filters: null, - globalFilter: null, - filterMode: 'lenient', - filterDelay: 300, - filterLocale: undefined, + rowClassName: null, rowHover: false, + rows: null, + rowsPerPageOptions: null, + scrollHeight: null, + scrollable: false, + selectOnEdit: true, + selectionKeys: null, + selectionMode: null, showGridlines: false, + sortField: null, + sortMode: 'single', + sortOrder: null, stripedRows: false, - onFilter: null, - onExpand: null, - onCollapse: null, - onToggle: null, - onPage: null, - onSort: null, - onSelect: null, - onUnselect: null, - onRowClick: null, - onSelectionChange: null, - onContextMenuSelectionChange: null, - onColumnResizeEnd: null, - onColReorder: null, - onContextMenu: null + style: null, + tabIndex: 0, + tableClassName: null, + tableStyle: null, + totalRecords: null, + value: null }; diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts index cd6061e6a4..72ede4ac6c 100644 --- a/components/lib/treetable/treetable.d.ts +++ b/components/lib/treetable/treetable.d.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ColumnProps } from '../column'; +import { ColumnFilterMatchModeType, ColumnProps } from '../column'; import { PaginatorTemplate } from '../paginator'; import TreeNode from '../treenode'; @@ -96,82 +96,83 @@ interface TreeTableColReorderParams { } export interface TreeTableProps extends Omit, HTMLDivElement>, 'onContextMenu' | 'onSelect' | 'ref' | 'value'> { - id?: string; - value?: TreeNode[]; - header?: React.ReactNode; - footer?: React.ReactNode; - style?: object; + alwaysShowPaginator?: boolean; + autoLayout?: boolean; + children?: React.ReactNode; className?: string; - tableStyle?: object; - tableClassName?: string; + columnResizeMode?: TreeTableColumnResizeModeType; + contextMenuSelectionKey?: string; + currentPageReportTemplate?: string; + defaultSortOrder?: TreeTableSortOrderType; + emptyMessage?: string; expandedKeys?: TreeTableExpandedKeysType; + filterDelay?: number; + filterLocale?: string; + filterMode?: TreeTableFilterModeType; + filters?: TreeTableFilterMeta; + first?: number; + footer?: React.ReactNode; + footerColumnGroup?: React.ReactElement; + frozenFooterColumnGroup?: React.ReactElement; + frozenHeaderColumnGroup?: React.ReactElement; + frozenWidth?: string; + globalFilter?: TreeTableGlobalFilterType; + globalFilterMatchMode?: ColumnFilterMatchModeType; + header?: React.ReactNode; + headerColumnGroup?: React.ReactElement; + id?: string; + lazy?: boolean; + loading?: boolean; + loadingIcon?: string; + metaKeySelection?: boolean; + multiSortMeta?: TreeTableMultiSortMetaType; + pageLinkSize?: number; paginator?: boolean; - paginatorPosition?: TreeTablePaginatorPositionType; - alwaysShowPaginator?: boolean; paginatorClassName?: string; - paginatorTemplate?: PaginatorTemplate; + paginatorDropdownAppendTo?: TreeTableAppendToType; paginatorLeft?: React.ReactNode; + paginatorPosition?: TreeTablePaginatorPositionType; paginatorRight?: React.ReactNode; - pageLinkSize?: number; - paginatorDropdownAppendTo?: TreeTableAppendToType; - rowsPerPageOptions?: number[]; - currentPageReportTemplate?: string; - first?: number; - rows?: number; - totalRecords?: number; - lazy?: boolean; - sortField?: string; - sortOrder?: TreeTableSortOrderType; - multiSortMeta?: TreeTableMultiSortMetaType; - sortMode?: TreeTableSortModeType; - defaultSortOrder?: TreeTableSortOrderType; - removableSort?: boolean; - selectionMode?: TreeTableSelectionModeType; - selectionKeys?: TreeTableSelectionKeys; - contextMenuSelectionKey?: string; - metaKeySelection?: boolean; - selectOnEdit?: boolean; - propagateSelectionUp?: boolean; + paginatorTemplate?: PaginatorTemplate; propagateSelectionDown?: boolean; - autoLayout?: boolean; - loading?: boolean; - loadingIcon?: string; - tabIndex?: number; - scrollable?: boolean; - scrollHeight?: string; + propagateSelectionUp?: boolean; + removableSort?: boolean; reorderableColumns?: boolean; - headerColumnGroup?: React.ReactElement; - footerColumnGroup?: React.ReactElement; - frozenHeaderColumnGroup?: React.ReactElement; - frozenFooterColumnGroup?: React.ReactElement; - frozenWidth?: string; resizableColumns?: boolean; - columnResizeMode?: TreeTableColumnResizeModeType; - emptyMessage?: string; - filters?: TreeTableFilterMeta; - globalFilter?: TreeTableGlobalFilterType; - filterMode?: TreeTableFilterModeType; - filterDelay?: number; - filterLocale?: string; rowHover?: boolean; + rows?: number; + rowsPerPageOptions?: number[]; + scrollHeight?: string; + scrollable?: boolean; + selectOnEdit?: boolean; + selectionKeys?: TreeTableSelectionKeys; + selectionMode?: TreeTableSelectionModeType; showGridlines?: boolean; + sortField?: string; + sortMode?: TreeTableSortModeType; + sortOrder?: TreeTableSortOrderType; stripedRows?: boolean; - rowClassName?(data: TreeNode): object; - onFilter?(filters: TreeTableFilterMeta[]): void; - onExpand?(e: TreeTableEventParams): void; + style?: object; + tabIndex?: number; + tableClassName?: string; + tableStyle?: object; + totalRecords?: number; + value?: TreeNode[]; + onColReorder?(e: TreeTableColReorderParams): void; onCollapse?(e: TreeTableEventParams): void; - onToggle?(e: TreeTableToggleParams): void; + onColumnResizeEnd?(e: TreeTableColumnResizeEndParams): void; + onContextMenu?(e: TreeTableEventParams): void; + onContextMenuSelectionChange?(e: TreeTableSelectionParams): void; + onExpand?(e: TreeTableEventParams): void; + onFilter?(filters: TreeTableFilterMeta[]): void; onPage?(e: TreeTablePageParams): void; - onSort?(e: TreeTableSortParams): void; - onSelect?(e: TreeTableEventParams): void; - onUnselect?(e: TreeTableEventParams): void; onRowClick?(e: TreeTableEventParams): void; + onSelect?(e: TreeTableEventParams): void; onSelectionChange?(e: TreeTableSelectionParams): void; - onContextMenuSelectionChange?(e: TreeTableSelectionParams): void; - onColumnResizeEnd?(e: TreeTableColumnResizeEndParams): void; - onColReorder?(e: TreeTableColReorderParams): void; - onContextMenu?(e: TreeTableEventParams): void; - children?: React.ReactNode; + onSort?(e: TreeTableSortParams): void; + onToggle?(e: TreeTableToggleParams): void; + onUnselect?(e: TreeTableEventParams): void; + rowClassName?(data: TreeNode): object; } export declare class TreeTable extends React.Component {