@snack-uikit/table 0.14.5 → 0.14.6-preview-84a92753.0

package/README.md

@@ -133,7 +133,13 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
 | suppressToolbar | `boolean` | - | Отключение тулбара |
 | toolbarBefore | `ReactNode` | - | Дополнительный слот в `Toolbar` перед строкой поиска |
+| toolbarAfter | `ReactNode` | - | Дополнительный слот в `Toolbar` после строки поиска |
 | suppressPagination | `boolean` | - | Отключение пагинации |
+| manualSorting | `boolean` | - |  |
+| manualPagination | `boolean` | - |  |
+| manualFiltering | `boolean` | - |  |
+| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 ## Table.getStatusColumnDef
 Вспомогательная функция для создания ячейки со статусом
 ### Props
@@ -157,7 +163,6 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| search* | `{ initialValue?: string; state: string; placeholder?: string; loading?: boolean; onChange(value: string): void; }` | 'Search...'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
 | onChangePage* | `(offset: number, limit: number) => void` | - |  |
 | columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
 | loading | `boolean` | - | Состояние загрузки |
@@ -178,11 +183,18 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
 | suppressToolbar | `boolean` | - | Отключение тулбара |
 | toolbarBefore | `ReactNode` | - | Дополнительный слот в `Toolbar` перед строкой поиска |
+| toolbarAfter | `ReactNode` | - | Дополнительный слот в `Toolbar` после строки поиска |
 | suppressPagination | `boolean` | - | Отключение пагинации |
+| manualSorting | `boolean` | true |  |
+| manualPagination | `boolean` | true |  |
+| manualFiltering | `boolean` | true |  |
+| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | items | `TData[]` | - | Данные для отрисовки |
 | total | `number` | 10 | Общее кол-во строк |
 | limit | `number` | 10 | Кол-во строк на страницу |
 | offset | `number` | - | Смещение |
+| search | `{ initialValue?: string; state: string; placeholder?: string; loading?: boolean; onChange(value: string): void; }` | 'Search...'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
 | pagination | `{ options?: number[]; optionsLabel?: string; }` | 'Rows volume' <br> | Параметры отвечают за пагинацию в таблице <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу<br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
 ## ServerTable.getRowActionsColumnDef
 Вспомогательная функция для создания ячейки с дополнительными действиями у строки

package/dist/components/ServerTable/ServerTable.d.ts

