TreeTable

TreeTable — preset для иерархических данных: getChildren, tree-колонка через primaryColumn, без пагинации.

Когда использовать

Оргструктура, вложенные ресурсы, каталоги с подуровнями.
Нужен expand/collapse без ручной настройки expanding на Table.

Когда не нужен:

Плоский список — SimpleTable / AdminTable.
Закрепление строк (rowPinning) — только на полном Table.

Примеры использования

Базовое дерево

tsx

import { SimpleColumnDef, TreeTable } from '@cloud-ru/ds-table';

type OrgNode = {
  id: string;
  name: string;
  role: string;
  email: string;
  children?: OrgNode[];
};

const TREE: OrgNode[] = [
  {
    id: 'org-1',
    name: 'Облако',
    role: 'Отдел',
    email: 'cloud@example.com',
    children: [
      { id: 'team-1', name: 'Compute', role: 'Команда', email: 'compute@example.com' },
      { id: 'team-2', name: 'Storage', role: 'Команда', email: 'storage@example.com' },
    ],
  },
];

const columns: SimpleColumnDef<OrgNode>[] = [
  { key: 'role', header: 'Тип', width: 160 },
  { key: 'email', header: 'Email', width: 240 },
];

export function TreeTableBasic() {
  return (
    <TreeTable
      data={TREE}
      getChildren={row => row.children}
      primaryColumn={{ key: 'name', header: 'Подразделение' }}
      secondaryColumns={columns}
      getRowId={row => row.id}
      expandingInitialState={{ 'org-1': true }}
      outline
    />
  );
}

Через хук useTreeTableProps

tsx

import { SimpleColumnDef, Table, useTreeTableProps } from '@cloud-ru/ds-table';

type OrgNode = {
  id: string;
  name: string;
  role: string;
  children?: OrgNode[];
};

const TREE: OrgNode[] = [
  {
    id: 'org-1',
    name: 'Облако',
    role: 'Отдел',
    children: [{ id: 'team-1', name: 'Compute', role: 'Команда' }],
  },
];

const columns: SimpleColumnDef<OrgNode>[] = [{ key: 'role', header: 'Тип', width: 160 }];

export function TreeTableWithHook() {
  const tableProps = useTreeTableProps({
    data: TREE,
    getChildren: row => row.children,
    primaryColumn: { key: 'name', header: 'Подразделение' },
    secondaryColumns: columns,
    getRowId: row => row.id,
    expandingInitialState: { 'org-1': true },
  });

  return <Table {...tableProps} outline />;
}

С выбором строк

tsx

import { SimpleColumnDef, TreeTable } from '@cloud-ru/ds-table';

type OrgNode = {
  id: string;
  name: string;
  role: string;
  children?: OrgNode[];
};

const TREE: OrgNode[] = [
  {
    id: 'org-1',
    name: 'Облако',
    role: 'Отдел',
    children: [
      { id: 'team-1', name: 'Compute', role: 'Команда' },
      { id: 'team-2', name: 'Storage', role: 'Команда' },
    ],
  },
];

const columns: SimpleColumnDef<OrgNode>[] = [{ key: 'role', header: 'Тип', width: 160 }];

export function TreeTableWithSelection() {
  return (
    <TreeTable
      data={TREE}
      getChildren={row => row.children}
      primaryColumn={{ key: 'name', header: 'Подразделение', showToggle: true }}
      secondaryColumns={columns}
      getRowId={row => row.id}
      expandingInitialState={{ 'org-1': true }}
      selection={{ multiRow: true, initialState: { 'team-1': true } }}
      outline
    />
  );
}

Storybook

Открыть в Storybook →