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

问题描述

我正在使用反应表，并且我想使用table-layout: fixed。

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

react-table是否可以为某些列设置固定宽度？ 如果没有，如何将className添加到<th>元素中？

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

这是一种可行的方法吗？

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

解决方法

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

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数组中设置的道具。