6

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.

kdizzle
  • 577
  • 1
  • 11
  • 23
  • 3
    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. Oct 29 '19 at 23:34
  • 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 Oct 30 '19 at 16:55
  • 1
    Specifically, I'm unsure how to pass in `getTableProps()` and `getTableBodyProps()` to the table wrapper and the table body wrapper into AntD's components. https://github.com/tannerlinsley/react-table/blob/master/examples/filtering/src/App.js#L241 – kdizzle Oct 30 '19 at 17:05

1 Answers1

2

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>
    </>
  );
};
masyn
  • 51
  • 4