Ant Table Extensions

<p align="center">
  <a href="https://github.com/saisandeepvaddi/ant-table-extensions">
        <img alt="Logo" src="https://raw.githubusercontent.com/saisandeepvaddi/ant-table-extensions/master/imgs/logo.png" width="150" />
  </a>
  <h1 align="center">
    Ant Table Extensions
  </h1>
</p>

Extensions to `Table` component of [React Ant Design](https://ant.design/components/table/)

# 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](https://ant.design) for installation.

```shell
npm install ant-table-extensions

  (or)

yarn add ant-table-extensions

```

```diff
// 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](https://ant.design/components/table/#API).

### 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](./src/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](https://fusejs.io/api/options.html) 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](./src/types.ts) for complete list.

## License

[MIT](/LICENSE) - [saisandeepvaddi](https://github.com/saisandeepvaddi)