Ant Filterable Table
A component to display a table with filter options, based on React Hooks and Ant Design.
Installing
npm
$ npm install --save ant-filterable-table
or Yarn
$ yarn add ant-filterable-table
Requirements
React >= 16.8.0
Get Started
See live example on CodeSandBox:
The simplest usage would be:
{ const filters setFilters = ; const variables = ; if filterscompleted variablescompleted = filterscompleted0value; // using react-request-hook-client library // https://github.com/zxuqian/react-request-hook-client const loading data = ; return <FilterableTable = = = = > <Filter ="Completeness" ="completed" = = /> /* You can define as many filters as you want */ </FilterableTable> ;} const completedFilters = id: 1 name: "yes" value: true id: 2 name: "no" value: false ;
The <FilterableTable>
can have many <Filter>
components as its children, these are the filter tags used to filter table data. When tags are clicked, the onFiltersChange
callback will notify the outer component with the newest filter values.
API
<FilterableTable>
Props | Type | Default Value | Description |
---|---|---|---|
columns | Array | Same as Ant Design Table | |
dataSource | Array | Same as Ant Design Table | |
loading | Same as Ant Design Table | ||
onFiltersChange | Function | (filters) => void . Callback to be invoked on filter changes |
<Filter>
Props | Type | Default Value | Description |
---|---|---|---|
label | String | Label to be displayed alongside filters | |
name | String(Required) | Used as the key of the filter value in the all filters object. | |
tags | Array(Required) | An array of tags to display as a filter. Each tag at least has an id and name attribute. {id: 1, name: "tag1"} |
|
multiSelectable | Boolean | TRUE | Whether tags in the filter can be selected multiply |
Issues
If you have any questions or find a bug of this library, please feel free to open an issue.
License
MIT