For a plain list of similar items without columns, use CdsList; for a hierarchy without tabular data, use CdsTree.

The table's features are split across sections — they are collected in Documentation sections and in the menu on the left. This page covers the basics and the API.

Anatomy

Around the table there are the header, toolbar and footer slots and built-in pagination (the pagination prop). The table itself consists of a column header and rows with cells.

Storybook

Variations

Showing data

A minimal table: an array of column descriptions in columns, the records in data. The row key comes from the record's key field or from the row-key prop.

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>

The column's align property aligns the content — numeric values are conventionally aligned to the right.

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>

Sizes

The size prop controls the density: md is the default, sm and xs are for data-dense screens.

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>

Rows

The row-class-name property computes a row class from the record: the built-in cds-table--striped class alternates the background, cds-table__row--warning and cds-table__row--error add a status highlight. The hovered prop highlights the row under the cursor.

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>

Cell content

The column's ellipsis property truncates long text to a single line with an ellipsis — in cells and in headers alike.

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>

Responsiveness

The column's responsive property lists the breakpoints at which the column is visible — secondary columns get hidden on narrow screens.

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>

Guidelines

Storybook

Documentation sections

• Structure and headers — header grouping, merged cells, the slots around the table, column widths and declarative column descriptions.
• Pinning and scrolling — pinning the header and columns while scrolling, horizontal scroll buttons.
• Filters and sorting — column filters, multiple sorting, resetting and a custom filter panel.
• Row selection — checkboxes, operations on the selected set, custom selection menu items.
• Expansion and trees — expandable rows, nested tables and tree data.
• Editing — editable cells, rows and the whole table.
• Drag and drop — dragging rows and columns.
• Scenarios — server-side data and ready-made recipes for product tables.

API

CdsTable

Props

Name	Type	Default	Description
bordered	boolean | undefined	false	Show every table border
borderless	boolean | undefined	false	Remove every table border
canExpandable	boolean | undefined	false	Rows can be expanded
childrenColumnName	string | undefined	'children'	Name of the property holding the child records
columnDraggable	NTable.NDraggable.TColumnDraggable<any> | undefined	—	Column drag and drop. true or a configuration object { icon, disabled, allowDrop }. Reordering only happens among siblings inside the same group; the consumer changes the order in the @column-reorder handler.
columns	NTable.NColumn.TColumns<any> | undefined	—	Table columns
components	NTable.NCustomize.TableComponents<any> | undefined	—	Override the default table components
customHeaderRow	NTable.NCustomize.TGetComponentProps<NTable.NColumn.IColumn<any>[]> | undefined	—	Sets the properties for every header row
customRow	NTable.NCustomize.TGetComponentProps<any> | undefined	—	Sets the properties for every row
data	any[] | undefined	—	Array of records to show in the table
defaultExpandAllRows	boolean | undefined	false	All rows are expanded by default
defaultExpandedRowKeys	NTable.TKey[] | undefined	undefined as ITableProps['defaultExpandedRowKeys']	Keys of the rows expanded by default
disabled	boolean | null | undefined	null	Disabled state
expandColumnWidth	number | undefined	—	Width of the expand column
expandedRowClassName	NTable.NRow.TClassName<any> | undefined	—	Classes for rows in the expanded state
expandedRowKeys	NTable.TKey[] | undefined	undefined as ITableProps['expandedRowKeys']	Keys of the currently expanded rows (supports v-model)
expandedRowRender	NTable.NExpand.TExpandedRowRender<any> | undefined	—	Render function for every expanded row
expandFixed	NTable.TFixed | undefined	—	Pin the expand column (left | right | boolean)
expandIcon	NTable.NExpand.TRenderExpandIcon<any> | undefined	—	Custom expand icon
expandIconColumnIndex	number | undefined	—	Index of the column that holds the expand icon
expandRowByClick	boolean | undefined	false	Expand the row by clicking anywhere in it
footer	NTable.NRender.TPanelRender<any> | undefined	—	Render function for the table footer
getPopupContainer	NTable.NCustomize.TGetPopupContainer | undefined	—	Container that dropdowns are rendered into
header	NTable.NRender.TPanelRender<any> | undefined	—	Render function for the table title
hovered	boolean | undefined	false	Highlight the row on hover
id	string | undefined	—	Table identifier
indentSize	number | undefined	20	Indent size in pixels for each nesting level
loading	boolean | undefined	false	Table loading state
locale	NTable.ILocale | undefined	—	Table localization (overrides the strings of the global locale)
pagination	false | NTable.NPagination.IProps | undefined	—	Table pagination configuration
readonly	boolean | null | undefined	null	Read-only state
rowClassName	string | NTable.NRow.TClassName<any> | undefined	—	Row classes
rowDraggable	NTable.NDraggable.TRowDraggable<any> | undefined	—	Row drag and drop. true or a configuration object { icon, disabled, allowDrop }. Reordering only happens between siblings of the same parent; the consumer changes the order in the @row-reorder handler.
rowExpandable	((record: any) => boolean) | undefined	—	Whether the row can be expanded
rowKey	string | NTable.NRow.TGetRowKey<any> | undefined	'key'	Unique row key — a string or a function returning a string
rowSelection	NTable.NRow.IRowSelection<any> | undefined	—	Row selection configuration
scroll	(NTable.TScroll & { scrollToFirstRowOnChange?: boolean | undefined; }) | undefined	—	Whether the table can be scrolled
showExpandColumn	boolean | undefined	—	Show the expand column
showHeader	boolean | undefined	—	Whether to show the table header
showSorterTooltip	NTable.NSorter.TTooltip | undefined	true	Whether to show sorting tooltips in the header. You can pass an object with CdsTooltip properties.
size	number | "xs" | "sm" | "md" | "lg" | "xl" | undefined	'md'	Size of the component
sortDirection	string[] | undefined	—	Sorting of the table data. 'ascend' | 'descend'
sticky	boolean | NTable.NSticky.ISticky | undefined	—	Sticky behavior for the header and the scrollbar
tableLayout	NTable.TLayout | undefined	—	Fixed or auto layout
theme	string | undefined	—	Component theme
toolbar	NTable.NRender.TPanelRender<any> | undefined	—	Render function for the table toolbar
transformCellText	NTable.NCell.TTransformCellText<any> | undefined	—	Transform the text inside a cell

