API компонента Таблица данных

Импорт

import-grid.ts

import { NuiGrid, NuiGridCell, type NuiGridColumn } from '@needless-ui/angular/grid';

NuiGrid

Таблица данных на нативной HTML-таблице.

Селектор: nui-grid

NuiGrid: Свойства
Имя	Тип	По умолчанию	Описание
`rows`Двусторонний	`readonly T[]`		Данные. Правки заменяют строки, поэтому привязывайте через `[(rows)]`.
`columns`Input	`NuiGridColumn<T>[]`		Столбцы в виде объектов `NuiGridColumn`.
`rowId`Input	`(row: T) => unknown`	`row.id ?? row`	Ключ строки для выбора и отслеживания.
`label`Input	`string`		Доступное имя таблицы.
`selection`Input	`'none' \| 'single' \| 'multiple'`	`'none'`	Можно ли выбирать строки и сколько.
`selected`Двусторонний	`unknown[]`	`[]`	Ключи выбранных строк.
`sort`Двусторонний	`NuiGridSort[]`	`[]`	Сортировка в виде объектов `{ column, direction }`; первый — основной.
`filters`Двусторонний	`Record<string, NuiGridFilter>`	`{}`	Фильтр для каждого id столбца: оператор и значение.
`search`Двусторонний	`string`	`''`	Слова, которые все должны быть в строке.
`pageSize`Двусторонний	`number`	`0`	Строк на странице; 0 — один прокручиваемый список.
`page`Двусторонний	`number`	`0`	Текущая страница (с 0).
`pageSizes`Input	`number[]`	`[10, 25, 50, 100]`	Варианты в пагинаторе.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Рендерит только видимые строки: всегда, никогда или `auto` — свыше 100 строк без пагинации.
`height`Input	`string`		Длина CSS, ограничивающая таблицу; прокрутка — внутри.
`columnState`Двусторонний	`NuiGridColumnState[]`	`[]`	Ширина, порядок, закрепление и видимость столбцов — для сохранения и восстановления.
`mode`Input	`'client' \| 'server'`	`'client'`	`server` показывает строки как есть, а сортировку, фильтрацию и пагинацию оставляет вам.
`total`Input	`number`		Число строк на сервере.
`loading`Input	`boolean`	`false`	Показывает полосу загрузки, а пока строк нет — строки-заглушки.
`locale`Input	`string`	`LOCALE_ID`	Форматирует числа и даты и распознаёт введённые числа.
`labels`Input	`Partial<NuiGridLabels>`		Все показываемые и озвучиваемые тексты — для перевода.
`corners`Input	`NuiCorners`		Форма углов: `round`, `squircle`, `bevel`, `scoop`, `notch` или `square`.
`radius`Input	`NuiRadius`		Радиус скругления углов: `none`, `small`, `medium`, `large` или `full`.
`density`Input	`NuiDensity`		Сколько места занимает компонент: `compact`, `regular` или `roomy`.
`rowActivate`Output	`T`		Передаёт строку, открытую по Enter или двойному клику.
`cellEdit`Output	`NuiGridEdit<T>`		Передаёт каждую принятую правку.
`queryChange`Output	`NuiGridQuery`		Передаёт сортировку, фильтры, поиск и страницу при каждом их изменении.
`exportCsv`Метод	`(options?) => string`		Отфильтрованные и отсортированные строки видимых столбцов в CSV.
`focusCell`Метод	`(row: number, col: number) => void`		Переводит фокус на ячейку; строка `-1` — заголовок.
`clearFilters`Метод	`() => void`		Сбрасывает все фильтры и поиск.

Если входное свойство настройки не задано, компонент берёт его значение из ближайшего атрибута data-nui-*. Подробнее — в руководстве по настройке.

NuiGridColumn

Один столбец. Обязательны только id и header.

NuiGridColumn: Свойства
Имя	Тип	По умолчанию	Описание
`id`Свойство	`string`		Уникальный; ключ в сортировке, фильтрах и состоянии столбцов.
`header`Свойство	`string`		Текст заголовка.
`value`Свойство	`keyof T \| ((row: T) => V)`		Свойство строки или функция от строки. По умолчанию — `row[id]`.
`type`Свойство	`'text' \| 'number' \| 'date' \| 'boolean' \| 'enum'`	`'text'`	Определяет выравнивание, сортировку, фильтр и редактор.
`format`Свойство	`Intl options \| ((value, row) => string)`		Параметры `Intl` для чисел и дат или функция, формирующая текст.
`options`Свойство	`NuiOption<V>[]`		Варианты столбца `enum` в виде объектов `NuiOption`.
`width, minWidth, maxWidth`Свойство	`number`		В пикселях.
`flex`Свойство	`number`		Делит оставшееся место с другими столбцами `flex`.
`align`Свойство	`'start' \| 'center' \| 'end'`		По умолчанию зависит от типа: числа и даты — к концу.
`pinned, hidden`Свойство	`'start' \| 'end', boolean`		Начальные закрепление и видимость столбца.
`sortable, filterable, resizable, reorderable, hideable`Свойство	`boolean`	`true`	Каждое отключается значением `false`.
`compare`Свойство	`(a: V, b: V) => number`		Своя сортировка.
`editable, validate`Свойство	`boolean \| ((row) => boolean), (value, row) => string \| null`		Можно ли редактировать ячейки; сообщение о недопустимом значении.
`set`Свойство	`(row: T, value: V) => T`		Создаёт изменённую строку. По умолчанию — копия с новым значением.

NuiGridCell

Рисует ячейки столбца. В контексте — строка, значение и текст.

Селектор: ng-template[nuiGridCell]

NuiGridCell: Свойства
Имя	Тип	По умолчанию	Описание
`nuiGridCell`Input	`string`		Id столбца.

NuiGridHeader

Рисует заголовок столбца.

Селектор: ng-template[nuiGridHeader]

NuiGridHeader: Свойства
Имя	Тип	По умолчанию	Описание
`nuiGridHeader`Input	`string`		Id столбца.

NuiGridEmpty

Что показать, когда строк нет. Контекст сообщает, скрыли ли их фильтры.

Селектор: ng-template[nuiGridEmpty]