@snack-uikit/table v0.17.0

Table

Installation

npm i @snack-uikit/table

Changelog

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

Table

Компонент таблицы

Props

Table.getStatusColumnDef

Вспомогательная функция для создания ячейки со статусом

Props

Table.getRowActionsColumnDef

Вспомогательная функция для создания ячейки с дополнительными действиями у строки

Props

ServerTable

Props

ServerTable.getRowActionsColumnDef

Вспомогательная функция для создания ячейки с дополнительными действиями у строки

Props

ServerTable.getStatusColumnDef

Вспомогательная функция для создания ячейки со статусом

Props

exportToCSV

Props

exportToXLSX

Props