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
columnDefinitions*	`ColumnDefinition<TData>[]`	-
data*	`TData[]`	-
fileName	`string`	Table

exportToXLSX

Props

name	type	default value
columnDefinitions*	`ColumnDefinition<TData>[]`	-
data*	`TData[]`	-
fileName	`string`	Table

@snack-uikit/table

Table

Installation

TODO:

Примечание

Example

CopyCell

Props

Table

Props

Table.getStatusColumnDef

Props

Table.getRowActionsColumnDef

Props

ServerTable

Props

ServerTable.getRowActionsColumnDef

Props

ServerTable.getStatusColumnDef

Props

exportToCSV

Props

exportToXLSX

Props

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@snack-uikit/table

Table

Installation

TODO:

Примечание

Example

CopyCell

Props

Table

Props

Table.getStatusColumnDef

Props

Table.getRowActionsColumnDef

Props

ServerTable

Props

ServerTable.getRowActionsColumnDef

Props

ServerTable.getStatusColumnDef

Props

exportToCSV

Props

exportToXLSX

Props

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads