TreeList

TreeList is a multi-column data grid for hierarchical rows: each row can have children, and the first column gets a chevron to expand or collapse branches in place while the other columns stay aligned. Use it for file trees, BOMs, nested categories, or org data you want to scan as a table. Define columns (with optional per-cell render), pass nested rows, and seed initial state with defaultExpandAll or defaultExpandedIds. Row clicks fire onRowClick, and selectedId highlights the active row.

Example

Preview

Name	Owner	Size
src	platform	—
components	design	1.2 MB
lib	platform	420 KB
package.json	platform	4 KB

import { TreeList } from '@officina/ui';

function FileTree() {
  return (
    <TreeList
      defaultExpandAll
      columns={[
        { key: 'name', header: 'Name' },
        { key: 'size', header: 'Size', align: 'right' },
      ]}
      rows={[
        {
          id: 'src',
          name: 'src',
          size: '—',
          children: [{ id: 'app', name: 'app.tsx', size: '4 KB' }],
        },
      ]}
    />
  );
}

API

Prop	Type	Default	Description
columns*	TreeListColumn<R>[]	—	Column definitions describing how to render each cell.
rows*	R[]	—	Hierarchical row data; each row may carry nested children.
defaultExpandAll	boolean	false	Expand every branch initially.
defaultExpandedIds	string[]	—	Ids of branches expanded on first render.
emptyMessage	string	No data	Text shown when there are no rows.
onRowClick	(row: R) => void	—	Called when a row is clicked.
selectedId	string	—	Highlighted row id.

Example

API

On this page