import type { ReactNode, HTMLAttributes, CSSProperties, TdHTMLAttributes, ThHTMLAttributes } from 'react';
import { RowData, RowSelectionState } from '@tanstack/react-table';
declare module '@tanstack/react-table' {
interface TableMeta {
updateData: (rowId: string, columnId: string, value: unknown) => void;
}
interface ColumnMeta {
filters?: TableColumnData['filters'];
enableEditing?: boolean;
renderCell?: TableColumnData['renderCell'];
setCellProps?: TableColumnData['setCellProps'];
}
}
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?: (row: TableRowData, cellId: string) => HTMLAttributes & TdHTMLAttributes;
};
export interface TableProps extends Omit, 'onChange'> {
/**
* Основной контент
*/
data: TableRowData[];
/**
* Настройка колонок
*/
columns: TableColumnData[];
/**
* Обработчик изменения состояния
*/
onChange?: (data: {
selected: TableProps['selected'];
filtered: TableProps['filtered'];
sorted: TableProps['sorted'];
}) => void;
/**
* Вариант отображения border
* @default all
*/
borderVariant?: 'all' | 'rows' | 'header';
/**
* Включение функционала выбора строк
* @default false
*/
enableSelection?: boolean;
/**
* Состояние параметров выбранных строк
*/
selected?: RowSelectionState;
/**
* Состояние параметров фильтрации
*/
filtered?: {
id: string;
value: unknown;
}[];
/**
* Состояние параметров сортировки
*/
sorted?: {
id: string;
desc: boolean;
}[];
/**
* Максимальная высота таблицы
*/
maxHeight?: CSSProperties['maxHeight'];
/**
* Прилипание шапки при скролле
* @default false
*/
stickyHeader?: boolean;
/**
* Обработчик обновления контента ячейки
*/
onCellUpdate?: (rowId: string, columnId: string, value: unknown) => void;
/**
* Сеттер свойств для строки
*/
setRowProps?: (row: TableRowData) => HTMLAttributes & ThHTMLAttributes;
/**
* Слот для контента над таблицей.
*/
topContent?: ReactNode;
/**
* Слот для контента под таблицей.
*/
bottomContent?: ReactNode;
/**
* Слот для лоадинга под контентом.
*/
loadingSlot?: ReactNode;
/**
* Обработчик сколла контента.
*/
onScroll?: (e: React.UIEvent) => void;
/**
* Возможность указать className для различных семантических узлов внутри компонента.
*/
classNames?: {
/**
* Корневой верхнеуровневый контейнер.
*/
root?: string;
/**
* Элемент со стилями таблицы, такими как font-size, width, border и тд.
*/
table?: string;
header?: {
/**
* Элемент шапки таблицы.
*/
wrapper?: string;
/**
* Элемент строки шапки таблицы.
*/
row?: string;
/**
* Элемент ячейки шапки таблицы.
*/
cell?: string;
};
body?: {
/**
* Элемент главного контейнера с контентом.
*/
wrapper?: string;
/**
* Элемент строки основного контента таблицы.
*/
row?: string;
/**
* Элемент ячейки основного контента таблицы.
*/
cell?: string;
};
};
/**
* Размер таблицы
*/
size?: string;
/**
* Внешний вид таблицы
*/
view?: string;
}
//# sourceMappingURL=Table.types.d.ts.map