diff --git a/react-bootstrap-table/index.d.ts b/react-bootstrap-table/index.d.ts index 566019ab94..82384f0d9f 100644 --- a/react-bootstrap-table/index.d.ts +++ b/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 { } diff --git a/react-bootstrap-table/react-bootstrap-table-tests.tsx b/react-bootstrap-table/react-bootstrap-table-tests.tsx index 47682dd36a..2151f14c78 100644 --- a/react-bootstrap-table/react-bootstrap-table-tests.tsx +++ b/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( , 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 { + render() { + return ( + + Product ID + Product Name + Product Quality + + ); + } +} + +class TextFilterWithCondition extends React.Component { + render() { + return ( + + Product ID + Product Name + Product Price + + ); + } +} + +function getCustomFilter(filterHandler: (parameters?: ApplyFilterParameter) => void, customFilterParameters: any) { + return ( +
+ ); +} + +class CustomFilter extends React.Component { + render() { + return ( + + Product ID + Product Name + Product Is In Stock + + ); + } +}