CODEWITHSUNDEEP
javascriptreactjsreact-table
Hung Vu
Hung Vu

Reputation: 81

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.

Upvotes: 5

Views: 5608

Answers (2)

Hung Vu
Hung Vu

Reputation: 81

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

Upvotes: 0

Dillon Liu
Dillon Liu

Reputation: 71

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

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

Upvotes: 1

Related Questions