Ant Design + React-таблица. Как я могу создать возможность фильтрации таблицы реакций поверх элементов пользовательского интерфейса, предоставляемых Ant Design?

Я просматривал документы между response-table и элемент таблицы Ant Design. Похоже, что дизайн Ant немного самоуверен в отношении предоставления разработчикам свободы добавлять реквизиты к <table>, <thead> или <tbody>.

React-table - это безголовая библиотека пользовательского интерфейса, которая предоставляет разработчик крючков React для использования с нашими собственными элементами пользовательского интерфейса, но моя проблема на данный момент заключается в том, чтобы отправить эти хуки в основные элементы пользовательского интерфейса элемента AntD Table.

У кого-нибудь когда-нибудь возникала подобная проблема? Если да, то каковы были обходные пути?

Я не хочу прибегать к извлечению фрагментов исходного кода как из таблицы реакции, так и из Ant Design, чтобы в конечном итоге создать свой собственный гибрид решения таблицы реакции и таблицы AntD.


reactjs design-patterns antd react-table
person kdizzle    schedule 29.10.2019    source источник
comment
AntD предоставляет свойство components, которое позволяет вам определять пользовательские компоненты для заголовков, строк, ячеек и т. Д., А также onHeader/HeaderCell/etc свойства для предоставления пользовательских свойств. Что вы пытаетесь настроить, чего не можете сделать с помощью встроенных функций? Кроме того, у таблицы AntD есть некоторые неприятные проблемы с производительностью при использовании выбора строк с большими наборами данных.   -  person Chris B.    schedule 30.10.2019
comment
Я пытаюсь настроить функции фильтрации и напоминания, которые имеет response-table, с элементами пользовательского интерфейса AntD. Также полезно знать, что при работе с большими наборами данных возникает проблема с производительностью. Спасибо!   -  person kdizzle    schedule 30.10.2019
comment
В частности, я не уверен, как передать getTableProps() и getTableBodyProps() в оболочку таблицы и оболочку тела таблицы в компоненты AntD. github.com/tannerlinsley/react- таблица / blob / master / examples /   -  person kdizzle    schedule 30.10.2019

Ответы (1)


arrow_upward
2
arrow_downward

Самый уродливый и простой способ - просто использовать classNames, извлеченные из компонента 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>
    </>
  );
};
person masyn    schedule 30.12.2020
comment
Что ж, эта идея мне тоже пришла в голову. - person ospider; 21.03.2021