defineColumns

defineColumns преобразует декларативный массив SimpleColumnDef<T>[] в ColumnDefinition<T>[] для Table и всех preset-ов (SimpleTable, AdminTable, …).

Всегда задаёт id = key — это нужно для resize и savedState.

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

Обычные колонки с header, sortable, width, format.
Не хотите вручную собирать ColumnDefinition для каждого поля.

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

Сложная кастомная ячейка — передайте полный column через escape hatch или используйте getStatusColumnDef / getRowActionsColumnDef напрямую.

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

Декларативные колонки в SimpleTable

tsx

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

type Product = {
  id: string;
  name: string;
  sku: string;
  price: number;
  createdAt: string;
};

const PRODUCTS: Product[] = [
  { id: 'p-1', name: 'Облачный сервер', sku: 'VM-001', price: 4990, createdAt: '2024-03-12T09:15:00Z' },
  { id: 'p-2', name: 'Балансировщик', sku: 'LB-010', price: 2490, createdAt: '2024-01-18T16:30:00Z' },
  { id: 'p-3', name: 'Хранилище S3', sku: 'S3-100', price: 990, createdAt: '2023-11-02T14:40:00Z' },
];

const columns = [
  { key: 'name', header: 'Название', sortable: true, width: 220 },
  { key: 'sku', header: 'Артикул', width: 120 },
  { key: 'price', header: 'Цена', sortable: true, align: 'right', width: 140, format: 'currency' },
  { key: 'createdAt', header: 'Создан', sortable: true, width: 120, format: 'date' },
] as const;

export function DefineColumnsBasic() {
  return <SimpleTable data={PRODUCTS} columns={[...columns]} pageSize={5} getRowId={row => row.id} outline />;
}

Escape hatch: column

tsx

import { ColumnDefinition, defineColumns, Table } from '@cloud-ru/ds-table';

type Row = { id: string; name: string; note: string };

const ROWS: Row[] = [
  { id: '1', name: 'Alpha', note: 'Первая запись' },
  { id: '2', name: 'Beta', note: 'Вторая запись' },
];

const customNoteColumn: ColumnDefinition<Row> = {
  id: 'note',
  accessorKey: 'note',
  header: 'Примечание',
  size: 200,
  cell: ctx => <strong>{String(ctx.getValue())}</strong>,
};

const columnDefinitions = defineColumns<Row>([
  { key: 'name', header: 'Имя', sortable: true, width: 160 },
  { key: 'note', header: 'Примечание', column: customNoteColumn },
]);

export function DefineColumnsEscapeHatch() {
  return <Table data={ROWS} columnDefinitions={columnDefinitions} getRowId={row => row.id} outline />;
}

Со statusColumn

tsx

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

type Task = { id: string; title: string; status: string };

const TASKS: Task[] = [
  { id: 't-1', title: 'Развернуть кластер', status: 'done' },
  { id: 't-2', title: 'Настроить мониторинг', status: 'progress' },
  { id: 't-3', title: 'Проверить бэкапы', status: 'todo' },
];

const mapStatus = (value: string | number) => {
  switch (String(value)) {
    case 'done':
      return STATUS_APPEARANCE.Green;
    case 'progress':
      return STATUS_APPEARANCE.Yellow;
    default:
      return STATUS_APPEARANCE.Neutral;
  }
};

const columnDefinitions = [
  statusColumn<Task>({ key: 'status', mapStatusToAppearance: mapStatus, header: 'Статус' }),
  ...defineColumns<Task>([{ key: 'title', header: 'Задача', sortable: true, width: 280 }]),
];

export function DefineColumnsWithStatus() {
  return <Table data={TASKS} columnDefinitions={columnDefinitions} getRowId={row => row.id} outline />;
}

Смотри также

SimpleTable — preset, который принимает columns: SimpleColumnDef[].
statusColumn — обёртка над статус-колонкой (см. Table docs).