[DataTable] RowGroupHeader show same columns as the rows that are being grouped (i.e. do what the footer is doing)

[craigcWC3]

I have a DataTable that groups rows based on the value of a field (e.g. 'project.name'). I can collapse/expand the group and have been able to add a footer to see totals of each column but would like to see information in the header when the group is collapsed. However, the header does not have the same behavior as the footer and my attempts to add the ability has fallen short.

Maybe there are better ways to do what I am trying to do, or a way that I have not been able to find in all of my google searches.

Hopefully this image demonstrates what I am seeing.

[melloware]

If you create a StackBlitz reproducer showing what you are trying to do someone here may be able to help.

Start with this one: https://stackblitz.com/edit/react-4bmrwf?file=src%2FApp.js

[craigcWC3]

Thank you for the advice. I have a demo here: https://stackblitz.com/edit/react-4bmrwf-gus9nh?file=src%2FApp.js

The footer behaves as expected. The header does not.

The rationalization is that I would like to see summary information (based on columns) to determine if I need to 'drill' down (or expand) the row.

[melloware]

@craigcWC3 can you elaborate you header looks like it has exactly what you want in it? What am I missing here?

[melloware]

OK I think I see what you mean you use <td> elements in the footer and they work but in the header they do not because the <tr> is broken up with the <button> etc. You should open a GitHub ticket this can only be fixed with changes to the PrimeReact code.

[melloware]

OK I made it better there is a setting options.customerRendering = true

const headerTemplate = (data, options) => {
    options.customRendering = true;

https://stackblitz.com/edit/react-4bmrwf-fwgj8o?file=src%2FApp.js

That puts the rendering of the Column Header fully under your control and the <td> line up. However there is still the issue of the missing RowToggler now.

[craigcWC3]

That's perfect! We can get the toggle value from the options and add our own toggler. The options.customRendering = true; was what I was missing.

The footer was aligned on each column (with the exception of the last column which had a span of two). To get the header to align on each column we had to remove padding and come up with some funny calculations to get the embedded columns to line up with the DataTable columns.

Again, the purpose was to show a summary of hidden (collapsed) information so the user could determine if they needed to expand it to see more details.

[melloware]

Nice! Glad I could help

[sdenvs]

How can we set our own toggler? @craigcWC3

[craigcWC3]

I have updated the Stackblitz to show how to create the toggler (https://react-4bmrwf-vz4yh6.stackblitz.io).