'How to merge cell in react-table

I am using react-table and want to merge cell of specific cells based on their number inside. It likes remove divider border.

it looks like this: https://i.imgur.com/BelFNSj.png

I tried with className in Columns by using border-bottom: 1px solid transparent !important; and border-top: 1px solid transparent !important; , but it did not work. Could you tell me how to do that? Thanks you.

Solution 1:^[1]

use defaultColumn in useTable, and then you can pass cell : customTableCell For example:

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

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

Solution 2:^[2]

Try the built-in table attribute called colSpan which specifies how many cells you are merging horizontally.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Hung Vu
Solution 2	Dillon Liu

'How to merge cell in react-table

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]