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

Импорт

import-grid.tsx

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

NuiGrid

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

NuiGrid: Свойства
Имя	Тип	По умолчанию	Описание
`rows`Проп	`readonly T[]`		Данные. Правка заменяет строку и вызывает `onRowsChange`; следующие переданные `rows` заменят правки.
`onRowsChange`Колбэк	`(rows: readonly T[]) => void`		Вызывается со строками после каждой принятой правки.
`columns`Проп	`NuiGridColumn<T>[]`		Столбцы в виде объектов `NuiGridColumn`.
`rowId`Проп	`(row: T) => unknown`	`row.id ?? row`	Ключ строки для выбора и отслеживания.
`label`Проп	`string`		Доступное имя таблицы.
`selection`Проп	`'none' \| 'single' \| 'multiple'`	`'none'`	Можно ли выбирать строки и сколько.
`selected` `defaultSelected` `onSelectedChange`Состояние	`unknown[]`	`[]`	Ключи выбранных строк.
`sort` `defaultSort` `onSortChange`Состояние	`NuiGridSort[]`	`[]`	Сортировка в виде объектов `{ column, direction }`; первый — основной.
`filters` `defaultFilters` `onFiltersChange`Состояние	`Record<string, NuiGridFilter>`	`{}`	Фильтр для каждого id столбца: оператор и значение.
`search` `defaultSearch` `onSearchChange`Состояние	`string`	`''`	Слова, которые все должны быть в строке.
`pageSize` `defaultPageSize` `onPageSizeChange`Состояние	`number`	`0`	Строк на странице; 0 — один прокручиваемый список.
`page` `defaultPage` `onPageChange`Состояние	`number`	`0`	Текущая страница (с 0).
`pageSizes`Проп	`number[]`	`[10, 25, 50, 100]`	Варианты в пагинаторе.
`virtual`Проп	`boolean \| 'auto'`	`'auto'`	Рендерит только видимые строки: всегда, никогда или `auto` — свыше 100 строк без пагинации.
`height`Проп	`string`		Длина CSS, ограничивающая таблицу; прокрутка — внутри.
`columnState` `defaultColumnState` `onColumnStateChange`Состояние	`NuiGridColumnState[]`	`[]`	Ширина, порядок, закрепление и видимость столбцов — для сохранения и восстановления.
`mode`Проп	`'client' \| 'server'`	`'client'`	`server` показывает строки как есть, а сортировку, фильтрацию и пагинацию оставляет вам.
`total`Проп	`number`		Число строк на сервере.
`loading`Проп	`boolean`	`false`	Показывает полосу загрузки, а пока строк нет — строки-заглушки.
`locale`Проп	`string`	`'en-US'`	Форматирует числа и даты и распознаёт введённые числа.
`labels`Проп	`Partial<NuiGridLabels>`		Все показываемые и озвучиваемые тексты — для перевода.
`corners`Проп	`NuiCorners`		Форма углов: `round`, `squircle`, `bevel`, `scoop`, `notch` или `square`.
`radius`Проп	`NuiRadius`		Радиус скругления углов: `none`, `small`, `medium`, `large` или `full`.
`density`Проп	`NuiDensity`		Сколько места занимает компонент: `compact`, `regular` или `roomy`.
`groupBy`Проп	`string[]`	`[]`	Столбцы для группировки строк, начиная с внешнего.
`collapsed` `defaultCollapsed` `onCollapsedChange`Состояние	`string[]`	`[]`	Ключи свёрнутых групп; изначально группы раскрыты.
`getChildren`Проп	`(row: T) => T[] \| undefined`		Дочерние элементы строки: таблица показывает древовидные данные.
`expanded` `defaultExpanded` `onExpandedChange`Состояние	`unknown[]`	`[]`	Ключи строк, раскрытых в древовидных данных; изначально они свёрнуты.
`details` `defaultDetails` `onDetailsChange`Состояние	`unknown[]`	`[]`	Ключи строк с открытыми подробностями.
`totals, flash`Проп	`boolean`	`false`	Строка итогов по всем отфильтрованным строкам; вспышка ячеек при изменении их текста — в строках с постоянным `rowId`.
`layout`Проп	`'table' \| 'list' \| 'auto'`	`'table'`	`list` показывает строки карточками, а `auto` — только на узких экранах.
`toolbar`Проп	`boolean \| 'auto'`	`'auto'`	Панель, которая сортирует, фильтрует и выбирает все строки: всегда, никогда или `auto` — с карточками.
`renderEmpty`Рендер-проп	`(filtered: boolean) => ReactNode`		Что показать, когда строк нет. Функция узнаёт, скрыли ли их фильтры.
`renderDetail`Рендер-проп	`(row: T) => ReactNode`		Подробности строки, которые показываются под ней, когда их открывают. Таблица добавляет столбец переключателей.
`onRowActivate`Колбэк	`(row: T) => void`		Вызывается со строкой, открытой по Enter или двойному клику.
`onCellEdit`Колбэк	`(edit: NuiGridEdit<T>) => void`		Вызывается с каждой принятой правкой.
`onQueryChange`Колбэк	`(query: NuiGridQuery) => void`		Вызывается с сортировкой, фильтрами, поиском и страницей при каждом их изменении, а также один раз в начале.
`ref`Проп	`Ref<NuiGridHandle>`		Что доступно через `ref` таблицы: экспорт, печать и фокус.
`exportXlsx, print`Метод	`(options?) => Blob, () => void`		Выгружает отфильтрованные и отсортированные строки в электронную таблицу; печатает все строки.
`exportCsv`Метод	`(options?) => string`		Отфильтрованные и отсортированные строки видимых столбцов в CSV.
`expandAll`Метод	`(open?: boolean) => void`		Раскрывает все группы и все строки с дочерними элементами или сворачивает их все.
`focusCell`Метод	`(row: number, col: number) => void`		Переводит фокус на ячейку; строка `-1` — заголовок.
`clearFilters`Метод	`() => void`		Сбрасывает все фильтры и поиск.
`fit`Метод	`(id: string) => void`		Подгоняет ширину столбца под самую широкую из отрисованных ячеек.

Состояние работает как у полей ввода в React: передайте значение и обновляйте его в колбэке on…Change или передайте значение default…, и его будет хранить компонент.

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

NuiGridColumn

Один столбец. Принимает все свойства столбца Angular (обязательны только id и header), а также эти два, которые его отрисовывают.

NuiGridColumn: Свойства
Имя	Тип	По умолчанию	Описание
`renderCell`Рендер-проп	`({ row, value, text, column }) => ReactNode`		Своя отрисовка ячеек столбца: из строки, её значения и текста.
`renderHeader`Рендер-проп	`(column) => ReactNode`		Своя отрисовка заголовка столбца; имя ему по-прежнему даёт `header`.