@snack-uikit/table v0.36.6
Table
Installation
npm i @snack-uikit/table
TODO:
- multiple row selection with Shift key pressed
Примечание
Для оптимальной работы таблицы используйте
useMemo
дляcolumnDefinitions
или выносите их определение за компонент
Example
import { Table } from '@snack-uikit/table';
// ...
type TableData = {
id: string;
firstName: string;
lastName: string;
age: number;
status: string;
}
const columnDefinitions: ColumnDefinition<TableData>[] = [
Table.getStatusColumnDef<Person>({
accessorKey: 'status',
mapStatusToAppearance: {
pending: Table.statusAppearances.Blue,
success: Table.statusAppearances.Green,
// ... etc
},
header: 'Статус',
renderDescription: (value: string) => t(translations.statuses[value]),
size: 250,
}),
{
accessorKey: 'id',
},
{
// id, size - обязательны при передаче pinned
id: 'firstName',
size: 140,
pinned: 'left',
accessorKey: 'firstName',
header: 'Имя',
enableSorting: true,
sortDescFirst: true,
},
{
accessorKey: 'lastName',
header: 'Фамилия',
cell: ctx => <div className='custom'>{ctx.getValue<string>()}</div>,
maxSize: 200,
enableSorting: false,
},
{
accessorKey: 'age',
header: ctx => `Можно добавить хедер так: ${ctx.column.id}`,
minSize: 40,
},
Table.getRowActionsColumnDef({
pinned: true,
actionsGenerator: () => [
{
option: 'Действие с иконкой',
icon: <PlaceholderSVG />,
onClick: handleRowActionClick,
},
{
option: 'Другое действие',
onClick: handleRowActionClick,
},
],
})
];
// ...
<Table
columnDefinitions={columnDefinitions}
data={data}
rowSelection={{
enable: true, // false выключает выбор всех строк (состояние disabled)
// или можно передать функцию для вычисления
// enable: row => !['Pending', 'Loading'].includes(row.original.status),
onChange: handleRowSelection,
}}
/>
CopyCell
Props
name | type | default value | description |
---|---|---|---|
value | string \| number | - |
Table
Компонент таблицы
Props
name | type | default value | description |
---|---|---|---|
columnDefinitions* | ColumnDefinition<TData>[] | - | Определение внешнего вида и функционала колонок |
data* | TData[] | - | Данные для отрисовки |
keepPinnedRows | boolean | - | Параметр отвечает за отображение закрепленных строк на всех страницах таблицы |
copyPinnedRows | boolean | - | Параметр отвечает за сохранение закрепленных строк в теле таблицы |
enableSelectPinned | boolean | - | Параметр отвечает за чекбокс выбора закрепленных строк |
sorting | { initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; } | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние initialState: Начальное состояние сортировки state: Состояние сортировки, жестко устанавливаемое снаружи onChange: Колбэк на изменение сортировки |
rowSelection | { initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; } | - | Параметры отвечают за возможность выбора строк initialState: Начальное состояние выбора строк state: Состояние выбора строк, жестко устанавливаемое снаружи enable: Колбэк определяющий можно ли выбрать строку multiRow: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) onChange: Колбэк на выбор строк |
search | { initialState?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; } | 'Search' loading: Состояние загрузки в строке поиска onChange: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице initialState: Начальное состояние строки поиска state: Состояние строки поиска, жестко устанавливаемое снаружи placeholder: Placeholder строки поиска |
enableFuzzySearch | boolean | - | Включить нечеткий поиск |
pageSize | number | 10 | Максимальное кол-во строк на страницу |
pagination | { state?: PaginationState; options?: number[]; optionsLabel?: string; onChange?(state: PaginationState): void; optionsRender?(value: string \| number, idx: number): string \| number; } | 'Rows volume: ' onChange: Колбэк на изменение пагинации | Параметры отвечают за пагинацию в таблице state: Состояние строки поиска, жестко устанавливаемое снаружи options: Варианты в выпадающем селекторе для установки кол-ва строк на страницу optionsLabel: Текст для селектора кол-ва строк на страницу |
autoResetPageIndex | boolean | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
pageCount | number | - | Кол-во страниц (используется для внешнего управления) |
onRowClick | RowClickHandler<TData> | - | Колбэк клика по строке |
className | string | - | CSS-класс |
loading | boolean | - | Состояние загрузки |
onRefresh | () => void | - | Колбек обновления данных |
onDelete | (selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void) => void | - | Колбек удаления выбранных |
outline | boolean | - | Внешний бордер для тулбара и таблицы |
columnFilters | ReactNode | - | Фильтры |
dataFiltered | boolean | - | |
dataError | boolean | - | |
exportSettings | { fileName: string; filterData?: boolean; exportToCSV?(args: ExportProps<TData>): void; exportToXLSX?(args: ExportProps<TData>): void; } | - | Настройки экспорта в тулбаре |
moreActions | Action[] | - | Элементы выпадающего списка кнопки с действиями |
noDataState | EmptyStateProps | - | Экран при отстутствии данных |
noResultsState | EmptyStateProps | - | Экран при отстутствии результатов поиска или фильтров |
errorDataState | EmptyStateProps | - | Экран при ошибке запроса |
suppressToolbar | boolean | - | Отключение тулбара |
toolbarBefore | ReactNode | - | Дополнительный слот в Toolbar перед строкой поиска |
toolbarAfter | ReactNode | - | Дополнительный слот в Toolbar после строки поиска |
suppressPagination | boolean | - | Отключение пагинации |
manualSorting | boolean | - | |
manualPagination | boolean | - | |
manualFiltering | boolean | - | |
getRowId | (originalRow: TData, index: number, parent?: Row<TData>) => string | - | Дополнительная функция используется для получения уникального идентификатора для любой заданной строки |
scrollRef | RefObject<HTMLElement> | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
scrollContainerRef | RefObject<HTMLElement> | - | Ссылка на контейнер, который скроллится |
rowPinning | Pick<RowPinningState, "top"> | { top: [], } | Определение какие строки должны быть закреплены в таблице |
savedState | { id: string; resize?: boolean; } | - | Конфиг для сохранения состояния в localStorage. Поле id должно быть уникальным для разных таблиц в рамках приложения. Для корректной работы необходимо наличие id в конфиге columnDefinitions |
Table.getStatusColumnDef
Вспомогательная функция для создания ячейки со статусом
Props
name | type | default value | description |
---|---|---|---|
mapStatusToAppearance* | MapStatusToAppearanceFnType | - | Маппинг значений статуса на цвета |
accessorKey* | string | - | Имя ключа соответствующее полю в data |
enableSorting | boolean | true | Включение/выключение сортировки |
renderDescription | (cellValue: string, row: TData) => string | - | Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса |
size | number | - | Размер ячейки |
minSize | number | - | |
maxSize | number | - | |
header | ColumnDefTemplate<HeaderContext<TData, unknown>> & (string \| ((ctx: HeaderContext<TData, unknown>) => string)) | - | Заголовок колонки |
enableResizing | boolean | - | Включение/выключение ресайза колонки |
Table.getRowActionsColumnDef
Вспомогательная функция для создания ячейки с дополнительными действиями у строки
Props
name | type | default value | description |
---|---|---|---|
actionsGenerator* | ActionsGenerator<TData> | - | Действия для строки |
pinned | boolean | - | Закрепление колонки справа в таблице |
ServerTable
Props
name | type | default value | description |
---|---|---|---|
onChangePage* | (offset: number, limit: number) => void | - | |
columnDefinitions* | ColumnDefinition<TData>[] | - | Определение внешнего вида и функционала колонок |
keepPinnedRows | boolean | false | Параметр отвечает за отображение закрепленных строк на всех страницах таблицы |
copyPinnedRows | boolean | false | Параметр отвечает за сохранение закрепленных строк в теле таблицы |
enableSelectPinned | boolean | - | Параметр отвечает за чекбокс выбора закрепленных строк |
sorting | { initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; } | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние initialState: Начальное состояние сортировки state: Состояние сортировки, жестко устанавливаемое снаружи onChange: Колбэк на изменение сортировки |
rowSelection | { initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; } | - | Параметры отвечают за возможность выбора строк initialState: Начальное состояние выбора строк state: Состояние выбора строк, жестко устанавливаемое снаружи enable: Колбэк определяющий можно ли выбрать строку multiRow: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) onChange: Колбэк на выбор строк |
enableFuzzySearch | boolean | - | Включить нечеткий поиск |
autoResetPageIndex | boolean | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
onRowClick | RowClickHandler<TData> | - | Колбэк клика по строке |
className | string | - | CSS-класс |
loading | boolean | - | Состояние загрузки |
onRefresh | () => void | - | Колбек обновления данных |
onDelete | (selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void) => void | - | Колбек удаления выбранных |
outline | boolean | - | Внешний бордер для тулбара и таблицы |
columnFilters | ReactNode | - | Фильтры |
dataFiltered | boolean | - | |
dataError | boolean | - | |
exportSettings | { fileName: string; filterData?: boolean; exportToCSV?(args: ExportProps<TData>): void; exportToXLSX?(args: ExportProps<TData>): void; } | - | Настройки экспорта в тулбаре |
moreActions | Action[] | - | Элементы выпадающего списка кнопки с действиями |
noDataState | EmptyStateProps | - | Экран при отстутствии данных |
noResultsState | EmptyStateProps | - | Экран при отстутствии результатов поиска или фильтров |
errorDataState | EmptyStateProps | - | Экран при ошибке запроса |
suppressToolbar | boolean | - | Отключение тулбара |
toolbarBefore | ReactNode | - | Дополнительный слот в Toolbar перед строкой поиска |
toolbarAfter | ReactNode | - | Дополнительный слот в Toolbar после строки поиска |
suppressPagination | boolean | - | Отключение пагинации |
manualSorting | boolean | true | |
manualPagination | boolean | true | |
manualFiltering | boolean | true | |
getRowId | (originalRow: TData, index: number, parent?: Row<TData>) => string | - | Дополнительная функция используется для получения уникального идентификатора для любой заданной строки |
scrollRef | RefObject<HTMLElement> | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
scrollContainerRef | RefObject<HTMLElement> | - | Ссылка на контейнер, который скроллится |
rowPinning | Pick<RowPinningState, "top"> | - | Определение какие строки должны быть закреплены в таблице |
savedState | { id: string; resize?: boolean; } | - | Конфиг для сохранения состояния в localStorage. Поле id должно быть уникальным для разных таблиц в рамках приложения. Для корректной работы необходимо наличие id в конфиге columnDefinitions |
items | TData[] | - | Данные для отрисовки |
total | number | 10 | Общее кол-во строк |
limit | number | 10 | Кол-во строк на страницу |
offset | number | - | Смещение |
search | { initialValue?: string; state: string; placeholder?: string; loading?: boolean; onChange(value: string): void; } | 'Search...' loading: Состояние загрузки в строке поиска onChange: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице initialState: Начальное состояние строки поиска state: Состояние строки поиска, жестко устанавливаемое снаружи placeholder: Placeholder строки поиска |
pagination | { options?: number[]; optionsLabel?: string; } | 'Rows volume' | Параметры отвечают за пагинацию в таблице options: Варианты в выпадающем селекторе для установки кол-ва строк на страницу optionsLabel: Текст для селектора кол-ва строк на страницу |
ServerTable.getRowActionsColumnDef
Вспомогательная функция для создания ячейки с дополнительными действиями у строки
Props
name | type | default value | description |
---|---|---|---|
actionsGenerator* | ActionsGenerator<TData> | - | Действия для строки |
pinned | boolean | - | Закрепление колонки справа в таблице |
ServerTable.getStatusColumnDef
Вспомогательная функция для создания ячейки со статусом
Props
name | type | default value | description |
---|---|---|---|
mapStatusToAppearance* | MapStatusToAppearanceFnType | - | Маппинг значений статуса на цвета |
accessorKey* | string | - | Имя ключа соответствующее полю в data |
enableSorting | boolean | true | Включение/выключение сортировки |
renderDescription | (cellValue: string, row: TData) => string | - | Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса |
size | number | - | Размер ячейки |
minSize | number | - | |
maxSize | number | - | |
header | ColumnDefTemplate<HeaderContext<TData, unknown>> & (string \| ((ctx: HeaderContext<TData, unknown>) => string)) | - | Заголовок колонки |
enableResizing | boolean | - | Включение/выключение ресайза колонки |
exportToCSV
Props
name | type | default value | description |
---|---|---|---|
columnDefinitions* | ColumnDefinition<TData>[] | - | |
data* | TData[] | - | |
fileName | string | Table |
exportToXLSX
Props
name | type | default value | description |
---|---|---|---|
columnDefinitions* | ColumnDefinition<TData>[] | - | |
data* | TData[] | - | |
fileName | string | Table |
3 months ago
5 months ago
4 months ago
3 months ago
6 months ago
1 month ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
7 months ago
3 months ago
3 months ago
4 months ago
6 months ago
7 months ago
3 months ago
7 months ago
7 months ago
4 months ago
5 months ago
5 months ago
7 months ago
7 months ago
4 months ago
5 months ago
5 months ago
7 months ago
5 months ago
4 months ago
5 months ago
7 months ago
3 months ago
2 months ago
7 months ago
7 months ago
6 months ago
7 months ago
7 months ago
2 months ago
8 months ago
2 months ago
8 months ago
2 months ago
7 months ago
2 months ago
7 months ago
3 months ago
4 months ago
1 month ago
2 months ago
4 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
4 months ago
7 months ago
4 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
4 months ago
8 months ago
3 months ago
4 months ago
7 months ago
3 months ago
3 months ago
3 months ago
6 months ago
3 months ago
4 months ago
7 months ago
4 months ago
1 month ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
5 months ago
5 months ago
7 months ago
4 months ago
2 months ago
7 months ago
1 month ago
5 months ago
4 months ago
6 months ago
3 months ago
4 months ago
5 months ago
3 months ago
3 months ago
7 months ago
4 months ago
7 months ago
7 months ago
1 month ago
5 months ago
5 months ago
6 months ago
1 month ago
5 months ago
5 months ago
5 months ago
7 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
4 months ago
8 months ago
8 months ago
1 month ago
8 months ago
6 months ago
2 months ago
4 months ago
4 months ago
1 month ago
4 months ago
3 months ago
7 months ago
5 months ago
4 months ago
8 months ago
7 months ago
7 months ago
8 months ago
5 months ago
4 months ago
7 months ago
6 months ago
2 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
10 months ago
1 year ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
10 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
10 months ago
1 year ago
11 months ago
1 year ago
10 months ago
1 year ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
12 months ago
11 months ago
10 months ago
1 year ago
1 year ago
12 months ago
10 months ago
12 months ago
11 months ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
10 months ago
10 months ago
10 months ago
12 months ago
12 months ago
10 months ago
1 year ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago