@snack-uikit/table 0.14.7-preview-da21d728.0 → 0.14.7

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.14.7 (2024-02-27)
+
+### Only dependencies have been changed
+* [@snack-uikit/list@0.5.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+* [@snack-uikit/toolbar@0.7.15](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toolbar/CHANGELOG.md)
+
+
+
+
+
 ## 0.14.6 (2024-02-26)
 
 

package/dist/components/ServerTable/ServerTable.js

@@ -23,7 +23,7 @@ export function ServerTable(_a) {
     const [tempSearch, setTempSearch] = useState(search || '');
     const handleSearch = useCallback((newValue) => {
         setTempSearch(newValue);
-        onSearchDebounced(newValue.trim(), setSearch);
+        onSearchDebounced()(newValue.trim(), setSearch);
     }, [setSearch]);
     const handlePageChange = useCallback(({ pageSize, pageIndex }) => onChangePage(pageIndex * pageSize, pageSize), [onChangePage]);
     const pageIndex = useMemo(() => Math.floor(offset / limit), [limit, offset]);

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

@@ -1,2 +1,2 @@
 /// <reference types="lodash" />
-export declare const onSearchDebounced: import("lodash").DebouncedFunc<(newValue: string, onChange: (newValue: string) => void) => void>;
+export declare function onSearchDebounced(): import("lodash").DebouncedFunc<(newValue: string, onChange: (newValue: string) => void) => void>;

package/dist/components/ServerTable/utils.js

@@ -1,5 +1,7 @@
 import debounce from 'lodash.debounce';
 import { SEARCH_DELAY } from './constants';
-export const onSearchDebounced = debounce((newValue, onChange) => {
-    onChange(newValue);
-}, SEARCH_DELAY);
+export function onSearchDebounced() {
+    return debounce((newValue, onChange) => {
+        onChange(newValue);
+    }, SEARCH_DELAY);
+}

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

@@ -1,6 +1,6 @@
 import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object>({ data, columnDefinitions, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, 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 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

@@ -10,87 +10,31 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
 import cn from 'classnames';
 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, TableEmptyState, TablePagination, useEmptyState, } from '../../helperComponents';
-import { fuzzyFilter } from '../../utils';
-import { useLoadingTable } from './hooks';
-import { useStateControl } from './hooks/useStateControl';
+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, 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, 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 { 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,
-        },
-        pageCount,
-        defaultColumn: {
-            enableSorting: false,
-            enableResizing: false,
-            minSize: 40,
-            cell: (cell) => _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 }),
-        },
-        manualSorting,
-        manualPagination,
+        sorting,
         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',
+        manualPagination,
+        manualSorting,
+        columnDefinitions,
+        rowSelection,
+        pagination,
+        pageCount,
+        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,7 @@ 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();
@@ -148,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: _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: 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

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

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

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

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/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.14.7-preview-da21d728.0",
+  "version": "0.14.7",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,17 +33,17 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.16.1",
-    "@snack-uikit/chips": "0.12.1-preview-da21d728.0",
+    "@snack-uikit/chips": "0.12.0",
     "@snack-uikit/icon-predefined": "0.4.2",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/info-block": "0.3.0",
-    "@snack-uikit/list": "0.4.2-preview-da21d728.0",
+    "@snack-uikit/list": "0.5.0",
     "@snack-uikit/pagination": "0.6.4",
     "@snack-uikit/scroll": "0.5.2",
     "@snack-uikit/skeleton": "0.3.3",
-    "@snack-uikit/tag": "0.8.1-preview-da21d728.0",
+    "@snack-uikit/tag": "0.8.0",
     "@snack-uikit/toggles": "0.9.6",
-    "@snack-uikit/toolbar": "0.7.15-preview-da21d728.0",
+    "@snack-uikit/toolbar": "0.7.15",
     "@snack-uikit/truncate-string": "0.4.9",
     "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
@@ -58,5 +58,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "9451c0c01e3175ef35d07864f3189c690f73c268"
+  "gitHead": "bfdd4a8e3c077eab0d45e177172a62b6dcbda06b"
 }

package/src/components/ServerTable/ServerTable.tsx

