如何在 react-table 中合并单元格

Question

我正在使用 react-table 并希望根据内部的数量合并特定单元格的单元格。它喜欢删除分隔线边框。

看起来像这样：https://i.imgur.com/BelFNSj.png

我尝试使用 border-bottom: 1px solid transparent !important; 和 border-top: 1px solid transparent !important; 在 Columns 中使用 className，但它没有用。你能告诉我该怎么做吗？谢谢。

Answer 1

试试名为 colSpan 的内置 table 属性，它指定要水平合并的单元格数量。

<TableCell colSpan=2> My Cell </TableCell>

Answer 2

在useTable中使用defaultColumn，然后可以传cell : customTableCell 例如：

const defaultColumn = useMemo( () => ({ 
Filter: DefaultColumnFilter, 
Cell: customTableCell || TableCell, 
Header: DefaultHeader, }), [] );

const instance = useTable( {
 columns, data: data || [zeroStateData], 
defaultColumn, }, );

如何在 react-table 中合并单元格

How to merge cell in react-table

javascript

reactjs

react-table