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

Question

我一直在查看 react-table 之间的文档和 Ant Design's table element .似乎 Ant 设计在允许开发人员自由添加 Prop 到 <table> 方面有点固执己见。 , <thead> , 或 <tbody> .

react 表是 headless UI library它为开发人员提供了与我们自己的 UI 元素一起使用的 React 钩子(Hook)，但我目前的问题是能够将这些钩子(Hook)发送到 AntD 的 Table 元素的核心 UI 元素中。

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

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

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