From 8636d8ec569b9306d498aa2d6e13c68671ae9f3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87a=C4=9Fatay=20=C3=87ivici?= Date: Wed, 14 Mar 2018 11:12:57 +0300 Subject: [PATCH] Fixed #312 --- src/components/column/Column.d.ts | 5 +- src/components/column/Column.js | 2 + src/components/datatable/DataTable.js | 2 +- src/showcase/datatable/DataTableDemo.js | 49 ++++++++++++++++++- src/showcase/datatable/DataTableFilterDemo.js | 4 +- 5 files changed, 56 insertions(+), 6 deletions(-) diff --git a/src/components/column/Column.d.ts b/src/components/column/Column.d.ts index 20c8ef7013..aad2ba406b 100644 --- a/src/components/column/Column.d.ts +++ b/src/components/column/Column.d.ts @@ -15,6 +15,7 @@ interface ColumnProps { filterType?: string; filterMaxLength?: number; filterElement?: object; + filterFunction?(value: any, filter: any): void; style?: object; className?: string; expander?: boolean; @@ -22,8 +23,8 @@ interface ColumnProps { selectionMode?: string; colSpan?: number; rowSpan?: number; - editor?(): void; - editorValidator?(): void; + editor?(props: any): void; + editorValidator?(props: any): booelan; rowReorder?: boolean; rowReorderIcon?: string; } diff --git a/src/components/column/Column.js b/src/components/column/Column.js index ff4879e05c..6f9dda0f43 100644 --- a/src/components/column/Column.js +++ b/src/components/column/Column.js @@ -18,6 +18,7 @@ export class Column extends Component { filterType: 'text', filterMaxLength: null, filterElement: null, + filterFunction: null, style: null, className: null, expander: false, @@ -46,6 +47,7 @@ export class Column extends Component { filterType: PropTypes.string, filterMaxLength: PropTypes.number, filterElement: PropTypes.object, + filterFunction: PropTypes.func, style: PropTypes.object, className: PropTypes.string, expander: PropTypes.bool, diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js index ff2d42561b..b137fedc16 100644 --- a/src/components/datatable/DataTable.js +++ b/src/components/datatable/DataTable.js @@ -731,7 +731,7 @@ export class DataTable extends Component { let filterField = col.props.field; let filterMatchMode = col.props.filterMatchMode; let dataFieldValue = ObjectUtils.resolveFieldData(value[i], filterField); - let filterConstraint = ObjectUtils.filterConstraints[filterMatchMode]; + let filterConstraint = filterMatchMode === 'custom' ? col.props.filterFunction : ObjectUtils.filterConstraints[filterMatchMode]; if(!filterConstraint(dataFieldValue, filterValue)) { localMatch = false; diff --git a/src/showcase/datatable/DataTableDemo.js b/src/showcase/datatable/DataTableDemo.js index 5eb10d5f03..508b940fa0 100644 --- a/src/showcase/datatable/DataTableDemo.js +++ b/src/showcase/datatable/DataTableDemo.js @@ -256,7 +256,7 @@ export class DataTableDemo extends Component { filterMatchMode string null - Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals" and "in". + Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals", "in" and "custom". filterType @@ -282,6 +282,12 @@ export class DataTableDemo extends Component { null Element for custom filtering. + + filterFunction + function + null + Custom filter function. + style object @@ -819,6 +825,47 @@ export class DataTableFilterDemo extends Component {

Filters property of the DataTable can also be used to filter the DataTable initially with prepopulated filters.

+

Custom filtering is implemented by setting the filterMatchMode property as "custom" and providing a function that takes the data value along with the filter value to return a boolean.

+ +{` +export class DataTableFilterDemo extends Component { + + constructor() { + super(); + this.state = {}; + this.carservice = new CarService(); + this.yearFilter = this.yearFilter.bind(this); + } + + componentDidMount() { + this.carservice.getCarsLarge().then(data => this.setState({cars: data})); + } + + yearFilter(value, filter) { + return filter > value; + } + + render() { + var let =
+ + this.setState({globalFilter: e.target.value})} placeholder="Global Search" size="50"/> +
; + + return ( + + + + + + + ); + } +} + +`} + +

Selection

DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the selection property for reading and onSelectionChange for updating back. Alternatively column based selection can be done using radio buttons or checkboxes using selectionMode of a particular column. In additiob onRowSelect-onRowUnselect events are provided as optional callbacks.

diff --git a/src/showcase/datatable/DataTableFilterDemo.js b/src/showcase/datatable/DataTableFilterDemo.js index 49a490ba52..d5186a1757 100644 --- a/src/showcase/datatable/DataTableFilterDemo.js +++ b/src/showcase/datatable/DataTableFilterDemo.js @@ -84,8 +84,8 @@ export class DataTableFilterDemo extends Component {

DataTable - Filter

Filtering is enabled by setting the filter property as true in column object. Default match mode is "startsWith" and this can be configured using filterMatchMode - property of column object that also accepts "contains", "endsWith", "equals" and "in". An optional global filter feature is available to search all fields with a keyword. - By default input fields are generated as filter elements and using templating any component can be used as a filter..

+ property of column object that also accepts "contains", "endsWith", "equals", "in" and "custom". An optional global filter feature is available to search all fields with a keyword. + By default input fields are generated as filter elements and using templating any component can be used as a filter.