Treegrid

Treegrids combine tree hierarchy with tabular columns, such as file explorers with size and date columns, or nested budgets.

Try it

Usage

Define columns and nested rows with id, cells, and optional children. Bind value to the selected row id.

import { RuiTreegrid, type RuiTreegridRow } from '@ecopages/radiant-ui/treegrid';
 
const rows: RuiTreegridRow[] = [
  {
    id: 'docs',
    cells: ['docs'],
    children: [{ id: 'intro', cells: ['introduction.md'] }],
  },
];
 
<RuiTreegrid columns={['Name']} rows={rows} value="intro" label="Repository" />Copy

Custom markup

<rui-treegrid> coordinates any light-DOM tree that matches its query contract. The RuiTreegrid helper stamps these targets; it is not required.

import '@ecopages/radiant-ui/treegrid';
 
<rui-treegrid value="intro" label="Repository">
  <div role="treegrid" aria-label="Repository">
    <div role="row">
      <div role="columnheader">Name</div>
    </div>
    <div role="row" data-row-id="docs" aria-expanded="true">
      <div role="gridcell">docs</div>
    </div>
    <div role="rowgroup">
      <div role="row" data-row-id="intro">
        <div role="gridcell">introduction.md</div>
      </div>
    </div>
  </div>
</rui-treegrid>;Copy

Tree vs treegrid

Use Treegrid when rows have multiple columns of data. Use Tree for single-column hierarchies.

Theming

Treegrid maps to semantic surface and status roles, never Tailwind palette steps:

Override at the theme layer, not in component CSS.

API

RuiTreegrid is a custom element (<rui-treegrid>) that owns expand/collapse and cell-only roving-tabindex navigation; the RuiTreegrid JSX view authors rows, groups, and header cells.

Attributes

Light-DOM contract

Header rows and [role="columnheader"] cells are presentation-only. Nested hosts: none.

Events

Props

RuiTreegridRow is { id, cells, children?, expanded? }.

View helpers

CSS classes

Public BEM classes (documented via @cssclass):

Theme roles

Accessibility

• Treegrid exposes role="treegrid" with grid navigation semantics.
• Column headers provide context for cell values.
• Expandable rows communicate aria-expanded on parent rows.