SimpleTable

SimpleTable — preset-обёртка над Table для простых списков: декларативные колонки через defineColumns, пагинация и outline включены по умолчанию.

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

Справочники, настройки, демо-экраны — данные целиком на клиенте, без поиска и фильтров.
Нужен минимальный API вместо полного Table.
Компактная таблица в модалке или боковой панели — fullWidth={false} при фиксированных колонках.

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

Поиск, фильтры, выбор строк — используйте AdminTable.
Данные с бэкенда постранично — ServerSimpleTable или ServerTable.

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

Базовое использование

tsx

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

type User = {
  id: string;
  name: string;
  email: string;
  role: string;
  balance: number;
};

const USERS: User[] = [
  { id: 'u-1', name: 'Анна Иванова', email: 'anna.ivanova@example.com', role: 'Owner', balance: 12990 },
  { id: 'u-2', name: 'Борис Петров', email: 'boris.petrov@example.com', role: 'Admin', balance: 8450 },
  { id: 'u-3', name: 'Вера Сидорова', email: 'vera.sidorova@example.com', role: 'Editor', balance: 4300 },
  { id: 'u-4', name: 'Глеб Кузнецов', email: 'gleb.kuznetsov@example.com', role: 'Viewer', balance: 0 },
  { id: 'u-5', name: 'Дарья Орлова', email: 'darya.orlova@example.com', role: 'Editor', balance: 990 },
];

const columns: SimpleColumnDef<User>[] = [
  { key: 'name', header: 'Имя', sortable: true, width: 200 },
  { key: 'email', header: 'Email', width: 240 },
  { key: 'role', header: 'Роль', sortable: true, width: 140 },
  { key: 'balance', header: 'Баланс', sortable: true, align: 'right', width: 140, format: 'currency' },
];

export function SimpleTableBasic() {
  return <SimpleTable data={USERS} columns={columns} pageSize={5} getRowId={user => user.id} outline />;
}

Через хук useSimpleTableProps

tsx

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

type User = {
  id: string;
  name: string;
  email: string;
  role: string;
  balance: number;
};

const USERS: User[] = [
  { id: 'u-1', name: 'Анна Иванова', email: 'anna.ivanova@example.com', role: 'Owner', balance: 12990 },
  { id: 'u-2', name: 'Борис Петров', email: 'boris.petrov@example.com', role: 'Admin', balance: 8450 },
  { id: 'u-3', name: 'Вера Сидорова', email: 'vera.sidorova@example.com', role: 'Editor', balance: 4300 },
];

const columns: SimpleColumnDef<User>[] = [
  { key: 'name', header: 'Имя', sortable: true, width: 200 },
  { key: 'email', header: 'Email', width: 240 },
  { key: 'role', header: 'Роль', sortable: true, width: 140 },
];

export function SimpleTableWithHook() {
  const tableProps = useSimpleTableProps({
    data: USERS,
    columns,
    pageSize: 5,
    getRowId: user => user.id,
    outline: true,
  });

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

Карточный режим

tsx

import { SimpleColumnDef, SimpleTable, VIEW } from '@cloud-ru/ds-table';
import { useState } from 'react';

type User = {
  id: string;
  name: string;
  email: string;
  role: string;
};

const USERS: User[] = [
  { id: 'u-1', name: 'Анна Иванова', email: 'anna.ivanova@example.com', role: 'Owner' },
  { id: 'u-2', name: 'Борис Петров', email: 'boris.petrov@example.com', role: 'Admin' },
  { id: 'u-3', name: 'Вера Сидорова', email: 'vera.sidorova@example.com', role: 'Editor' },
];

const columns: SimpleColumnDef<User>[] = [
  { key: 'name', header: 'Имя', sortable: true, width: 200 },
  { key: 'email', header: 'Email', width: 240 },
  { key: 'role', header: 'Роль', width: 140 },
];

export function SimpleTableCardView() {
  const [view, setView] = useState<typeof VIEW.Table | typeof VIEW.Cards>(VIEW.Cards);

  return (
    <SimpleTable
      data={USERS}
      columns={columns}
      pageSize={5}
      getRowId={user => user.id}
      headlineKey='name'
      view={view}
      onViewChange={setView}
      outline
    />
  );
}

Storybook

Открыть в Storybook →