@@ -1,48 +1,18 @@
-import { TableProps } from '../Table';
-export type ServerTableProps<TData extends object> = Omit<TableProps<TData>, 'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'> & {
-    /** Данные для отрисовки */
-    items?: TData[];
-    /**
-     * Общее кол-во строк
-     * @default 10
-     */
-    total?: number;
-    /**
-     * Кол-во строк на страницу
-     * @default 10
-     */
-    limit?: number;
-    /**
-     * Смещение
-     * @default 0
-     * */
-    offset?: number;
-    onChangePage(offset: number, limit: number): void;
-    /** Параметры отвечают за глобальный поиск в таблице <br>
-     * <strong>initialState</strong>: Начальное состояние строки поиска <br>
-     * <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br>
-     * <strong>placeholder</strong>: Placeholder строки поиска @default 'Search...'<br>
-     * <strong>loading</strong>: Состояние загрузки в строке поиска <br>
-     * <strong>onChange</strong>: Колбэк на изменение данных в строке поиска
-     *  */
-    search: {
-        initialValue?: string;
-        state: string;
-        placeholder?: string;
-        loading?: boolean;
-        onChange(value: string): void;
-    };
-    /** Параметры отвечают за пагинацию в таблице <br>
-     * <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу<br>
-     * <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу @default 'Rows volume' <br>
-     *  */
-    pagination?: {
-        options?: number[];
-        optionsLabel?: string;
-    };
-};
-export declare function ServerTable<TData extends object>({ items, total, limit, offset, onChangePage, search, pagination, columnFilters, ...rest }: ServerTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+import { ServerTableProps } from '../types';
+export declare function ServerTable<TData extends object>({ items, total, limit, offset, onChangePage, search: searchProp, pagination, columnFilters, manualSorting, manualPagination, manualFiltering, ...rest }: ServerTableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ServerTable {
     var getRowActionsColumnDef: typeof import("../../helperComponents").getRowActionsColumnDef;
+    var statusAppearances: {
+        readonly Primary: "primary";
+        readonly Neutral: "neutral";
+        readonly Red: "red";
+        readonly Orange: "orange";
+        readonly Yellow: "yellow";
+        readonly Green: "green";
+        readonly Blue: "blue";
+        readonly Violet: "violet";
+        readonly Pink: "pink";
+        readonly Loading: "loading";
+    };
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
 }

package/dist/components/ServerTable/ServerTable.js

@@ -11,28 +11,33 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { STATUS_APPEARANCE } from '../../helperComponents';
 import { Table } from '../Table';
 import { DEFAULT_PAGINATION_LIMIT } from './constants';
 import { onSearchDebounced } from './utils';
 export function ServerTable(_a) {
-    var { items, total = DEFAULT_PAGINATION_LIMIT, limit = DEFAULT_PAGINATION_LIMIT, offset = 0, onChangePage, search, pagination, columnFilters } = _a, rest = __rest(_a, ["items", "total", "limit", "offset", "onChangePage", "search", "pagination", "columnFilters"]);
-    const [tempSearch, setTempSearch] = useState(search.initialValue || '');
+    // добавить uncontrolledState
+    var { items, total = DEFAULT_PAGINATION_LIMIT, limit = DEFAULT_PAGINATION_LIMIT, offset = 0, onChangePage, search: searchProp, pagination, columnFilters, manualSorting = true, manualPagination = true, manualFiltering = true } = _a, rest = __rest(_a, ["items", "total", "limit", "offset", "onChangePage", "search", "pagination", "columnFilters", "manualSorting", "manualPagination", "manualFiltering"]);
+    const [search, setSearch] = useUncontrolledProp(searchProp === null || searchProp === void 0 ? void 0 : searchProp.state, searchProp === null || searchProp === void 0 ? void 0 : searchProp.initialValue, searchProp === null || searchProp === void 0 ? void 0 : searchProp.onChange);
+    const [tempSearch, setTempSearch] = useState(search || '');
     const handleSearch = useCallback((newValue) => {
         setTempSearch(newValue);
-        onSearchDebounced()(newValue.trim(), search.onChange);
-    }, [search.onChange]);
+        onSearchDebounced()(newValue.trim(), setSearch);
+    }, [setSearch]);
     const handlePageChange = useCallback(({ pageSize, pageIndex }) => onChangePage(pageIndex * pageSize, pageSize), [onChangePage]);
     const pageIndex = useMemo(() => Math.floor(offset / limit), [limit, offset]);
     const pageCount = useMemo(() => Math.ceil(total / limit), [limit, total]);
     return (_jsx(Table, Object.assign({}, rest, { data: items || [], search: {
             state: tempSearch,
             onChange: handleSearch,
-            loading: search.loading,
-            placeholder: search.placeholder,
+            loading: searchProp === null || searchProp === void 0 ? void 0 : searchProp.loading,
+            placeholder: searchProp === null || searchProp === void 0 ? void 0 : searchProp.placeholder,
         }, columnFilters: columnFilters, pageCount: pageCount, pagination: Object.assign(Object.assign({}, pagination), { state: {
                 pageIndex,
                 pageSize: limit,
-            }, onChange: handlePageChange }), pageSize: limit })));
+            }, onChange: handlePageChange }), pageSize: limit, manualSorting: manualSorting, manualFiltering: manualFiltering, manualPagination: manualPagination })));
 }
 ServerTable.getRowActionsColumnDef = Table.getRowActionsColumnDef;
+ServerTable.statusAppearances = STATUS_APPEARANCE;
 ServerTable.getStatusColumnDef = Table.getStatusColumnDef;

package/dist/components/Table/Table.d.ts

