# ant-filterable-table

> A filterable table component for Ant design

Latest version **0.0.1-alpha3** (published 2019-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install ant-filterable-table
pnpm add ant-filterable-table
yarn add ant-filterable-table
bun add ant-filterable-table
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-alpha3 |
| Published | 2019-08-22 |
| First published | 2019-08-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 44.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Xuqian Zhang |
| Maintainers | zxuqian |
| Keywords | react-component, ant-design, react, react hooks, hooks, filterable table, table, filterable, sort, filter, data list |

## Links

- npm: https://www.npmjs.com/package/ant-filterable-table
- Repository: https://github.com/zxuqian/ant-filterable-table
- Issues: https://github.com/zxuqian/ant-filterable-table/issues
- npm.io page: https://npm.io/package/ant-filterable-table

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.0.1-alpha3 (latest) — 2019-08-22
- 0.0.1-alpha2 — 2019-08-22
- 0.0.1-alpha1 — 2019-08-22

## README

# Ant Filterable Table

A component to display a table with filter options, based on React Hooks and Ant Design.

## Installing

**npm**

```bash
$ npm install --save ant-filterable-table
```

**or Yarn**

```bash
$ yarn add ant-filterable-table
```

## Requirements

React >= 16.8.0

## Get Started

See live example on CodeSandBox:

[![Edit ant-filterable-table](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/modern-glade-ptu8s?fontsize=14)

The simplest usage would be:

```jsx
function App() {
  const [filters, setFilters] = useState({});

  const variables = {};
  if (filters.completed) {
    variables.completed = filters.completed[0].value;
  }

  // using react-request-hook-client library
  // https://github.com/zxuqian/react-request-hook-client
  const { loading, data } = useRequest({
    url: "https://jsonplaceholder.typicode.com/todos",
    variables
  });

  return (
    <FilterableTable
      columns={columns}
      dataSource={data || []}
      loading={loading === true}
      onFiltersChange={setFilters}
    >
      <Filter
        label="Completeness"
        name="completed"
        tags={completedFilters}
        multiSelectable={false}
      />

      {/* 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

---
_Source: https://npm.io/package/ant-filterable-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._