Fixed #312

src/components/column/Column.d.ts

@@ -15,15 +15,16 @@ interface ColumnProps {
     filterType?: string;
     filterMaxLength?: number;
     filterElement?: object;
+    filterFunction?(value: any, filter: any): void;
     style?: object;
     className?: string;
     expander?: boolean;
     frozen?: boolean;
     selectionMode?: string;
     colSpan?: number;
     rowSpan?: number;
-    editor?(): void;
-    editorValidator?(): void;
+    editor?(props: any): void;
+    editorValidator?(props: any): booelan;
     rowReorder?: boolean;
     rowReorderIcon?: string;
 }

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,

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;

src/showcase/datatable/DataTableDemo.js

@@ -256,7 +256,7 @@ export class DataTableDemo extends Component {
                             <td>filterMatchMode</td>
                             <td>string</td>
                             <td>null</td>
-                            <td>Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals" and "in".</td>
+                            <td>Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals", "in" and "custom".</td>
                         </tr>
                         <tr>
                             <td>filterType</td>
@@ -282,6 +282,12 @@ export class DataTableDemo extends Component {
                             <td>null</td>
                             <td>Element for custom filtering.</td>
                         </tr>
+                        <tr>
+                            <td>filterFunction</td>
+                            <td>function</td>
+                            <td>null</td>
+                            <td>Custom filter function.</td>
+                        </tr>
                         <tr>
                             <td>style</td>
                             <td>object</td>
@@ -819,6 +825,47 @@ export class DataTableFilterDemo extends Component {
 
             <p>Filters property of the DataTable can also be used to filter the DataTable initially with prepopulated filters.</p>
 
+            <p>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.</p>
+            <CodeHighlight className="javascript">
+{`
+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 = <div style={{'textAlign':'left'}}>
+                        <i className="fa fa-search" style={{margin:'4px 4px 0 0'}}></i>
+                        <InputText type="search" onInput={(e) => this.setState({globalFilter: e.target.value})} placeholder="Global Search" size="50"/>
+                    </div>;
+
+        return (
+            <DataTable value={this.state.cars} paginator={true} rows={10} header={header} 
+                globalFilter={this.state.globalFilter}>
+                <Column field="vin" header="Vin" filter={true} />
+                <Column field="year" header="Year" filter={true} filterMatchMode="custom" filterFunction={this.yearFilter}/>
+                <Column field="brand" header="Brand" filter={true} />
+                <Column field="color" header="Color" filter={true}  />
+            </DataTable>
+        );
+    }
+}
+
+`}
+</CodeHighlight>
+
             <h3>Selection</h3>
             <p>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.</p>

src/showcase/datatable/DataTableFilterDemo.js

@@ -84,8 +84,8 @@ export class DataTableFilterDemo extends Component {
                     <div className="feature-intro">
                         <h1>DataTable - Filter</h1>
                         <p>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..</p>
+                            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.</p>
                     </div>
                 </div>