DEV Community

Sai Sandeep Vaddi
Sai Sandeep Vaddi

Posted on • Originally published at saisandeepvaddi.com

Simple Extensions to make your Ant Design Tables better.

If you've been using Ant Design in your projects, you know its Table component is extensive. You almost never need to reach out for third-party table libraries.

To extend that even further, I've released ant-table-extensions. Right now, it has support for exporting to CSV, and searching the table including fuzzy search (configurable).

I'll show a quick summary of features, please checkout docs and demos for more details.

The library adds four main props to Table.

  1. exportable - Adds Export to CSV button and exports all rows and columns on click.
  2. exportableProps - Customize CSV exporting.
  3. searchable - Adds search box and search functionality. Searches for exact word by default.
  4. searchableProps - Customize search.

NOTE: You already should have ant design in your project and its styles are imported.

Installation

npm install ant-table-extensions
Enter fullscreen mode Exit fullscreen mode
// don't forget to import ant styles here.
- import { Table } from "antd";
+ import { Table } from "ant-table-extensions";
Enter fullscreen mode Exit fullscreen mode

Exportable Table

It's as simple as adding exportable prop.

function App() {
  return <Table dataSource={dataSource} columns={columns} exportable />;
}
Enter fullscreen mode Exit fullscreen mode

Now you'll have a button which exports the table to a CSV.

Table with Export button

You can also configure how you can export your table,

If you want to pick columns to export,

function App() {
  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      exportableProps={{ showColumnPicker: true }}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

The result is,

Export Column picker modal

You can modify how the data and headers should be in exported file.

There is a fields option part of exportableProps. Let's say you need to add Full Name in your CSV combining first name and last name.

const fields = {
  fullName: {
    header: "Full Name",
    formatter: (_fieldValue, record) => {
      return record?.firstName + " " + record?.lastName;
    },
  },
  country: "Your Country", // Country column will get 'Your Country' as header
};

return (
  <Table
    dataSource={dataSource}
    columns={columns}
    exportableProps={{ fields, fileName: "my-table" }}
  />
);
Enter fullscreen mode Exit fullscreen mode

Check the docs for more configuration options.

There is an ExportTableButton component available if want to just grab the button that does all the exporting and put it wherever you want. Please check ExportTableButton docs for details.

Searchable Table

Again, It's as simple as adding searchable prop.

function App() {
  return <Table dataSource={dataSource} columns={columns} searchable />;
}
Enter fullscreen mode Exit fullscreen mode

Now you'll have a search box.

Table with Search box

It uses Fuse.js under the hood by default.

If you want fuzzy search enabled, use searchableProps option.

function App() {
  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      searchableProps={{ fuzzySearch: true }}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

Check the searchableProps to see available search customization.

There is a SearchTableInput component available if want to use the input box that does the searching and put it wherever you want. Please check SearchTableInput docs for details. Click show code in the docs to see usage. There's a little more state management to do for this.

As you might have guessed, you can use exportable and searchable to have both.

function App() {
  return (
    <Table dataSource={dataSource} columns={columns} exportable searchable />
  );
}
Enter fullscreen mode Exit fullscreen mode

The result is,

Exportable & Searchable Table

GitHub repository at ant-table-extensions

Link to my GitHub to check my other projects. - saisandeepvaddi.

Thank you. Have a great day 🙂.

Top comments (2)

Collapse
 
misakisf profile image
Misaki

thank you <3

Collapse
 
manuelhpineda_87 profile image
Manuel Pineda

I am having trouble with nested data. I know that in v4 dataIndex: ["status", "name"]
But this doesn't seem to work while exporting.