How to make group expand/collapse a controlled component in React?

[seeunextround]

First of all, thank you for your reply!
I need to consult on how to make the expand/collapse functionality of groups in the Revolist library managed by React state, turning it into a controlled component. In the document, I didn't find any relevant api that can achieve this. If I missed anything, please let me know. Thank you!

[revolist]

Hi! Row grouping does not currently have a dedicated React pair like expandedGroups / onExpandedGroupsChange, but you can drive the state through the existing grouping.prevExpanded option.

prevExpanded is keyed by the group path:

• one grouping level: North
• nested grouping: North,Engineering

Keep expandedAll: false if you want per-group control, because expandedAll: true opens every group regardless of prevExpanded.

Example with React state:

import { useEffect, useMemo, useRef, useState } from 'react';
import {
  RevoGrid,
  GROUP_EXPAND_EVENT,
  GROUP_EXPANDED,
  PSEUDO_GROUP_ITEM_VALUE,
  type GroupingOptions,
  type OnExpandEvent,
} from '@revolist/react-datagrid';

const groupProps = ['team'];

export function GridExample({ source, columns }) {
  const gridRef = useRef<HTMLRevoGridElement>(null);
  const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({
    North: true,
  });

  const grouping = useMemo<GroupingOptions>(() => ({
    props: groupProps,
    expandedAll: false,
    prevExpanded: expandedGroups,
  }), [expandedGroups]);

  useEffect(() => {
    const grid = gridRef.current;
    if (!grid) return;

    const onGroupExpand: EventListener = event => {
      const { model } = (event as CustomEvent<OnExpandEvent>).detail;
      const groupPath = String(model[PSEUDO_GROUP_ITEM_VALUE]);
      const nextExpanded = !model[GROUP_EXPANDED];

      setExpandedGroups(current => ({
        ...current,
        [groupPath]: nextExpanded,
      }));
    };

    grid.addEventListener(GROUP_EXPAND_EVENT, onGroupExpand);
    return () => grid.removeEventListener(GROUP_EXPAND_EVENT, onGroupExpand);
  }, []);

  return (
    <RevoGrid
      ref={gridRef}
      source={source}
      columns={columns}
      grouping={grouping}
    />
  );
}

So external controls can expand/collapse by updating expandedGroups and passing a new grouping object.

One caveat: the built-in group button still toggles the grid internally; the snippet above mirrors that event into React state and re-passes the grouping config. A strictly controlled mode where the default internal toggle can be prevented is not exposed as a separate public API at the moment.