v8 - Show Aggregated Value in a Grouped Cell (cell.getIsGrouped() === true)

[treasurely]

I've been trying to replicate this v7 "Grouping Column" example in v8 : https://react-table-v7.tanstack.com/docs/examples/grouping-column

Essentially, when a column's groupBy status is toggled to true, all columns should remain in place (including the toggled one). The separate "grouping" column displays the grouping value, and all other cells for the grouped row should be empty, unless the column has an aggregate function (same functionality as something like AG Grid or Airtable for those familiar).

Everything is working in the v8 table with the exception of rendering the aggregate value for a column that the table is currently grouped by -- it will always show the value of the first leaf row instead of the aggregate function. In the sandbox below, I'd expect "count" values to show up in both "Studio" and "Year" -- when the table is grouped by both, the aggregate value doesn't show up. When removing "year" (there's a button to toggle it easily in the sandbox), the aggregate value then shows up. I've tried a few different ternary renders -- currently I'm using:

{row.getIsGrouped() ? flexRender( cell.column.columnDef.aggregatedCell ?? null, cell.getContext() ) : flexRender( cell.column.columnDef.cell, cell.getContext() )}

Sandbox here: https://codesandbox.io/s/distracted-haze-lq9ojm?file=/src/App.js

If we can get an answer to this, happy to build something for the v8 examples page that creates a "Grouping with Group Column" table -- also helpful for people building an Airtable-type or AG Grid-type clone.

Thanks!

[tannerlinsley]

Have you compare it to the normal grouping example? I believe it does this

…

On Jul 4, 2022, 9:17 PM -0600, adamshater ***@***.***>, wrote: I've been trying to replicate this v7 "Grouping Column" example in v8 : https://react-table-v7.tanstack.com/docs/examples/grouping-column Essentially, when a column's groupBy status is toggled to true, all columns should remain in place (including the toggled one). The separate "grouping" column displays the grouping value, and all other cells for the grouped row should be empty, unless the column has an aggregate function (same functionality as something like AG Grid or Airtable for those familiar). Everything is working in the v8 table with the exception of rendering the aggregate value for a column that the table is currently grouped by -- it will always show the value of the first leaf row instead of the aggregate function. In the sandbox below, I'd expect "count" values to show up in both "Studio" and "Year" -- when the table is grouped by both, the aggregate value doesn't show up. When removing "year" (there's a button to toggle it easily in the sandbox), the aggregate value then shows up. I've tried a few different ternary renders -- currently I'm using: {row.getIsGrouped() ? flexRender( cell.column.columnDef.aggregatedCell ?? null, cell.getContext() ) : flexRender( cell.column.columnDef.cell, cell.getContext() )} Sandbox here: https://codesandbox.io/s/distracted-haze-lq9ojm?file=/src/App.js If we can get an answer to this, happy to build something for the v8 examples page that creates a "Grouping with Group Column" table -- also helpful for people building an Airtable-type or AG Grid-type clone. Thanks! — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[treasurely]

Hey there, I took a look just now -- my fault for not being clearer in the initial submit, the table instance I'm using has groupedColumnMode set to false, so the column remains where it is after it's been grouped.

I used the grouping column example for most of this table I built, but that looks like groupedColumnMode is reorder/the default, so its removing the column from the table's normal column flow & placing it at the front of the table. My goal is to have columns that are being used to group by to remain in place and show the aggregated value when its a grouped row -- the issue is the aggregateFn isn't applying specifically to the cell of the column(s) the table is grouped by.

I went back to the docs & out of curiosity tried my table using {...aggregatedCell: ({row}) => <some count function>} instead of {...aggregateFn: "count"} and it ended up working: https://codesandbox.io/s/patient-grass-rk9rhm?file=/src/App.js

Honestly love this library, it's been everything I could've wanted & more -- using aggregatedCell & some lodash functions gets the job done for me! Appreciate all of the immense work you & the other Tanstack contributors have done for this!