Group Id – React Grid Docs

ReactGrid introduces a brand new feature called group Id. The main purpose of it is to avoid queueing changes
by marking cells on groupId property using Id interface.

Marked cell with a groupId has a following behavior. While you paste data or execute fill handle action: the change will be queued only for a cell with the same groupId. If the change can't be queued, then you will be warned in browser's console. Even if no cell is marked, then they are treated as a separate group.

Every cell with declared groupId renders with additional span element (containing its value) inside a cell if you have passed enableGroupIdRender property:

<ReactGrid
    {...props}
    enableFillHandle
    enableRangeSelection
    enableGroupIdRender // highlight-line
/>

groupId property is available in every cell template because it's provided by Cell interface.

Live example

An example shows that a few cells were marked with group: A or group: B group Id. Try and select any range and then copy and paste or use fill handle to clone data.

Code


const GroupIdSample: React.FC = () => {
    const [columns] = React.useState<Column[]>(() => [
        { columnId: "Name", width: 200 },
        { columnId: "Surname" },
        { columnId: "Birth Data", width: 100 },
    ]);

    const [rows, setRows] = React.useState<Row[]>(() => [
        {
            rowId: 0,
            cells: [
                { type: "header", text: 'Name' },
                { type: "header", text: "Surname" },
                { type: "header", text: "Birth Data" },
            ]
        },
        {
            rowId: 1,
            cells: [
                { type: "text", text: "Thomas Anthony", groupId: 'group: A' },
                { type: "text", text: "Goldman", groupId: 'group: B' },
                { type: "date", date: new Date("1989-04-01") },
            ]
        },
        {
            rowId: 2,
            cells: [
                { type: "text", text: "Susie Evelyn", groupId: 'group: A' },
                { type: "text", text: "Spencer", groupId: 'group: B' },
                { type: "date", date: new Date("1967-11-02") },
            ]
        },
        {
            rowId: 3,
            cells: [
                { type: "text", text: "Nancy" },
                { type: "text", text: "Gibbons", groupId: 'group: C' },
                { type: "date", date: new Date("1976-02-08") },
            ]
        },
        {
            rowId: 4,
            cells: [
                { type: "text", text: "Jose" },
                { type: "text", text: "Bell", groupId: 'group: C' },
                { type: "date", date: new Date("1966-10-12") },
            ]
        },
        {
            rowId: 5,
            cells: [
                { type: "text", text: "Jim", groupId: 'group: A' },
                { type: "text", text: "Hurst", groupId: 'group: C' },
                { type: "date", date: new Date("1976-08-30") },
            ]
        },
        {
            rowId: 6,
            cells: [
                { type: "text", text: "Laura" },
                { type: "text", text: "Pepper", groupId: 'group: C' },
                { type: "date", date: new Date("1956-05-01") },
            ]
        },
        {
            rowId: 7,
            cells: [
                { type: "text", text: "Sandra" },
                { type: "text", text: "Pollock", groupId: 'group: C' },
                { type: "date", date: new Date("1956-05-01") },
            ]
        },
        {
            rowId: 8,
            cells: [
                { type: "text", text: "" },
                { type: "text", text: "" },
                { type: "date", date: undefined },
            ]
        }
    ]);

    const handleContextMenu = (selectedRowIds: Id[], selectedColIds: Id[], selectionMode: SelectionMode, menuOptions: MenuOption[]): MenuOption[] => {
        return menuOptions;
    }

    const handleChanges = (changes: CellChange[]) => {
        setRows((prevRows) => {
            changes.forEach(change => {
                const changeRowIdx = prevRows.findIndex(el => el.rowId === change.rowId);
                const changeColumnIdx = columns.findIndex(el => el.columnId === change.columnId);
                prevRows[changeRowIdx].cells[changeColumnIdx] = change.newCell;
            });
            return [...prevRows];
        });
    };

    return (
        <ReactGrid
            rows={rows}
            columns={columns}
            onCellsChanged={handleChanges}
            onContextMenu={handleContextMenu}
            enableFillHandle
            enableRangeSelection
            enableGroupIdRender
        />
    );
}

render(<GroupIdSample />, document.getElementById("root"));

Preview

Full width header Handling data changes