Для перечня однотипных элементов без колонок подойдёт CdsList, для иерархии без табличных данных — CdsTree.

Возможности таблицы разложены по разделам — они собраны в блоке Разделы документации и в меню слева. На этой странице — базовое использование и API.

Анатомия

Вокруг таблицы — слоты header, toolbar и footer и встроенная пагинация (проп pagination). Сама таблица состоит из шапки колонок и строк с ячейками.

Storybook

Вариации

Отображение данных

Минимальная таблица: массив описаний колонок в columns, записи — в data. Ключ строки берётся из поля key записи либо из пропа row-key.

Sandbox Storybook

<script setup lang="ts">
import type { NTable } from '@central-design-system/components';
import { CdsTable } from '@central-design-system/components';

type TSimpleRow = {
  key: string;
  name: string;
  age: string;
  address: string;
  phone: string;
};

const simpleColumns: NTable.NColumn.TColumns<TSimpleRow> = [
  { title: 'Заголовок', dataIndex: 'name' },
  { title: 'Заголовок', dataIndex: 'age' },
  { title: 'Заголовок', dataIndex: 'address' },
  { title: 'Заголовок', dataIndex: 'phone' }
];

const makeSimpleData = (count: number): TSimpleRow[] =>
  [...Array(count)].map((_, i) => ({
    key: i.toString(),
    name: 'Текст ячейки',
    age: 'Текст ячейки',
    address: 'Текст ячейки',
    phone: 'Текст ячейки'
  }));

const columns = simpleColumns;
const data = makeSimpleData(5);
</script>

<template>
  <CdsTable :columns="columns" :data="data" />
</template>

Свойство колонки align выравнивает содержимое — числовые значения принято выравнивать вправо.

Sandbox Storybook

<script setup lang="ts">
import type { NTable } from '@central-design-system/components';
import { CdsTable } from '@central-design-system/components';

type TDataType = { key: string; name: string; price: string; address: string; tags: string };

const columns: NTable.NColumn.TColumns<TDataType> = [
  { title: 'Наименование', dataIndex: 'name', key: 'name' },
  { title: 'Цена', dataIndex: 'price', key: 'price', align: 'right' },
  { title: 'Адрес', dataIndex: 'address', key: 'address' },
  { title: 'Наличие', key: 'tags', dataIndex: 'tags' }
];
const data: TDataType[] = [
  { key: '1', name: 'iPhone 17 Pro Max', price: '$1500', address: 'г. Москва', tags: 'В наличии' },
  { key: '2', name: 'MacBook Air M5', price: '$2000', address: 'г. Москва', tags: 'В наличии' },
  { key: '3', name: 'Apple Vision Pro', price: '$3500', address: 'г. Нью-Йорк', tags: 'Нет в наличии' }
];
</script>

<template>
  <CdsTable :columns="columns" :data="data" :pagination="false" />
</template>

Размеры

Свойство size управляет плотностью: md — по умолчанию, sm и xs — для насыщенных данными экранов.

Sandbox Storybook

<script setup lang="ts">
import type { NTable } from '@central-design-system/components';
import { CdsTable } from '@central-design-system/components';

const columns: NTable.NColumn.TColumns = [...Array(4)].map((_, i) => ({
  title: 'Заголовок',
  dataIndex: `header${i + 1}`,
  key: (i + 1).toString()
}));
const data = [...Array(4)].map((_, i) => ({
  key: (i + 1).toString(),
  header1: 'Текст ячейки',
  header2: 'Текст ячейки',
  header3: 'Текст ячейки',
  header4: 'Текст ячейки'
}));
</script>

<template>
  <div class="flex flex-col gap-5">
    <CdsTable :columns="columns" :data="data" size="md" :pagination="false">
      <template #header>
        <h4>Medium size</h4>
      </template>
    </CdsTable>

    <CdsTable :columns="columns" :data="data" size="sm" :pagination="false">
      <template #header>
        <h4>Small size</h4>
      </template>
    </CdsTable>

    <CdsTable :columns="columns" :data="data" size="xs" :pagination="false">
      <template #header>
        <h4>Extra small size</h4>
      </template>
    </CdsTable>
  </div>
</template>

Строки

Свойство row-class-name вычисляет класс строки по записи: готовый класс cds-table--striped даёт чередование фона, cds-table__row--warning и cds-table__row--error — статусную подсветку. Проп hovered подсвечивает строку под курсором.

Sandbox Storybook

<script setup lang="ts">
import type { NTable } from '@central-design-system/components';
import { CdsTable } from '@central-design-system/components';

type TSimpleRow = {
  key: string;
  name: string;
  age: string;
  address: string;
  phone: string;
};

