komarovalexander / ka-table

Lightweight MIT React Table component with Sorting, Filtering, Grouping, Virtualization, Editing and many more
http://ka-table.com
MIT License
769 stars 56 forks source link

How to group by an object cell #387

Closed aleksei-baryshnikov closed 7 months ago

aleksei-baryshnikov commented 7 months ago

Hi.

I have all cells defined as { value: { ...any data }, }

In that case ka-table doesn't group properly because each cell is unique for it while it is an object.

Example: https://stackblitz.com/edit/table-grouping-ts-glc3t8?file=Demo.tsx

komarovalexander commented 7 months ago

hi @aleksei-baryshnikov you can have [object].[prop] keys (in your example it is 'type.value') in that case grouping will work example: https://stackblitz.com/edit/table-grouping-ts-mg79sz?file=Demo.tsx

aleksei-baryshnikov commented 7 months ago

But in some cases it could be { value: { key: value } }. In that case should I specify that for each column? Is it possible to have a function in colDef to build the groupKey?

komarovalexander commented 7 months ago

Can't you just map your data to type.value structure ?

aleksei-baryshnikov commented 7 months ago

I can't because in some cases I need to aplly special formatting for the cells. Saying that a cell value couldn't be a string. This is why it would be nice having a property like format.

aleksei-baryshnikov commented 7 months ago

For me the problem is that the cell contains some meta information which needs for making some actions when an user clicks on a cell. And ka-table takes it as is, as you can see on the screen. Here is no possibility to define key for cell rendering and key for cell grouping separately.

Screenshot 2024-02-27 at 19 17 50

If I set key: cell.value then I am missing cell.actions in the table config, like FormatFunc.

komarovalexander commented 7 months ago

you can map data and add separate prop for grouping, and by onClick or any other actions you can access original data though rowData, example: https://stackblitz.com/edit/table-grouping-ts-hdf9h3?file=Demo.tsx

aleksei-baryshnikov commented 7 months ago

That works but how to be with groups? I want to have the same formatting in there. But in grouping I don't have rowData if a group is collapsed, so it doesn't give me actions.

komarovalexander commented 7 months ago

There is groupItems in Group, you can access required data using it, demo: https://stackblitz.com/edit/table-grouping-ts-wg5rpj?file=Demo.tsx

aleksei-baryshnikov commented 7 months ago

I mapped, but would be great to have a cb in the colDef. Mb will do it by myself when have time.