react-table

Question

我使用 react-table 我想使用 table-layout: fixed.

我想使用 classNames 指定列的宽度。

有什么方法可以让 react-table 为某些列设置固定宽度？如果没有，我如何将 classNames 添加到 <th> 元素？

此问题解决了将类名添加到单元格 https://github.com/tannerlinsley/react-table/issues/1612 但不是 <th> 元素的问题。

什么是可行的方法？

ps：我想避免使用 :nth-child 选择器，因为我不想依赖于 table.

上的列位置

Answer 1

好的，我在查看示例代码时找到了答案。

https://react-table-omega.vercel.app/docs/examples/data-driven-classes-and-styles

解决方案是在列中定义额外的属性：

{
  Header: 'Name',
  columns: [
    {
      Header: 'First Name',
      accessor: 'firstName',
      className: 'user',
    },
  ],
},

此信息将在 column 中提供。现在我们可以将这些信息传递给column.getHeaderProps([....])。它会考虑到我们传递的道具。

 <tr {...headerGroup.getHeaderGroupProps()}>
   {headerGroup.headers.map(column => (
     <th {...column.getHeaderProps([
       { className: column.className },
     ])}>
       {column.render('Header')}
     </th>
   ))}
 </tr>

通过这种方式，<th>可以接收到我们在columns数组中设置的props。

react-table - 如何固定元素的宽度

react-table - How to fix width of th elements

react-table-v7