时间戳

首页 > 解决方案 > Ant Design + React-table。如何在 Ant Design 提供的 UI 元素之上构建 react-table 的过滤能力？

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

问题描述

我一直在查看react-table和Ant Design 的 table element之间的文档。似乎 Ant 设计在允许开发人员自由添加道具到<table>、<thead>或<tbody>.

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

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

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

标签： reactjsdesign-patternsantdreact-table

解决方案

最丑陋和最简单的方法是只使用从 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>
    </>
  );
};

推荐阅读