Ant Table Extensions

Extensions to Table component of React Ant Design

Ant Table Extensions

Installation

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} />
}

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.

Prop types and their descriptions.

exportableProps

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.

searchableProps

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.

License

MIT - saisandeepvaddi