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

Question

我正在使用react-table，希望使用table-layout: fixed。

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

是否有任何方法可以在react-table中设置某些列的固定宽度？ 如果没有，如何向<th>元素添加classNames？

这个问题可以通过添加单元格的classNameshttps://github.com/tannerlinsley/react-table/issues/1612来解决，但不能用于<th>元素。

有什么可行的方式吗？

备注：我希望避免使用:nth-child选择器，因为我不想依赖表格中列的位置。

- kitimenpolku

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([....])。它会考虑我们所传递的props。

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

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

- kitimenpolku