@@ -31,7 +31,7 @@ export function ServerTable<TData extends object>({
   const handleSearch = useCallback(
     (newValue: string) => {
       setTempSearch(newValue);
-      onSearchDebounced(newValue.trim(), setSearch);
+      onSearchDebounced()(newValue.trim(), setSearch);
     },
 
     [setSearch],

package/src/components/ServerTable/utils.ts

@@ -2,6 +2,8 @@ import debounce from 'lodash.debounce';
 
 import { SEARCH_DELAY } from './constants';
 
-export const onSearchDebounced = debounce((newValue: string, onChange: (newValue: string) => void) => {
-  onChange(newValue);
-}, SEARCH_DELAY);
+export function onSearchDebounced() {
+  return debounce((newValue: string, onChange: (newValue: string) => void) => {
+    onChange(newValue);
+  }, SEARCH_DELAY);
+}

package/src/components/Table/Table.tsx

@@ -1,15 +1,3 @@
-import {
-  CellContext,
-  ColumnPinningState,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  PaginationState,
-  RowSelectionState,
-  SortingState,
-  useReactTable,
-} from '@tanstack/react-table';
 import cn from 'classnames';
 import { RefObject, useCallback, useEffect, useMemo } from 'react';
 
@@ -17,7 +5,6 @@ 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';
@@ -26,7 +13,6 @@ import {
   ExportButton,
   getColumnId,
   getRowActionsColumnDef,
-  getSelectionCellColumnDef,
   getStatusColumnDef,
   HeaderRow,
   STATUS_APPEARANCE,
@@ -35,22 +21,19 @@ import {
   TablePagination,
   useEmptyState,
 } from '../../helperComponents';
-import { ColumnDefinition } from '../../types';
-import { fuzzyFilter } from '../../utils';
 import { TableProps } from '../types';
-import { useLoadingTable } from './hooks';
-import { useStateControl } from './hooks/useStateControl';
+import { useLoadingTable, useTable } from './hooks';
 import styles from './styles.module.scss';
 
 /** Компонент таблицы */
 export function Table<TData extends object>({
   data,
   columnDefinitions,
-  rowSelection: rowSelectionProp,
+  rowSelection,
   search,
-  sorting: sortingProp,
+  sorting,
   columnFilters,
-  pagination: paginationProp,
+  pagination,
   className,
   onRowClick,
   onRefresh,
@@ -78,84 +61,17 @@ export function Table<TData extends object>({
 
   ...rest
 }: TableProps<TData>) {
-  const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl<string>(search, '');
-  const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl<RowSelectionState>(
-    rowSelectionProp,
-    {},
-  );
-  const defaultPaginationState = useMemo(
-    () => ({
-      pageIndex: 0,
-      pageSize,
-    }),
-    [pageSize],
-  );
-
-  const { state: sorting, onStateChange: onSortingChange } = useStateControl<SortingState>(sortingProp, []);
-  const { state: pagination, onStateChange: onPaginationChange } = useStateControl<PaginationState>(
-    paginationProp,
-    defaultPaginationState,
-  );
-  const enableSelection = Boolean(rowSelectionProp?.enable);
-
-  const tableColumns: ColumnDefinition<TData>[] = useMemo(() => {
-    let cols: ColumnDefinition<TData>[] = columnDefinitions;
-    if (enableSelection) {
-      cols = [getSelectionCellColumnDef(), ...cols];
-    }
-    return cols;
-  }, [columnDefinitions, enableSelection]);
-  const columnPinning = useMemo(() => {
-    const pinningState: Required<ColumnPinningState> = { left: [], right: [] };
-    for (const col of tableColumns) {
-      const id = getColumnId(col);
-      if (col.pinned && id) {
-        pinningState[col.pinned]?.push(id);
-      }
-    }
-    return pinningState;
-  }, [tableColumns]);
-
-  const table = useReactTable<TData>({
+  const { table, tableColumns, columnPinning } = useTable<TData>({
     data,
-    columns: tableColumns,
-    state: {
-      columnPinning,
-      globalFilter,
-      rowSelection,
-      sorting,
-      pagination,
-    },
-    pageCount,
-    defaultColumn: {
-      enableSorting: false,
-      enableResizing: false,
-      minSize: 40,
-      cell: (cell: CellContext<TData, unknown>) => <TruncateString text={String(cell.getValue())} maxLines={1} />,
-    },
-
-    manualSorting,
-    manualPagination,
+    sorting,
     manualFiltering,
-
-    globalFilterFn: fuzzyFilter,
-    onGlobalFilterChange,
-
-    onRowSelectionChange,
-    enableRowSelection: rowSelectionProp?.enable,
-    enableMultiRowSelection: rowSelectionProp?.multiRow,
-    enableFilters: true,
-    getFilteredRowModel: getFilteredRowModel(),
-    enableColumnResizing: true,
-    enableSorting: true,
-    enableMultiSort: true,
-    onSortingChange,
-    getSortedRowModel: getSortedRowModel(),
-    onPaginationChange,
-    getPaginationRowModel: getPaginationRowModel(),
-    getCoreRowModel: getCoreRowModel(),
-
-    columnResizeMode: 'onEnd',
+    manualPagination,
+    manualSorting,
+    columnDefinitions,
+    rowSelection,
+    pagination,
+    pageCount,
+    pageSize,
   });
 
   const { loadingTable } = useLoadingTable({ pageSize, columnDefinitions: tableColumns, columnPinning });
@@ -176,7 +92,7 @@ export function Table<TData extends object>({
   }, [loading, onDelete, table]);
 
   const handleOnCheck = useCallback(() => {
-    if (!loading && rowSelectionProp?.multiRow) {
+    if (!loading && rowSelection?.multiRow) {
       table.toggleAllPageRowsSelected();
       return;
     }
@@ -185,7 +101,7 @@ export function Table<TData extends object>({
       table.resetRowSelection();
       return;
     }
-  }, [loading, rowSelectionProp?.multiRow, table]);
+  }, [loading, rowSelection?.multiRow, table]);
 
   useEffect(() => {}, []);
 
@@ -232,11 +148,14 @@ export function Table<TData extends object>({
     return !tableRows.length ? Math.min(Math.max(tempPageSize, 5), DEFAULT_PAGE_SIZE) : tempPageSize;
   }, [pageSize, suppressPagination, tablePagination?.pageSize, tableRows.length]);
 
+  const enableSelection = Boolean(rowSelection?.enable);
+
   return (
     <>
       <div
         style={{
           '--page-size': cssPageSize,
+          // width: table.getTotalSize(),
         }}
         className={cn(styles.wrapper, className)}
         {...extractSupportProps(rest)}
@@ -245,8 +164,8 @@ export function Table<TData extends object>({
           <div className={styles.header}>
             <Toolbar
               search={{
-                value: globalFilter,
-                onChange: onGlobalFilterChange,
+                value: table.getState().globalFilter,
+                onChange: table.setGlobalFilter,
                 loading: search?.loading,
                 placeholder: search?.placeholder || t('searchPlaceholder'),
               }}
@@ -257,7 +176,7 @@ export function Table<TData extends object>({
               onDelete={enableSelection && onDelete ? handleOnDelete : undefined}
               onCheck={enableSelection ? handleOnCheck : undefined}
               outline={outline}
-              selectionMode={rowSelectionProp?.multiRow ? 'multiple' : 'single'}
+              selectionMode={rowSelection?.multiRow ? 'multiple' : 'single'}
               before={toolbarBefore}
               after={
                 <>
@@ -309,8 +228,8 @@ export function Table<TData extends object>({
         {!suppressPagination && (
           <TablePagination
             table={table}
-            options={paginationProp?.options}
-            optionsLabel={paginationProp?.optionsLabel}
+            options={pagination?.options}
+            optionsLabel={pagination?.optionsLabel}
             pageCount={pageCount}
           />
         )}

package/src/components/Table/hooks/index.ts

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

package/src/components/Table/hooks/useTable.tsx

@@ -0,0 +1,132 @@
+import {
+  CellContext,
+  ColumnPinningState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  RowSelectionState,
+  SortingState,
+  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 { ColumnDefinition } from '../../../types';
+import { fuzzyFilter } from '../../../utils';
+import { TableProps } from '../../types';
+import { useStateControl } from './useStateControl';
+
+type UseTableProps<TData extends object> = Pick<
+  TableProps<TData>,
+  | 'search'
+  | 'rowSelection'
+  | 'sorting'
+  | 'pagination'
+  | 'pageSize'
+  | 'columnDefinitions'
+  | 'data'
+  | 'manualFiltering'
+  | 'manualSorting'
+  | 'manualPagination'
+  | 'pageCount'
+>;
+
+export function useTable<TData extends object>({
+  search,
+  pageSize = DEFAULT_PAGE_SIZE,
+  pagination: paginationProp,
+  rowSelection: rowSelectionProp,
+  sorting: sortingProp,
+  columnDefinitions,
+  manualFiltering,
+  manualPagination,
+  manualSorting,
+  pageCount,
+  data,
+}: UseTableProps<TData>) {
+  const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl<string>(search, '');
+  const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl<RowSelectionState>(
+    rowSelectionProp,
+    {},
+  );
+  const defaultPaginationState = useMemo(
+    () => ({
+      pageIndex: 0,
+      pageSize,
+    }),
+    [pageSize],
+  );
+
+  const { state: sorting, onStateChange: onSortingChange } = useStateControl<SortingState>(sortingProp, []);
+  const { state: pagination, onStateChange: onPaginationChange } = useStateControl<PaginationState>(
+    paginationProp,
+    defaultPaginationState,
+  );
+  const enableSelection = Boolean(rowSelectionProp?.enable);
+  const tableColumns: ColumnDefinition<TData>[] = useMemo(() => {
+    let cols: ColumnDefinition<TData>[] = columnDefinitions;
+    if (enableSelection) {
+      cols = [getSelectionCellColumnDef(), ...cols];
+    }
+    return cols;
+  }, [columnDefinitions, enableSelection]);
+  const columnPinning = useMemo(() => {
+    const pinningState: Required<ColumnPinningState> = { left: [], right: [] };
+    for (const col of tableColumns) {
+      const id = getColumnId(col);
+      if (col.pinned && id) {
+        pinningState[col.pinned]?.push(id);
+      }
+    }
+    return pinningState;
+  }, [tableColumns]);
+
+  const table = useReactTable<TData>({
+    data,
+    columns: tableColumns,
+    state: {
+      columnPinning,
+      globalFilter,
+      rowSelection,
+      sorting,
+      pagination,
+    },
+    pageCount,
+    defaultColumn: {
+      enableSorting: true,
+      enableResizing: true,
+      minSize: 40,
+      cell: (cell: CellContext<TData, unknown>) => <TruncateString text={String(cell.getValue())} maxLines={1} />,
+    },
+
+    manualSorting,
+    manualPagination,
+    manualFiltering,
+
+    globalFilterFn: fuzzyFilter,
+    onGlobalFilterChange,
+
+    onRowSelectionChange,
+    enableRowSelection: rowSelectionProp?.enable,
+    enableMultiRowSelection: 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 };
+}