Table

Компонент предназначен для визуализации табличных данных с поддержкой сортировки, фильтрации, редактирования ячеек и других интерактивных возможностей. Он позволяет настраивать внешний вид колонок, включая их ширину, возможность изменения размера, фильтрацию значений и другие функции. Таблица поддерживает выделение строк, а также предоставляет методы для управления состоянием таблицы через API.

Быстрый старт​

Live Editor
Result
Open in CodeSandbox

Примеры​

Свойство renderCell нужно для настройки кастомного отображения ячейки.
Это render-prop, который в параметрах принимает значение ячейки value, объект строки, к которой принадлежит ячейка row и индекс этой строки rowIndex.

Live Editor
Result
Open in CodeSandbox

Сценарии использования​

Выделение строки по нажатию​

Для осуществления этой цели существует свойство setRowProps. Это функция, которая принимает объект строки row и возвращает объект атрибутов, которые будут прокинуты в тег <tr>.

Live Editor
Result
Open in CodeSandbox

Выделение строки по наведению​

Это можно осуществить или с помощью css, либо использовать свойство setRowProps для более гибкой настройки и сложных сценариев.

Live Editor
Result
Open in CodeSandbox

API​

Обязательными полями являются data и columns. Формат следующий:

export type TableRowData = {
    /**
     * Уникальный идентификатор строки
     */
    id: string;
    /**
     * Неограниченный список пар ключ:значение, составляющих контент таблицы.
     * Должен совпадать с ключами из TableColumnData
     */
    [key: string]: string | number | object;
};

export type TableColumnData = {
    /**
     * Уникальный идентификатор колонки
     */
    id: string;
    /**
     * Label колонки
     */
    label: string;
    /**
     * Ширина колонки
     */
    width?: number;
    /**
     * Включение сортировки
     */
    enableSorting?: boolean;
    /**
     * Включение ресайза
     */
    enableResizing?: boolean;
    /**
     * Включение изменения ячеек
     */
    enableEditing?: boolean;
    /**
     * Набор опций для фильтрации строк
     */
    filters?: { value: string; label: string }[];
    /**
     * Кастомный обработчик для фильтрации строк
     */
    filterFn?: (filteredValue: string, cellValue: unknown) => boolean;
    /**
     * Рендер-пропс для ячейки
     */
    renderCell?: (value: unknown, row: TableRowData, rowIndex: number) => ReactNode;
    /**
     * Сеттер свойств для ячейки
     */
    setCellProps?: (record: TableRowData, cellId: string) => HTMLAttributes<any> & TdHTMLAttributes<any>;
};