javascript - 为什么在使用 react-table 时使用 `useTable` 而不是 `ReactTable`

Question

关于他们的 npm page , 该示例显示了 <ReactTable> 的用法组件:

import ReactTable from 'react-table'
...
render() {
  return (
    <ReactTable
      data={data}
      columns={columns}
    />
  )
}

然而，在他们的API Docs和 examples , 他们都使用 useTable .

import { useTable } from 'react-table';

function Table({ columns, data }) {
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data,
  })

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(
          (row, i) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                })}
              </tr>
            )}
        )}
      </tbody>
    </table>
  )
}

...

render () {
  return (
    <Table columns={columns} data={data} />
  )
}

所以，我的问题是:为什么有人会使用钩子(Hook)(useTable、useFilters 等)并制作 Table 组件，而他/她只能使用已经提供的组件。我很确定他们没有忘记更新他们的 npm 页面的示例……或者他们忘记了吗？

Answer 1

react-table是一个“headless”UI 库，这意味着它仅提供后端表格功能，并且需要您使用自己的 React 组件实现表格的渲染。

这意味着您可以将后端表代码应用于您想要的任何样式的表(例如 Bootstrap、Material UI、vanilla HTML 等)，并且您可以精确控制将此库连接到 UI 的位置.

大多数表库(包括 react-table v7 之前的版本!)都有预定义的功能和行为，在某些情况下可能不适合您；然而，当使用 react-table >=v7 时，您可以通过实现自己的 UI 代码然后将其连接到您的 react-table 钩子(Hook)代码来满足这些情况。