如何解决如何使用反应表指定第一列的列宽
当使用 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
对象。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。