const simpleColumns: NTable.NColumn.TColumns<TSimpleRow> = [
  { title: 'Заголовок', dataIndex: 'name' },
  { title: 'Заголовок', dataIndex: 'age' },
  { title: 'Заголовок', dataIndex: 'address' },
  { title: 'Заголовок', dataIndex: 'phone' }
];

const makeSimpleData = (count: number): TSimpleRow[] =>
  [...Array(count)].map((_, i) => ({
    key: i.toString(),
    name: 'Текст ячейки',
    age: 'Текст ячейки',
    address: 'Текст ячейки',
    phone: 'Текст ячейки'
  }));

const columns = simpleColumns;
const data = makeSimpleData(4);
</script>

<template>
  <CdsTable
    :columns="columns"
    :data="data"
    :row-class-name="(_record: unknown, index: number) => (index % 2 === 1 ? 'cds-table--striped' : '')"
    :pagination="false"
    hovered
  />
</template>

Sandbox Storybook

<script setup lang="ts">
import type { NTable } from '@central-design-system/components';
import { CdsTable } from '@central-design-system/components';

type TSimpleRow = {
  key: string;
  name: string;
  age: string;
  address: string;
  phone: string;
};

const simpleColumns: NTable.NColumn.TColumns<TSimpleRow> = [
  { title: 'Заголовок', dataIndex: 'name' },
  { title: 'Заголовок', dataIndex: 'age' },
  { title: 'Заголовок', dataIndex: 'address' },
  { title: 'Заголовок', dataIndex: 'phone' }
];

const makeSimpleData = (count: number): TSimpleRow[] =>
  [...Array(count)].map((_, i) => ({
    key: i.toString(),
    name: 'Текст ячейки',
    age: 'Текст ячейки',
    address: 'Текст ячейки',
    phone: 'Текст ячейки'
  }));

const columns = simpleColumns;
const data = makeSimpleData(4);
</script>

<template>
  <CdsTable
    :columns="columns"
    :data="data"
    :row-class-name="(_record, index) => (index % 2 === 1 ? 'cds-table__row--warning' : 'cds-table__row--error')"
    :pagination="false"
    hovered
  />
</template>

Содержимое ячеек

Свойство колонки ellipsis обрезает длинный текст в одну строку с многоточием — и в ячейках, и в заголовках.

Sandbox Storybook

<script setup lang="ts">
import type { NTable } from '@central-design-system/components';
import { CdsTable } from '@central-design-system/components';

type TDataType = { key: string; name: string; address: string };

const columns: NTable.NColumn.TColumns<TDataType> = [
  { title: 'Заголовок таблицы', dataIndex: 'name', key: 'name' },
  { title: 'Заголовок таблицы', dataIndex: 'address', key: 'address 1', ellipsis: true },
  { title: 'Заголовок таблицы Заголовок таблицы', dataIndex: 'address', key: 'address 2', ellipsis: true },
  { title: 'Заголовок таблицы Заголовок таблицы', dataIndex: 'address', key: 'address 3', ellipsis: true },
  { title: 'Заголовок таблицы Заголовок таблицы', dataIndex: 'address', key: 'address 4', ellipsis: true }
];
const data: TDataType[] = [...Array(3)].map((_, i) => ({
  key: (i + 1).toString(),
  name: 'Текст ячейки',
  address: 'Текст ячейки Текст ячейки Текст ячейки Текст ячейки'
}));
</script>

<template>
  <CdsTable :columns="columns" :data="data" :pagination="false" />
</template>

Адаптивность

Свойство колонки responsive перечисляет брейкпоинты, на которых колонка видима — второстепенные колонки скрываются на узких экранах.

Sandbox Storybook

<script setup lang="ts">
import type { NTable } from '@central-design-system/components';
import { CdsTable } from '@central-design-system/components';

const columns: NTable.NColumn.TColumns = [
  { title: 'Заголовок (all screens)', dataIndex: 'name', key: 'name' },
  { title: 'Заголовок (small screen or bigger)', dataIndex: 'age', key: 'age', responsive: ['smUp'] },
  { title: 'Заголовок (medium screen or bigger)', dataIndex: 'address', key: 'address', responsive: ['mdUp'] },
  {
    title: 'Заголовок (only md, sm, xs screen)',
    dataIndex: 'phone',
    key: 'phone',
    responsive: ['md', 'sm', 'xs']
  }
];
const data = [{ key: '1', name: 'Текст ячейки', age: 'Текст ячейки', address: 'Текст ячейки', phone: 'Текст ячейки' }];
</script>

<template>
  <CdsTable :columns="columns" :data="data" :pagination="false" />
