Search code examples
javascriptreactjsreact-table

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.sstatic.net/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.

Solution

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