grommet / grommet

a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
https://grommet.io
Apache License 2.0
8.34k stars 1.03k forks source link

Unable to group certain rows of DataTable instead of all ones #6839

Open undeletable opened 1 year ago

undeletable commented 1 year ago

Expected Behavior

It would be nice to be able to specify either rows whitelist (so that only they are joined into groups), or blacklist (so that all rows except them would be grouped), or some condition which determines if a row should be added to group.

Actual Behavior

If groupBy property of DataTable is used, all table rows are grouped.

Your Environment

MikeKingdom commented 1 year ago

You can take control of all the grouping/sorting/filtering and pagination with onUpdate. Note however it's an all or nothing thing (e.g. you have to manage all of that yourself) if you use onUpdate instead. For an example see https://storybook.grommet.io/?path=/story/visualizations-datatable-spacex-grouped--space-x

undeletable commented 1 year ago

@MikeKingdom Thank you for pointing, but onUpdate doesn't cover my case, as far as I see. It allows to control which groups to expand on lazy loading of data and triggering of sort and grouping controls. But my goal is not to add certain data items to any group at all, something like this: grommet-table-ungrouped-items I don't see how this can be achieved without workarounds. Please let me know if I'm missing something.

MikeKingdom commented 1 year ago

onUpdate lets you define what items are in what groups and you have to then include objects defining the group header/expander rows in the data passed to the DataTable. That also means you don't have to put certain items in groups. A recommended way to do this is to include a 'groupBy' property that optionally isn't shown and whose value serves as the group's primary key for expansion/selection/etc.

undeletable commented 1 year ago

@MikeKingdom I'm trying to set table state dynamically using onUpdate as suggested, but the original issue still persists. See four items without 'Group' being united into group with empty title (which I'm trying to avoid): https://codesandbox.io/s/grommet-datatable-partial-groupby-not-working-n6dw5f?file=/src/App.js Am I missing anything?