How to add group headers

[olivermicke]

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]

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

[olivermicke]

Unfortunately not. Best of luck to you

[aprilchang]

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]

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.

[aprilchang]

Thank you!