Add fitlers paramters to react-bootstrap-table (#14861)

react-bootstrap-table/index.d.ts

@@ -356,7 +356,7 @@ export interface Options {
 	/**
 	Background color on expanded rows.
 	*/
-	expandRowBgColor?: string;	
+	expandRowBgColor?: string;
 	/**
 	Assign a callback function which will be called when mouse enter into the table.
 	*/
@@ -568,6 +568,11 @@ export interface Editable {
     cols?: number;
     rows?: number;
 }
+export type SetFilterCallback = (targetValue: any) => boolean;
+export interface ApplyFilterParameter {
+	callback: SetFilterCallback;
+}
+
 export type FilterType = 'TextFilter' | 'RegexFilter' | 'SelectFilter' | 'NumberFilter' | 'DateFilter' | 'CustomFilter';
 export interface Filter {
 	/**
@@ -590,6 +595,26 @@ export interface Filter {
 	 * Only work on NumberFilter. Accept an array which conatin the filter condition, like: ['<','>','=']
 	 */
     numberComparators?: string[];
+
+    /**
+     * Options for the filter.
+     */
+    options?: any;
+
+    /**
+     * Comparison condition for the NumberFilter
+     */
+    condition?: string;
+
+    /**
+     * Get element which represent filter.
+     */
+    getElement?: (filterHandler: (parameters?: ApplyFilterParameter) => void, filterParameters: any) => JSX.Element;
+
+    /**
+     * Parameters for custom filter
+     */
+    customFilterParameters?: any;
 }
 
 export interface TableHeaderColumn extends ComponentClass<TableHeaderColumnProps> { }

react-bootstrap-table/react-bootstrap-table-tests.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { render } from 'react-dom';
-import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+import { BootstrapTable, TableHeaderColumn, ApplyFilterParameter } from 'react-bootstrap-table';
 
 var products = [{
   id: 1,
@@ -27,3 +27,56 @@ render(
     </BootstrapTable>,
   document.getElementById("app")
 );
+
+const qualityType = {
+  0: 'good',
+  1: 'bad',
+  2: 'unknown'
+};
+
+function enumFormatter(cell: any, row: any, enumObject: any) {
+  return enumObject[cell];
+}
+
+class SelectFilterWithDefaultValue extends React.Component<any, any> {
+  render() {
+    return (
+      <BootstrapTable data={ products }>
+          <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
+          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField='quality' filterFormatted dataFormat={ enumFormatter }
+            formatExtraData={ qualityType } filter={ { type: 'SelectFilter', options: qualityType, defaultValue: 1 } }>Product Quality</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}
+
+class TextFilterWithCondition extends React.Component<any, any> {
+  render() {
+    return (
+      <BootstrapTable data={ products }>
+        <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
+        <TableHeaderColumn dataField='name' filter={ { type: 'TextFilter', delay: 1000, condition: 'eq' } }>Product Name</TableHeaderColumn>
+        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}
+
+function getCustomFilter(filterHandler: (parameters?: ApplyFilterParameter) => void, customFilterParameters: any) {
+  return (
+    <div />
+  );
+}
+
+class CustomFilter extends React.Component<any, any> {
+  render() {
+    return (
+      <BootstrapTable data={ products }>
+        <TableHeaderColumn dataField='id' isKey>Product ID</TableHeaderColumn>
+        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+        <TableHeaderColumn dataField='isInStock' filter={ { type: 'CustomFilter', getElement: getCustomFilter, customFilterParameters: { textOK: 'yes', textNOK: 'no' } } }>Product Is In Stock</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}