</template>

Рекомендации

Storybook

Разделы документации

• Структура и заголовки — группировка шапки, объединение ячеек, слоты вокруг таблицы, ширина колонок и декларативное описание колонок.
• Фиксация и прокрутка — закрепление шапки и колонок при прокрутке, кнопки горизонтального скролла.
• Фильтры и сортировка — фильтры колонок, множественная сортировка, сброс и своя панель фильтра.
• Выбор строк — чекбоксы, операции над выбранным набором, свои пункты меню выбора.
• Раскрытие и деревья — раскрываемые строки, вложенные таблицы и древовидные данные.
• Редактирование — редактируемые ячейки, строки и вся таблица.
• Перетаскивание — drag-n-drop строк и колонок.
• Сценарии — серверные данные и готовые рецепты продуктовых таблиц.

API

CdsTable

Пропсы

Имя	Тип	По умолчанию	Описание
bordered	boolean | undefined	false	Показывать все границы таблицы
borderless	boolean | undefined	false	Убрать все границы таблицы
canExpandable	boolean | undefined	false	Может раскрываться
childrenColumnName	string | undefined	'children'	Названия свойства для дочерних элементов
columnDraggable	NTable.NDraggable.TColumnDraggable<any> | undefined	—	Перетаскивание колонок (drag-n-drop). true или объект конфигурации { icon, disabled, allowDrop }. Reorder происходит только среди соседей внутри своей группы; порядок меняет потребитель в обработчике @column-reorder.
columns	NTable.NColumn.TColumns<any> | undefined	—	Колонки таблицы
components	NTable.NCustomize.TableComponents<any> | undefined	—	Переопределить компоненты таблицы по умолчанию
customHeaderRow	NTable.NCustomize.TGetComponentProps<NTable.NColumn.IColumn<any>[]> | undefined	—	Устанавливает свойства для каждой строки заголовка
customRow	NTable.NCustomize.TGetComponentProps<any> | undefined	—	Устанавливает свойства для каждой строки
data	any[] | undefined	—	Массив данных для отображения в таблице
defaultExpandAllRows	boolean | undefined	false	По умолчанию все колонки раскрыты
defaultExpandedRowKeys	NTable.TKey[] | undefined	undefined as ITableProps['defaultExpandedRowKeys']	Ключи раскрытых строк по умолчанию
disabled	boolean | null | undefined	null	Заблокированное состояние
expandColumnWidth	number | undefined	—	Ширина колонки с раскрытием
expandedRowClassName	NTable.NRow.TClassName<any> | undefined	—	Классы для строк в раскрытом состоянии
expandedRowKeys	NTable.TKey[] | undefined	undefined as ITableProps['expandedRowKeys']	Ключи текущих раскрытых строк (поддерживает v-model)
expandedRowRender	NTable.NExpand.TExpandedRowRender<any> | undefined	—	Рендер для каждой раскрытой строки
expandFixed	NTable.TFixed | undefined	—	Сделать колонку с раскрытием фиксированной (left | right | boolean)
expandIcon	NTable.NExpand.TRenderExpandIcon<any> | undefined	—	Своя иконка раскрытия
expandIconColumnIndex	number | undefined	—	Индекс колонки, в которой будет располагаться иконка раскрытия
expandRowByClick	boolean | undefined	false	Раскрытие строки по клику в любое место этой строки
footer	NTable.NRender.TPanelRender<any> | undefined	—	Рендер футера таблицы
getPopupContainer	NTable.NCustomize.TGetPopupContainer | undefined	—	Контейнер рендеринга выпадающих списков
header	NTable.NRender.TPanelRender<any> | undefined	—	Рендер заголовка таблицы
hovered	boolean | undefined	false	Подсвечивание строки при наведении
id	string | undefined	—	Идентификатор таблицы
indentSize	number | undefined	20	Размер отступа в пикселях для каждого уровня вложенности
loading	boolean | undefined	false	Загрузка таблицы
locale	NTable.ILocale | undefined	—	Локализация таблицы (переопределяет строки глобальной локали)
pagination	false | NTable.NPagination.IProps | undefined	—	Конфигурация пагинации таблицы
readonly	boolean | null | undefined	null	Только для чтения
rowClassName	string | NTable.NRow.TClassName<any> | undefined	—	Классы строки
rowDraggable	NTable.NDraggable.TRowDraggable<any> | undefined	—	Перетаскивание строк (drag-n-drop). true или объект конфигурации { icon, disabled, allowDrop }. Reorder происходит только между соседями одного родителя; порядок меняет потребитель в обработчике @row-reorder.
rowExpandable	((record: any) => boolean) | undefined	—	Строку можно раскрыть
rowKey	string | NTable.NRow.TGetRowKey<any> | undefined	'key'	Уникальный ключ строки может быть строкой или функцией возвращающей строку
rowSelection	NTable.NRow.IRowSelection<any> | undefined	—	Конфигурация для выбора строк
scroll	(NTable.TScroll & { scrollToFirstRowOnChange?: boolean | undefined; }) | undefined	—	Можно ли скроллить таблицу
showExpandColumn	boolean | undefined	—	Показать раскрытую колонку
showHeader	boolean | undefined	—	Показывать ли заголовок таблицы
showSorterTooltip	NTable.NSorter.TTooltip | undefined	true	Показывать ли тултипы для сортировки в заголовке. Можно передать объект со свойствами для CdsTooltip.
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Размер компонента
sortDirection	string[] | undefined	—	Сортировка данных в таблице. 'ascend' | 'descend'
sticky	boolean | NTable.NSticky.ISticky | undefined	—	Sticky для заголовка и скроллбара
tableLayout	NTable.TLayout | undefined	—	Фиксированный или авто лэйаут
theme	string | undefined	—	Тема компонента
toolbar	NTable.NRender.TPanelRender<any> | undefined	—	Рендер тулбара таблицы
transformCellText	NTable.NCell.TTransformCellText<any> | undefined	—	Трансформировать текст в ячейке

