React-table multiple data in a row and

Question

I am using react-table for creating the table. The table should look like this as shown above. What I need to do is show multiple values in a single cell of a particular column and the values in the following cells of the row corresponds to only one of the multiple value. When the table is expanded two more values are added to that column of multiple values and the data in the row is to be shown of all the multiple values in the row. Please refer the image for more clarification. The problem I am facing is that I am unable to show multiple values in a single cell and than add the other two values in the same cell when expanded.

Dushan Ranasinghe Dushan Ranasinghe · Accepted Answer · 2018-12-03T09:18:06

If you need to show multiple values in a single cell. Try this, Because that worked for me.

columns: [{
    Header: 'First Name ',
    id: 'firstName',
    accessor: d => `${d.firstName} ${d.lastName}`,
    maxWidth: 200
  }

If you need to change the header. Header also can be changed like this. The second thing if cells are expanding when values are added give them a maxWidth. Like that.

React-table multiple data in a row and

1 Answers