Ant Design + React-table. How can I build the filtering capability of react-table on top of the UI elements provided by Ant Design?

5
votes

I've been looking at the docs between react-table and Ant Design's table element. It seems that Ant design is a bit opinionated in regards to allowing the developer freedom to add props to either the <table>, <thead>, or <tbody>.

React-table is a headless UI library which provides the developer the React hooks to use with our own UI elements, but my problem at the moment is being able to send those hooks into the core UI elements of AntD's Table element.

Has anyone ever had a problem similar to this? If so, what were your workarounds?

I do not want to resort to taking out chunks of source code from both react-table and Ant Design to eventually building out my own react-table/AntD table hybrid of a solution.

1
reactjsdesign-patternsantdreact-table
AntD supplies a components prop that allows you to define custom components for headers, rows, cells, etc., as well as onHeader/HeaderCell/etc props to provide custom props. What are you trying to customize that you can't with its built-in functionality? Also, AntD's table has some nasty performance problems when using row selection with large datasets. - Chris B.
I'm trying to customize the filtering and typeahead functionality that react-table has with the UI elements of AntD. Also, good to know that there's a performance issue with large datasets. Thank you! - kdizzle
Specifically, I'm unsure how to pass in getTableProps() and getTableBodyProps() to the table wrapper and the table body wrapper into AntD's components. github.com/tannerlinsley/react-table/blob/master/examples/… - kdizzle

1 Answers

2
votes

The ugliest and the easiest way would be to just use classNames extracted from Table component. You will loose the features of AntD Tables, but I assume, it is what you're looking for.

const SampleTable = () => {
  return (
    <>
      <table style={{ tableLayout: "auto" }}>
        <colgroup></colgroup>
        <thead className="ant-table-thead">
          <tr>
            <th className="ant-table-cell">Name</th>
            <th className="ant-table-cell">Age</th>
          </tr>
        </thead>
        <tbody className="ant-table-tbody">
          <tr className="ant-table-row ant-table-row-level-0">
            <td className="ant-table-cell">
              <a>John Brown</a>
            </td>
            <td className="ant-table-cell">21</td>
          </tr>
          <tr className="ant-table-row ant-table-row-level-0">
            <td className="ant-table-cell">
              <a>Jim Green</a>
            </td>
            <td className="ant-table-cell">21</td>
          </tr>
          <tr className="ant-table-row ant-table-row-level-0">
            <td className="ant-table-cell">
              <a>Joe Black</a>
            </td>
            <td className="ant-table-cell">21</td>
          </tr>
        </tbody>
      </table>
    </>
  );
};