如何合並反應表中的單元格

Question

我正在使用 react-table 並希望根據它們內部的數量合並特定單元格的單元格。 它喜歡刪除分隔線邊框。

它看起來像這樣： https://i.imgur.com/BelFNSj.png

我嘗試使用border-bottom: 1px solid transparent;important;在Columns中使用 className border-top: 1px solid transparent;important; , 但它沒有用。 你能告訴我該怎么做嗎？ 謝謝。

Answer 1

試試名為 colSpan 的內置表格屬性，它指定您要水平合並的單元格數量。

<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, }, );