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

问题描述

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）