ant-filterable-table v0.0.1-alpha3

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:

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>

<Filter>

Issues

If you have any questions or find a bug of this library, please feel free to open an issue.

License

MIT