react-table - react-table - 如何修复元素的宽度

Question

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

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

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

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

什么是可行的方法？

ps：我想避免使用:nth-child选择器，因为我不想依赖表格上的列位置。

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>

以 ghis 的方式，<th>可以接收我们在 columns 数组中设置的 props。