How to add group headers #3320

olivermicke · 2021-06-14T09:51:26Z

olivermicke
Jun 14, 2021

Hey,
first of all thank you for creating this awesome library.

How would you recommend to implement group headers Example image

I was unable to use the built-in grouping as I don't want to aggregate any data, but rather add more (group header) rows.

DPCamino · 2021-07-16T19:08:08Z

DPCamino
Jul 16, 2021

Were you able to achieve this result? I too was trying to achieve a similar look.

6 replies

aprilchang Oct 9, 2021

Did either of you figure this out? We are trying to do the same thing and would appreciate tips if you have any. Thanks.

DPCamino Oct 10, 2021

Yup!

Basically, create a new tbody for every group, which according to documentation is an appropriate table structure:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody#multiple_bodies

Map through a unique group array (that you create from your data) and render each tbody section with its own th and tr elements. Here is example:

            uniqueGroupsArray.map(group =>
              <tbody {...getTableBodyProps()}>
                  <tr>
                    <th colSpan={visibleColumns.length}>{group}</th>
                  </tr>
                {rows.filter(x => x.original.DataProperty == group).map(row => {
                  prepareRow(row);
                  return (
                    <tr {...row.getRowProps()}>
                      {row.cells.map(cell => {
                        return (
                          <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                        );
                      })}
                    </tr>
                  );
                })}
              </tbody>
            )

You map through an array of group header names that you create ( uniqueGroupsArray ), rendering the name of each group header in its own th, then filter and render table data that matches that particular header group, e.g., DataProperty.