AdminTable

AdminTable — preset над Table для типичных админ-экранов: поиск, колонка статуса, настройки колонок, опционально фильтры, выбор строк и действия.

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

Списки сущностей с поиском и статусом на клиенте.
Нужен упрощённый API вместо сборки columnDefinitions + toolbar-пропсов вручную.

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

Данные с бэкенда постранично — ServerAdminTable.
Простой справочник без поиска — SimpleTable.

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

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

tsx

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

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

const USERS: User[] = [
  {
    id: 'u-1',
    name: 'Анна Иванова',
    email: 'anna.ivanova@example.com',
    role: 'Owner',
    status: 'active',
    amount: 12990,
  },
  {
    id: 'u-2',
    name: 'Борис Петров',
    email: 'boris.petrov@example.com',
    role: 'Admin',
    status: 'pending',
    amount: 8450,
  },
  {
    id: 'u-3',
    name: 'Вера Сидорова',
    email: 'vera.sidorova@example.com',
    role: 'Editor',
    status: 'blocked',
    amount: 4300,
  },
  {
    id: 'u-4',
    name: 'Глеб Кузнецов',
    email: 'gleb.kuznetsov@example.com',
    role: 'Viewer',
    status: 'invited',
    amount: 0,
  },
  { id: 'u-5', name: 'Дарья Орлова', email: 'darya.orlova@example.com', role: 'Editor', status: 'active', amount: 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: 'amount', header: 'Сумма', sortable: true, align: 'right', width: 140, format: 'currency' },
];

const statusLabels: Record<string, string> = {
  active: 'Активен',
  pending: 'Ожидание',
  blocked: 'Заблокирован',
  invited: 'Приглашён',
};

export function AdminTableBasic() {
  return (
    <AdminTable
      data={USERS}
      columns={columns}
      statusColumn={{
        key: 'status',
        mapStatusToAppearance: value => {
          switch (value) {
            case 'active':
              return STATUS_APPEARANCE.Green;
            case 'pending':
              return STATUS_APPEARANCE.Yellow;
            case 'blocked':
              return STATUS_APPEARANCE.Red;
            case 'invited':
              return STATUS_APPEARANCE.Blue;
            default:
              return STATUS_APPEARANCE.Neutral;
          }
        },
        renderDescription: status => statusLabels[status] ?? status,
      }}
      pageSize={5}
      getRowId={user => user.id}
      search
      outline
    />
  );
}

Через хук useAdminTableProps

tsx

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

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

const USERS: User[] = [
  {
    id: 'u-1',
    name: 'Анна Иванова',
    email: 'anna.ivanova@example.com',
    role: 'Owner',
    status: 'active',
    amount: 12990,
  },
  {
    id: 'u-2',
    name: 'Борис Петров',
    email: 'boris.petrov@example.com',
    role: 'Admin',
    status: 'pending',
    amount: 8450,
  },
  {
    id: 'u-3',
    name: 'Вера Сидорова',
    email: 'vera.sidorova@example.com',
    role: 'Editor',
    status: 'blocked',
    amount: 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 AdminTableWithHook() {
  const tableProps = useAdminTableProps({
    data: USERS,
    columns,
    statusColumn: {
      key: 'status',
      mapStatusToAppearance: value => (value === 'active' ? STATUS_APPEARANCE.Green : STATUS_APPEARANCE.Yellow),
      renderDescription: status => (status === 'active' ? 'Активен' : 'Ожидание'),
    },
    pageSize: 5,
    getRowId: user => user.id,
    search: true,
  });

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

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

tsx

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

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

const USERS: User[] = [
  { id: 'u-1', name: 'Анна Иванова', email: 'anna.ivanova@example.com', role: 'Owner', amount: 12990 },
  { id: 'u-2', name: 'Борис Петров', email: 'boris.petrov@example.com', role: 'Admin', amount: 8450 },
  { id: 'u-3', name: 'Вера Сидорова', email: 'vera.sidorova@example.com', role: 'Editor', amount: 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 AdminTableCardView() {
  const [view, setView] = useState<typeof VIEW.Table | typeof VIEW.Cards>(VIEW.Cards);

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

Storybook

Открыть в Storybook →