How to merge cell in react-table

Question

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.stack.imgur.com/2sJ9O.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.

Answer 1

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

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

Answer 2

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