Events

Name	Type	Description
change	[pagination: NTable.NPagination.IProps, filters: Record<string, NTable.TFilterValue | null>, sorter: NTable.ISorterResult<any> | NTable.ISorterResult<any>[], extra: NTable.ICurrentData<any>]	Fired when the pagination, the filters or the sorting change.
columnReorder	[info: NTable.NDraggable.IColumnReorderInfo<any>]	Fired when a column is dragged. The consumer changes the order of the columns.
expand	[expanded: boolean, record: any]	Fired when a row is expanded or collapsed.
expandedRowsChange	[expandedKeys: NTable.TKey[]]	Fired when the set of expanded rows changes.
resizeColumn	[width: number, column: NTable.NColumn.IColumn<any>]	Fired when a column is resized.
rowReorder	[info: NTable.NDraggable.IRowReorderInfo<any>]	Fired when a row is dragged. The consumer changes the order of the data.
update:expandedRowKeys	[expandedKeys: NTable.TKey[]]	Fired when the expanded rows are updated (v-model).

Slots

Name	Type	Description
bodyCell	{ text: any; value: any; record: any; index: number; column: NTable.NColumn.IColumn<any>; }	Custom render of a table body cell.
customFilterDropdown	NTable.NColumn.IFilterDropdownProps<any>	Custom filter dropdown of a column (used together with the column customFilterDropdown).
customFilterIcon	{ filtered: boolean; column: NTable.NColumn.IColumn<any>; }	Custom column filter icon.
default	any	Declarative column description with CdsTableColumn / CdsTableColumnGroup.
emptyText	any	Content shown when there is no data.
expandedRowRender	{ record: any; index: number; indent: number; expanded: boolean; }	Render of the expanded row content.
expandIcon	NTable.NExpand.IRenderExpandIconProps<any>	Custom row expand icon.
footer	readonly any[]	Table footer (the panel below the table).
header	readonly any[]	Table title (the panel above the table).
headerCell	{ title: NTable.NColumn.TTitle<any>; column: NTable.NColumn.IColumn<any>; }	Custom render of a table header cell.
summary	{ pageData: readonly any[]; }	Summary row of the table.
toolbar	readonly any[]	Table toolbar (the panel above the table).

Exposed

Name	Type	Description
table	any	Reference to the internal table instance — gives access to its methods and state.

CdsTableColumn

Slots

Name	Type	Description
default	{ value: any; text: any; record: any; index?: number | undefined; renderIndex?: number | undefined; column: NTable.NColumn.IColumn<any>; }	Custom render of a column cell.
filterIcon	{ filtered: boolean; column: NTable.NColumn.IColumn<any>; }	Custom column filter icon.
title	NTable.NColumn.ITitleProps<any>	Column title.

CdsTableColumnGroup

Slots

Name	Type	Description
default	any	Columns of the group (CdsTableColumn).
title	NTable.NColumn.ITitleProps<any>	Title of the column group.