События

Имя	Тип	Описание
change	[pagination: NTable.NPagination.IProps, filters: Record<string, NTable.TFilterValue | null>, sorter: NTable.ISorterResult<any> | NTable.ISorterResult<any>[], extra: NTable.ICurrentData<any>]	Событие изменения пагинации, фильтров или сортировки.
columnReorder	[info: NTable.NDraggable.IColumnReorderInfo<any>]	Событие переноса колонки (drag-n-drop). Порядок колонок меняет потребитель.
expand	[expanded: boolean, record: any]	Событие при раскрытии/сворачивании строки.
expandedRowsChange	[expandedKeys: NTable.TKey[]]	Событие изменения раскрытых строк.
resizeColumn	[width: number, column: NTable.NColumn.IColumn<any>]	Событие изменения размера колонки.
rowReorder	[info: NTable.NDraggable.IRowReorderInfo<any>]	Событие переноса строки (drag-n-drop). Порядок данных меняет потребитель.
update:expandedRowKeys	[expandedKeys: NTable.TKey[]]	Событие обновления раскрытых строк (v-model).

Слоты

Имя	Тип	Описание
bodyCell	{ text: any; value: any; record: any; index: number; column: NTable.NColumn.IColumn<any>; }	Кастомный рендер ячейки тела таблицы.
customFilterDropdown	NTable.NColumn.IFilterDropdownProps<any>	Кастомное выпадающее меню фильтра колонки (используется с customFilterDropdown у колонки).
customFilterIcon	{ filtered: boolean; column: NTable.NColumn.IColumn<any>; }	Кастомная иконка фильтра колонки.
default	any	Декларативное описание колонок через CdsTableColumn / CdsTableColumnGroup.
emptyText	any	Контент при отсутствии данных.
expandedRowRender	{ record: any; index: number; indent: number; expanded: boolean; }	Рендер содержимого раскрытой строки.
expandIcon	NTable.NExpand.IRenderExpandIconProps<any>	Кастомная иконка раскрытия строки.
footer	readonly any[]	Футер таблицы (панель под таблицей).
header	readonly any[]	Заголовок таблицы (панель над таблицей).
headerCell	{ title: NTable.NColumn.TTitle<any>; column: NTable.NColumn.IColumn<any>; }	Кастомный рендер ячейки заголовка таблицы.
summary	{ pageData: readonly any[]; }	Итоговая строка таблицы.
toolbar	readonly any[]	Тулбар таблицы (панель над таблицей).

Exposed

Имя	Тип	Описание
table	any	Ссылка на внутренний экземпляр таблицы — даёт доступ к её методам и состоянию.

CdsTableColumn

Слоты

Имя	Тип	Описание
default	{ value: any; text: any; record: any; index?: number | undefined; renderIndex?: number | undefined; column: NTable.NColumn.IColumn<any>; }	Кастомный рендер ячейки колонки.
filterIcon	{ filtered: boolean; column: NTable.NColumn.IColumn<any>; }	Кастомная иконка фильтра колонки.
title	NTable.NColumn.ITitleProps<any>	Заголовок колонки.

CdsTableColumnGroup

Слоты

Имя	Тип	Описание
default	any	Колонки группы (CdsTableColumn).
title	NTable.NColumn.ITitleProps<any>	Заголовок группы колонок.