RSC Mode Grouping OverviewPremium
In server-side scenarios, the grouping logic works similarly to grouping in the client mode of the Grid, but with server actions. When the user modifies the grouping state or expand a group, the server is responsible for saving and managing the grouped data.
Start Free Trial
When grouping changes occur, the onGroupChange and the onDataStateChange callbacks are triggered.
In the RSC mode of the Grid, this callback must be marked as async and include 'use server' at the top. This ensures that grouping state is handled on the server side.
Since the grouping state is stored on the server (such as in cookies), you must ensure proper state management to maintain consistent grouping across page reloads.
const onGroupChange = async (event: ServerEvent<GridGroupChangeEvent>) => {
'use server';
const groupedState = event.group;
cookies().set(TAG, JSON.stringify(groupedState)); // Save current grouping state
};
return <Grid onGroupChange={onGroupChange} groupable={true} dataItemKey={dataItemKey}></Grid>;Below you can see an example of handling grouping changes on the server to maintain consistent state across reloads.