CODEWITHSUNDEEP
reactjsreact-table
thevatsalsaglani
thevatsalsaglani

Reputation: 603

How can I split a row into two or more rows with single key in the column as depicted in the image using React-Table?

enter image description here

Is there a way to split a row into multiple rows as given in the image for a single column key.

Upvotes: 1

Views: 1696

Answers (1)

aturan23
aturan23

Reputation: 5410

You can write like this:

<Row>
 {index === 0 ? (
   <Cell
       rowSpan={rows.length}
       style={{ padding: '8px' }}>
        B
   </Cell>
  ) : null}
  <Cell
      style={{ padding: '8px' }}>
       {row.cells[1].render('Cell')}
  </Cell>
  <Cell
      style={{ padding: '8px' }}>
       {row.cells[2].render('Cell')}
  </Cell>
  <Cell
      style={{ padding: '8px' }}>
       {row.cells[3].render('Cell')}
  </Cell>
</Row>

Rowspan attribute specifies the number of rows a cell should span. And there you can find my code.

Upvotes: 1

Related Questions