Ant Design + React-table。如何在 Ant Design 提供的 UI 元素之上构建 react-table 的过滤能力？

Question

我一直在查看react-table和Ant Design 的 table element之间的文档。看来，蚂蚁设计有点问候自以为是，以允许开发人员自由的道具添加到要么<table>，<thead>或<tbody>。

React-table 是一个无头 UI 库，它为开发人员提供 React 钩子以与我们自己的 UI 元素一起使用，但我目前的问题是能够将这些钩子发送到 AntD 的 Table 元素的核心 UI 元素中。

有没有人遇到过类似的问题？如果是这样，您的解决方法是什么？

我不想诉诸于从 react-table 和 Ant Design 中取出大量源代码来最终构建我自己的 react-table/AntD table 混合解决方案。

Answer 1

最丑陋和最简单的方法是仅使用从 Table 组件中提取的类名。您将失去 AntD Tables 的功能，但我认为这就是您正在寻找的功能。

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>
    </>
  );
};