@@ -1,104 +1,6 @@
-import { PaginationState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
-import { ReactNode } from 'react';
-import { ToolbarProps } from '@snack-uikit/toolbar';
-import { WithSupportProps } from '@snack-uikit/utils';
-import { RowClickHandler } from '../../helperComponents';
-import { ColumnDefinition } from '../../types';
-import { EmptyStateProps } from '../TableEmptyState';
-export type TableProps<TData extends object> = WithSupportProps<{
-    /** Данные для отрисовки */
-    data: TData[];
-    /** Определение внешнего вида и функционала колонок */
-    columnDefinitions: ColumnDefinition<TData>[];
-    /** Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br>
-     *  <strong>initialState</strong>: Начальное состояние сортировки <br>
-     *  <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br>
-     * <strong>onChange</strong>: Колбэк на изменение сортировки
-     *  */
-    sorting?: {
-        initialState?: SortingState;
-        state?: SortingState;
-        onChange?(state: SortingState): void;
-    };
-    /** Параметры отвечают за возможность выбора строк <br>
-     * <strong>initialState</strong>: Начальное состояние выбора строк <br>
-     * <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br>
-     * <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br>
-     * <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br>
-     * <strong>onChange</strong>: Колбэк на выбор строк
-     *  */
-    rowSelection?: {
-        initialState?: RowSelectionState;
-        state?: RowSelectionState;
-        enable?: RowSelectionOptions<TData>['enableRowSelection'];
-        multiRow?: boolean;
-        onChange?(state: RowSelectionState): void;
-    };
-    /** Параметры отвечают за глобальный поиск в таблице <br>
-     * <strong>initialState</strong>: Начальное состояние строки поиска <br>
-     * <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br>
-     * <strong>placeholder</strong>: Placeholder строки поиска @default 'Search'<br>
-     * <strong>loading</strong>: Состояние загрузки в строке поиска <br>
-     * <strong>onChange</strong>: Колбэк на изменение данных в строке поиска
-     *  */
-    search?: {
-        initialValue?: string;
-        state?: string;
-        placeholder?: string;
-        loading?: boolean;
-        onChange?(value: string): void;
-    };
-    /** Максимальное кол-во строк на страницу @default 10 */
-    pageSize?: number;
-    /** Параметры отвечают за пагинацию в таблице <br>
-     * <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br>
-     * <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br>
-     * <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу @default 'Rows volume: ' <br>
-     * <strong>onChange</strong>: Колбэк на изменение пагинации
-     *  */
-    pagination?: {
-        state?: PaginationState;
-        options?: number[];
-        optionsLabel?: string;
-        onChange?(state: PaginationState): void;
-    };
-    /** Кол-во страниц (используется для внешнего управления) */
-    pageCount?: number;
-    /** Колбэк клика по строке */
-    onRowClick?: RowClickHandler<TData>;
-    /** CSS-класс */
-    className?: string;
-    /** Состояние загрузки */
-    loading?: boolean;
-    /** Колбек обновления данных */
-    onRefresh?(): void;
-    /** Колбек удаления выбранных */
-    onDelete?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
-    /** Внешний бордер для тулбара и таблицы */
-    outline?: boolean;
-    /** Фильтры */
-    columnFilters?: ReactNode;
-    dataFiltered?: boolean;
-    dataError?: boolean;
-    /** Название файла при экспорте CSV/XLSX */
-    exportFileName?: string;
-    /** Элементы выпадающего списка кнопки с действиями */
-    moreActions?: ToolbarProps['moreActions'];
-    /** Экран при отстутствии данных */
-    noDataState?: EmptyStateProps;
-    /** Экран при отстутствии результатов поиска или фильтров */
-    noResultsState?: EmptyStateProps;
-    /** Экран при ошибке запроса */
-    errorDataState?: EmptyStateProps;
-    /** Отключение тулбара */
-    suppressToolbar?: boolean;
-    /** Дополнительный слот в `Toolbar` перед строкой поиска */
-    toolbarBefore?: ReactNode;
-    /** Отключение пагинации */
-    suppressPagination?: boolean;
-}>;
+import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object>({ data, columnDefinitions, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters: columnFiltersProp, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportFileName, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarBefore, suppressPagination, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object>({ data, columnDefinitions, rowSelection, search, sorting, columnFilters, pagination, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportFileName, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarBefore, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, scrollRef, scrollContainerRef, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
     var statusAppearances: {

package/dist/components/Table/Table.js

@@ -9,88 +9,32 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useLocale } from '@snack-uikit/locale';
 import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
 import { Toolbar } from '@snack-uikit/toolbar';
-import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { DEFAULT_PAGE_SIZE } from '../../constants';
-import { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getSelectionCellColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, } from '../../helperComponents';
-import { fuzzyFilter } from '../../utils';
-import { TableEmptyState } from '../TableEmptyState';
-import { TablePagination } from '../TablePagination';
-import { useEmptyState, useLoadingTable, useStateControl } from './hooks';
+import { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, TableEmptyState, TablePagination, useEmptyState, } from '../../helperComponents';
+import { useLoadingTable, useTable } from './hooks';
 import styles from './styles.module.css';
 /** Компонент таблицы */
 export function Table(_a) {
-    var { data, columnDefinitions, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters: columnFiltersProp, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportFileName, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, suppressPagination = false } = _a, rest = __rest(_a, ["data", "columnDefinitions", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportFileName", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "suppressPagination"]);
-    const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
-    const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
-    const defaultPaginationState = useMemo(() => ({
-        pageIndex: 0,
-        pageSize,
-    }), [pageSize]);
-    const { state: sorting, onStateChange: onSortingChange } = useStateControl(sortingProp, []);
-    const { state: pagination, onStateChange: onPaginationChange } = useStateControl(paginationProp, defaultPaginationState);
-    const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
-    const tableColumns = useMemo(() => {
-        let cols = columnDefinitions;
-        if (enableSelection) {
-            cols = [getSelectionCellColumnDef(), ...cols];
-        }
-        return cols;
-    }, [columnDefinitions, enableSelection]);
-    const columnPinning = useMemo(() => {
-        var _a;
-        const pinningState = { left: [], right: [] };
-        for (const col of tableColumns) {
-            const id = getColumnId(col);
-            if (col.pinned && id) {
-                (_a = pinningState[col.pinned]) === null || _a === void 0 ? void 0 : _a.push(id);
-            }
-        }
-        return pinningState;
-    }, [tableColumns]);
-    const table = useReactTable({
+    var { data, columnDefinitions, rowSelection, search, sorting, columnFilters, pagination, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportFileName, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, scrollRef, scrollContainerRef } = _a, rest = __rest(_a, ["data", "columnDefinitions", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportFileName", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "scrollRef", "scrollContainerRef"]);
+    const { table, tableColumns, columnPinning } = useTable({
         data,
-        columns: tableColumns,
-        state: {
-            columnPinning,
-            globalFilter,
-            rowSelection,
-            sorting,
-            pagination,
-        },
+        sorting,
+        manualFiltering,
+        manualPagination,
+        manualSorting,
+        columnDefinitions,
+        rowSelection,
+        pagination,
         pageCount,
-        defaultColumn: {
-            enableSorting: false,
-            enableResizing: false,
-            minSize: 40,
-            cell: (cell) => _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 }),
-        },
-        manualSorting: Boolean(pageCount),
-        manualPagination: pageCount !== undefined,
-        manualFiltering: Boolean(pageCount),
-        globalFilterFn: fuzzyFilter,
-        onGlobalFilterChange,
-        onRowSelectionChange,
-        enableRowSelection: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable,
-        enableMultiRowSelection: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow,
-        enableFilters: true,
-        getFilteredRowModel: getFilteredRowModel(),
-        enableColumnResizing: true,
-        enableSorting: true,
-        enableMultiSort: true,
-        onSortingChange,
-        getSortedRowModel: getSortedRowModel(),
-        onPaginationChange,
-        getPaginationRowModel: getPaginationRowModel(),
-        getCoreRowModel: getCoreRowModel(),
+        pageSize,
     });
     const { loadingTable } = useLoadingTable({ pageSize, columnDefinitions: tableColumns, columnPinning });
     const handleOnRefresh = useCallback(() => {
@@ -106,7 +50,7 @@ export function Table(_a) {
         }
     }, [loading, onDelete, table]);
     const handleOnCheck = useCallback(() => {
-        if (!loading && (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow)) {
+        if (!loading && (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.multiRow)) {
             table.toggleAllPageRowsSelected();
             return;
         }
@@ -114,7 +58,8 @@ export function Table(_a) {
             table.resetRowSelection();
             return;
         }
-    }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table]);
+    }, [loading, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.multiRow, table]);
+    useEffect(() => { }, []);
     const columnSizeVars = useMemo(() => {
         const originalColumnDefs = table._getColumnDefs();
         const headers = table.getFlatHeaders();
@@ -147,14 +92,16 @@ export function Table(_a) {
         const tempPageSize = !suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize;
         return !tableRows.length ? Math.min(Math.max(tempPageSize, 5), DEFAULT_PAGE_SIZE) : tempPageSize;
     }, [pageSize, suppressPagination, tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize, tableRows.length]);
+    const enableSelection = Boolean(rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.enable);
     return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: {
                 '--page-size': cssPageSize,
+                // width: table.getTotalSize(),
             }, className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [!suppressToolbar && (_jsxs("div", { className: styles.header, children: [_jsx(Toolbar, { search: {
-                                value: globalFilter,
-                                onChange: onGlobalFilterChange,
+                                value: table.getState().globalFilter,
+                                onChange: table.setGlobalFilter,
                                 loading: search === null || search === void 0 ? void 0 : search.loading,
                                 placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
-                            }, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', before: toolbarBefore, after: exportFileName ? (_jsx(ExportButton, { fileName: exportFileName, columnDefinitions: columnDefinitions, data: data })) : undefined, moreActions: moreActions }), columnFiltersProp && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFiltersProp, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsx(Scroll, { size: 's', className: styles.table, children: _jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [tableRows.length ? _jsx(HeaderRow, {}) : null, tableRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(globalFilter), tableRowsLength: tableRows.length })] })) }) }) }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount }))] })) }));
+                            }, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, selectionMode: (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.multiRow) ? 'multiple' : 'single', before: toolbarBefore, after: _jsxs(_Fragment, { children: [toolbarAfter, exportFileName ? (_jsx(ExportButton, { fileName: exportFileName, columnDefinitions: columnDefinitions, data: data })) : undefined] }), moreActions: moreActions }), columnFilters && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFilters, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [tableRows.length ? _jsx(HeaderRow, {}) : null, tableRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: pagination === null || pagination === void 0 ? void 0 : pagination.options, optionsLabel: pagination === null || pagination === void 0 ? void 0 : pagination.optionsLabel, pageCount: pageCount }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/dist/components/Table/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useLoadingTable';
+export * from './useTable';

package/dist/components/Table/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useLoadingTable';
+export * from './useTable';

package/dist/components/Table/hooks/useLoadingTable.d.ts

@@ -0,0 +1,11 @@
+import { ColumnPinningState } from '@tanstack/react-table';
+import { ColumnDefinition } from '../../../types';
+type UseLoadingTableProps<TData> = {
+    columnDefinitions: ColumnDefinition<TData>[];
+    pageSize: number;
+    columnPinning: ColumnPinningState;
+};
+export declare function useLoadingTable<TData>({ pageSize, columnDefinitions, columnPinning }: UseLoadingTableProps<TData>): {
+    loadingTable: import("@tanstack/react-table").Table<TData>;
+};
+export {};

package/dist/components/Table/hooks/useLoadingTable.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { useMemo } from 'react';
+import { SkeletonText } from '@snack-uikit/skeleton';
+import styles from '../styles.module.css';
+export function useLoadingTable({ pageSize, columnDefinitions, columnPinning }) {
+    const data = useMemo(() => (Array.from({ length: pageSize }).map(() => '') || []), [pageSize]);
+    const columns = useMemo(() => columnDefinitions.map(column => (Object.assign(Object.assign({}, column), { cell: () => _jsx(SkeletonText, { className: styles.skeleton, lines: 1, width: '100%' }) }))), [columnDefinitions]);
+    const loadingTable = useReactTable({
+        data,
+        columns,
+        state: {
+            columnPinning,
+        },
+        getCoreRowModel: getCoreRowModel(),
+    });
+    return { loadingTable };
+}

package/dist/components/Table/hooks/useStateControl.d.ts

@@ -0,0 +1,8 @@
+export declare function useStateControl<TState>(control: {
+    initialState?: TState;
+    state?: TState;
+    onChange?(state: TState): void;
+} | undefined, defaultState: TState): {
+    state: TState;
+    onStateChange: import("uncontrollable").Handler;
+};

package/dist/components/Table/hooks/useStateControl.js

@@ -0,0 +1,13 @@
+import { useUncontrolledProp } from 'uncontrollable';
+export function useStateControl(control, defaultState) {
+    var _a, _b;
+    const [state, onStateChange] = useUncontrolledProp(control === null || control === void 0 ? void 0 : control.state, (_b = (_a = control === null || control === void 0 ? void 0 : control.state) !== null && _a !== void 0 ? _a : control === null || control === void 0 ? void 0 : control.initialState) !== null && _b !== void 0 ? _b : defaultState, (controlState) => {
+        var _a;
+        const newState = typeof controlState === 'function' ? controlState(state) : controlState;
+        (_a = control === null || control === void 0 ? void 0 : control.onChange) === null || _a === void 0 ? void 0 : _a.call(control, newState);
+    });
+    return {
+        state,
+        onStateChange,
+    };
+}

package/dist/components/Table/hooks/useTable.d.ts

@@ -0,0 +1,10 @@
+import { ColumnPinningState } from '@tanstack/react-table';
+import { ColumnDefinition } from '../../../types';
+import { TableProps } from '../../types';
+type UseTableProps<TData extends object> = Pick<TableProps<TData>, 'search' | 'rowSelection' | 'sorting' | 'pagination' | 'pageSize' | 'columnDefinitions' | 'data' | 'manualFiltering' | 'manualSorting' | 'manualPagination' | 'pageCount'>;
+export declare function useTable<TData extends object>({ search, pageSize, pagination: paginationProp, rowSelection: rowSelectionProp, sorting: sortingProp, columnDefinitions, manualFiltering, manualPagination, manualSorting, pageCount, data, }: UseTableProps<TData>): {
+    table: import("@tanstack/react-table").Table<TData>;
+    tableColumns: ColumnDefinition<TData>[];
+    columnPinning: Required<ColumnPinningState>;
+};
+export {};

package/dist/components/Table/hooks/useTable.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import { useMemo } from 'react';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { DEFAULT_PAGE_SIZE } from '../../../constants';
+import { getColumnId, getSelectionCellColumnDef } from '../../../helperComponents';
+import { fuzzyFilter } from '../../../utils';
+import { useStateControl } from './useStateControl';
+export function useTable({ search, pageSize = DEFAULT_PAGE_SIZE, pagination: paginationProp, rowSelection: rowSelectionProp, sorting: sortingProp, columnDefinitions, manualFiltering, manualPagination, manualSorting, pageCount, data, }) {
+    const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
+    const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
+    const defaultPaginationState = useMemo(() => ({
+        pageIndex: 0,
+        pageSize,
+    }), [pageSize]);
+    const { state: sorting, onStateChange: onSortingChange } = useStateControl(sortingProp, []);
+    const { state: pagination, onStateChange: onPaginationChange } = useStateControl(paginationProp, defaultPaginationState);
+    const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
+    const tableColumns = useMemo(() => {
+        let cols = columnDefinitions;
+        if (enableSelection) {
+            cols = [getSelectionCellColumnDef(), ...cols];
+        }
+        return cols;
+    }, [columnDefinitions, enableSelection]);
+    const columnPinning = useMemo(() => {
+        var _a;
+        const pinningState = { left: [], right: [] };
+        for (const col of tableColumns) {
+            const id = getColumnId(col);
+            if (col.pinned && id) {
+                (_a = pinningState[col.pinned]) === null || _a === void 0 ? void 0 : _a.push(id);
+            }
+        }
+        return pinningState;
+    }, [tableColumns]);
+    const table = useReactTable({
+        data,
+        columns: tableColumns,
+        state: {
+            columnPinning,
+            globalFilter,
+            rowSelection,
+            sorting,
+            pagination,
+        },
+        pageCount,
+        defaultColumn: {
+            enableSorting: true,
+            enableResizing: true,
+            minSize: 40,
+            cell: (cell) => _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 }),
+        },
+        manualSorting,
+        manualPagination,
+        manualFiltering,
+        globalFilterFn: fuzzyFilter,
+        onGlobalFilterChange,
+        onRowSelectionChange,
+        enableRowSelection: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable,
+        enableMultiRowSelection: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow,
+        enableFilters: true,
+        getFilteredRowModel: getFilteredRowModel(),
+        enableColumnResizing: true,
+        enableSorting: true,
+        enableMultiSort: true,
+        onSortingChange,
+        getSortedRowModel: getSortedRowModel(),
+        onPaginationChange,
+        getPaginationRowModel: getPaginationRowModel(),
+        getCoreRowModel: getCoreRowModel(),
+        columnResizeMode: 'onEnd',
+    });
+    return { table, tableColumns, columnPinning };
+}

package/dist/components/Table/styles.module.css

@@ -4,6 +4,7 @@
   position:relative;
   z-index:0;
   overflow:hidden !important;
+  display:flex;
   box-sizing:border-box;
   width:100%;
   height:auto;
@@ -47,4 +48,10 @@
 
 .wrapper{
   max-width:100%;
+}
+
+.scrollStub{
+  height:calc(var(--dimension-025m, 2px) / 2);
+  margin-top:calc(var(--dimension-025m, 2px) / -2);
+  background:transparent;
 }

package/dist/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Table';
 export * from './ServerTable';
+export * from './types';

package/dist/components/index.js

@@ -1,2 +1,3 @@
 export * from './Table';
 export * from './ServerTable';
+export * from './types';