diff --git a/__tests__/demo/demo-components/index.js b/__tests__/demo/demo-components/index.js index a0e5ced3..5b585240 100644 --- a/__tests__/demo/demo-components/index.js +++ b/__tests__/demo/demo-components/index.js @@ -1476,8 +1476,10 @@ export function LocalizationWithCustomComponents() { } function CustomFilterWithOperatorSelection({ columnDef, onFilterChanged }) { - const [operator, setOperator] = React.useState('='); - const [value, setValue] = React.useState(undefined); + const [operator, setOperator] = React.useState( + columnDef.tableData.filterOperator + ); + const [value, setValue] = React.useState(columnDef.defaultFilter); const operatorRef = React.useRef(operator); const valueRef = React.useRef(value); @@ -1504,6 +1506,7 @@ function CustomFilterWithOperatorSelection({ columnDef, onFilterChanged }) { setValue(e.target.value)} /> @@ -1525,6 +1528,23 @@ const columns_with_custom_filter = [ } ]; +const columns_with_custom_filter_and_default_filter = [ + { title: 'Name', field: 'name', filtering: true }, + { + title: 'Some Number', + field: 'some_number', + filtering: true, + defaultFilter: '4', + defaultFilterOperator: '>', + filterComponent: ({ columnDef, onFilterChanged }) => ( + + ) + } +]; + const data_with_custom_filter = [ { name: 'Juan', some_number: 1 }, { name: 'John', some_number: 4 }, @@ -1534,7 +1554,7 @@ const data_with_custom_filter = [ { name: 'Ignacio', some_number: 4 } ]; -export function FilterWithOperatorSelection() { +export function FilterWithOperatorSelection({ withDefaultFilter = false }) { return ( @@ -1585,7 +1605,11 @@ export function FilterWithOperatorSelection() { }); }) } - columns={columns_with_custom_filter} + columns={ + withDefaultFilter + ? columns_with_custom_filter_and_default_filter + : columns_with_custom_filter + } options={{ search: false, filtering: true diff --git a/__tests__/demo/demo.js b/__tests__/demo/demo.js index 8f8eb8d4..64113f1a 100644 --- a/__tests__/demo/demo.js +++ b/__tests__/demo/demo.js @@ -157,6 +157,8 @@ function Demo() {

Filter with operator selection

+

Filter with operator selection and default operator

+

Remote Data Related

  1. diff --git a/src/components/MTableFilterRow/index.js b/src/components/MTableFilterRow/index.js index c5ea1937..e7025a6c 100644 --- a/src/components/MTableFilterRow/index.js +++ b/src/components/MTableFilterRow/index.js @@ -98,7 +98,7 @@ export function MTableFilterRow({ ); } - columns + propColumns .filter((columnDef) => columnDef.tableData.groupOrder > -1) .forEach((columnDef) => { columns.splice( diff --git a/src/material-table.js b/src/material-table.js index 0f3a3bb5..57b56645 100644 --- a/src/material-table.js +++ b/src/material-table.js @@ -37,7 +37,7 @@ export default class MaterialTable extends React.Component { .filter((a) => a.tableData.filterValue) .map((a) => ({ column: a, - operator: '=', + operator: a.tableData.filterOperator, value: a.tableData.filterValue })), orderBy: renderState.columns.find( diff --git a/src/prop-types.js b/src/prop-types.js index df18fda2..27e9c97a 100644 --- a/src/prop-types.js +++ b/src/prop-types.js @@ -67,6 +67,7 @@ export const propTypes = { customSort: PropTypes.func, customExport: PropTypes.func, defaultFilter: PropTypes.any, + defaultFilterOperator: PropTypes.string, defaultSort: PropTypes.oneOf(['asc', 'desc']), editComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), emptyValue: PropTypes.oneOfType([ diff --git a/src/utils/data-manager.js b/src/utils/data-manager.js index ba22326d..28816a02 100644 --- a/src/utils/data-manager.js +++ b/src/utils/data-manager.js @@ -137,6 +137,7 @@ export default class DataManager { const tableData = { columnOrder: index, filterValue: columnDef.defaultFilter, + filterOperator: columnDef.defaultFilterOperator || '=', groupOrder: columnDef.defaultGroupOrder, groupSort: columnDef.defaultGroupSort || 'asc', width, diff --git a/types/index.d.ts b/types/index.d.ts index 8a67b7a0..7ece81c6 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -226,6 +226,7 @@ export interface Column { //customExport prop handle flattening of data at column level before passing data to exporter. Note exportMenu.exportFunc is an alternative to handle data change at exporter level customExport?: (rowData: RowData) => unknown; defaultFilter?: any; + defaultFilterOperator?: string; filterOnItemSelect?: boolean; defaultGroupOrder?: number; id?: unknown;