The Missing Piece in Open-Source React Grids: Real Data Grouping

#react #javascript #opensource #typescript

react-tree-grid v0.5.0 ships a drag-panel grouping UI that most paid libraries still don't get right.

If you've spent time evaluating React data grid libraries, you've probably hit the same wall.

You need grouping. You search the docs. You find one of two things: either it's not supported at all, or there's a bare groupBy prop that dumps your data into flat,
non-interactive buckets — no drag UI, no reordering, no per-group sort control. Just rows with a label slapped on top.

That's not grouping. That's a workaround.

We built react-tree-grid to be a serious open-source alternative to DHTMLX TreeGrid — and grouping was the feature that had to be done properly.

Drag columns into the group panel, reorder chips, toggle sort direction per group level — all live.

What's in the v0.5.0 grouping feature

Drag any column header into the "Group by" panel above the grid to add a grouping level
Multi-level nesting — each chip adds one indented level, so you can group by species, then status, then region
Per-chip sort toggle — each group level has its own independent sort direction (↕ idle / ↑ asc / ↓ desc), separate from column-header sorting
Expand and collapse individual groups via a chevron; groups show a live row count (e.g. Dog (43))
One prop to enable all of it: groupable

  <Grid
    columns={columns}
    data={data}
    groupable
    group={{ order: ['animal_type', 'status'] }}
  />

You can also control grouping programmatically via groupBy() and clearGroups() on the grid API, and hook into onBeforeGroupChange / onGroupChange events.

Why it matters

Most grouping implementations treat it as a display concern — a post-render transformation that reorganizes rows. The result is brittle: sorting breaks grouping,
reordering isn't supported, and the UI gives users no affordance to understand what's happening.

We designed grouping as a first-class data operation. Sort state is preserved when you drag a column into the panel. Group order is fully draggable. Each level is
independently collapsible. The panel is an honest representation of the data structure, not a cosmetic layer over it.