Extensions to Table component of React Ant Design
NOTE: This library works in a project already using React Ant Design. This library WILL NOT import ant styles for you and your project is expected to have them imported already. Visit ant official docs page for installation.
npm install ant-table-extensions
(or)
yarn add ant-table-extensions
// Don't forget to import ant styles
- import { Table } from "antd";
+ import { Table } from "ant-table-extensions";
function App() {
return <Table dataSource={dataSource} columns={columns} {..any other ant table props} />
}
ant-table-extension adds extra props along with Ant's in-built table props.
| Prop | Description | Type | default |
|---|---|---|---|
| exportable | Adds export to csv button | boolean | false |
| searchable | Adds search feature to table | boolean | false |
| exportableProps | Customize the export | object | null |
| searchableProps | Customize the search | object | null |
Plus, All of the ant table props.
exportable: true is optional if exportableProps are given
| Prop | Description | Type | default |
|---|---|---|---|
| fileName | File name in exporting csv file without extension | string | table |
| fields | Customize csv file like column header names, columns to include/exclude. More on this below. | object | null |
| disabled | Disable export button. | boolean | false |
| btnProps | Any of Ant button component props. | object | null |
| showColumnPicker | Show a modal to pick which columns to export. | boolean | false |
| children | React Child node. But here can be used to change button text. | ReactChild | "Export to CSV" |
Check types.ts for complete list.
searchable: true is optional if searchableProps are given
| Prop | Description | Type | default |
|---|---|---|---|
| debounce | Debounce search | boolean | true |
| inputProps | Ant Input box props | object | {} |
| fuzzySearch | Use fuzzy search instead of exact match | boolean | false |
| fuseProps | Fuse.js options which is used for search by default | object | { keys: 'dataIndex' of columns : [], threshold: fuzzySearch ? 0.6 : 0.1 } |
| searchFunction | Custom search function. Takes (dataSource: any[], searchTerm: string) => filteredDataSource | function | null |
Check types.ts for complete list.