如何使用反应表指定第一列的列宽

问题描述

当使用 useRowSelect 和 useTable 时，如何指定第一列的列宽，使其永远不会超过复选框的宽度？我不想使用 useFlex，因为我想根据标题宽度保留列宽。

当表格设置为 100% 宽度时，如果您展开浏览器窗口，您会注意到第一列开始增长。

这是一个例子：

https://codesandbox.io/s/youthful-hamilton-j0rev?file=/src/App.js

我也愿意从我推入列数组的位置抓取 Header 和 Cell 并添加一个 className，但无法找到一种方法来做到这一点。如何添加 className 以便围绕此列数据的表格单元格具有要附加到的 className：

    (hooks) => {
      isRowSelectable &&
        hooks.allColumns.push((columns) => [
          {
            id: 'selection',minWidth: 35,width: '35px',maxWidth: 35,Header: ({ getToggleAllRowsSelectedProps }) => (
              <CheckBox alignSelf="center" {...getToggleAllRowsSelectedProps()} />
            ),Cell: ({ row }: any) => {
              row.className = '123';
              return <CheckBox alignSelf="center" {...row.getToggleRowSelectedProps()} />;
            }
          },...columns
        ]);
    }

解决方法

由于 Array.map 可以传递元素的索引，如果行索引为 0，则有条件地向单元格添加一个 className 是相当简单的：

{
  rows.map((row,i) => {
    prepareRow(row);
    return (
      <td className={i === 0 ? "class-name" : ""} {...cell.getCellProps()>
         {cell.render("Cell")}
      </td>
    ) ​
}

如果您希望将相同的类应用于标题，您可以对 <th> 或 <tr> 元素执行相同的操作，因为它们也使用 Array.map 呈现。对于此更改，您实际上根本不需要触摸 columns 对象。