0

使用时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
        ]);
    }
4

1 回答 1

0

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

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

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

于 2021-04-07T00:14:12.480 回答