@snack-uikit/table 0.14.7 → 0.14.9

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.14.9 (2024-02-28)
+
+### Only dependencies have been changed
+* [@snack-uikit/button@0.17.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/button/CHANGELOG.md)
+* [@snack-uikit/chips@0.12.2](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/chips/CHANGELOG.md)
+* [@snack-uikit/icon-predefined@0.5.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icon-predefined/CHANGELOG.md)
+* [@snack-uikit/info-block@0.3.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/info-block/CHANGELOG.md)
+* [@snack-uikit/list@0.6.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+* [@snack-uikit/pagination@0.6.5](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/pagination/CHANGELOG.md)
+* [@snack-uikit/toolbar@0.7.17](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toolbar/CHANGELOG.md)
+
+
+
+
+
+## 0.14.8 (2024-02-27)
+
+
+### Bug Fixes
+
+* **FF-3424:** fix table global search ([b5ebe5b](https://github.com/cloud-ru-tech/snack-uikit/commit/b5ebe5b227fbfaefdd1ce1dda858794f1ca546da))
+
+
+
+
+
 ## 0.14.7 (2024-02-27)
 
 ### Only dependencies have been changed

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 function onSearchDebounced(): import("lodash").DebouncedFunc<(newValue: string, onChange: (newValue: string) => void) => void>;
+export declare const onSearchDebounced: import("lodash").DebouncedFunc<(newValue: string, onChange: (newValue: string) => void) => void>;

package/dist/components/ServerTable/utils.js

@@ -1,7 +1,5 @@
 import debounce from 'lodash.debounce';
 import { SEARCH_DELAY } from './constants';
-export function onSearchDebounced() {
-    return debounce((newValue, onChange) => {
-        onChange(newValue);
-    }, SEARCH_DELAY);
-}
+export const onSearchDebounced = 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, 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 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 namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
     var statusAppearances: {

package/dist/components/Table/Table.js

@@ -10,31 +10,87 @@ 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, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, TableEmptyState, TablePagination, useEmptyState, } from '../../helperComponents';
-import { useLoadingTable, useTable } from './hooks';
+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 styles from './styles.module.css';
 /** Компонент таблицы */
 export function Table(_a) {
-    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({
+    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({
         data,
-        sorting,
-        manualFiltering,
-        manualPagination,
-        manualSorting,
-        columnDefinitions,
-        rowSelection,
-        pagination,
+        columns: tableColumns,
+        state: {
+            columnPinning,
+            globalFilter,
+            rowSelection,
+            sorting,
+            pagination,
+        },
         pageCount,
-        pageSize,
+        defaultColumn: {
+            enableSorting: false,
+            enableResizing: false,
+            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',
     });
     const { loadingTable } = useLoadingTable({ pageSize, columnDefinitions: tableColumns, columnPinning });
     const handleOnRefresh = useCallback(() => {
@@ -50,7 +106,7 @@ export function Table(_a) {
         }
     }, [loading, onDelete, table]);
     const handleOnCheck = useCallback(() => {
-        if (!loading && (rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.multiRow)) {
+        if (!loading && (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow)) {
             table.toggleAllPageRowsSelected();
             return;
         }
@@ -58,7 +114,7 @@ export function Table(_a) {
             table.resetRowSelection();
             return;
         }
-    }, [loading, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.multiRow, table]);
+    }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table]);
     useEffect(() => { }, []);
     const columnSizeVars = useMemo(() => {
         const originalColumnDefs = table._getColumnDefs();
@@ -92,16 +148,14 @@ 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: table.getState().globalFilter,
-                                onChange: table.setGlobalFilter,
+                                value: globalFilter,
+                                onChange: onGlobalFilterChange,
                                 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: (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 }))] })) }));
+                            }, 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: toolbarAfter || exportFileName ? (_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 }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

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

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

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

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

package/dist/helperComponents/Cells/HeaderCell/styles.module.css

@@ -24,7 +24,10 @@
 }
 
 .tableHeaderCell{
-  padding:var(--space-table-cell-padding, 8px);
+  padding-left:var(--space-table-head-column-horizontal-padding, 8px);
+  padding-right:var(--space-table-head-column-horizontal-padding, 8px);
+  padding-top:var(--space-table-head-separator-padding, 8px);
+  padding-bottom:var(--space-table-head-separator-padding, 8px);
   position:relative;
   display:flex;
   align-items:center;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.14.7",
+  "version": "0.14.9",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,18 +32,18 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.16.1",
-    "@snack-uikit/chips": "0.12.0",
-    "@snack-uikit/icon-predefined": "0.4.2",
+    "@snack-uikit/button": "0.17.0",
+    "@snack-uikit/chips": "0.12.2",
+    "@snack-uikit/icon-predefined": "0.5.0",
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/info-block": "0.3.0",
-    "@snack-uikit/list": "0.5.0",
-    "@snack-uikit/pagination": "0.6.4",
+    "@snack-uikit/info-block": "0.3.1",
+    "@snack-uikit/list": "0.6.1",
+    "@snack-uikit/pagination": "0.6.5",
     "@snack-uikit/scroll": "0.5.2",
     "@snack-uikit/skeleton": "0.3.3",
-    "@snack-uikit/tag": "0.8.0",
+    "@snack-uikit/tag": "0.8.1",
     "@snack-uikit/toggles": "0.9.6",
-    "@snack-uikit/toolbar": "0.7.15",
+    "@snack-uikit/toolbar": "0.7.17",
     "@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": "bfdd4a8e3c077eab0d45e177172a62b6dcbda06b"
+  "gitHead": "0054db0a5550fb69d388335d844017bca31fffe7"
 }

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

package/src/components/Table/Table.tsx

@@ -1,3 +1,15 @@
+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';
 
@@ -5,6 +17,7 @@ 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';
@@ -13,6 +26,7 @@ import {
   ExportButton,
   getColumnId,
   getRowActionsColumnDef,
+  getSelectionCellColumnDef,
   getStatusColumnDef,
   HeaderRow,
   STATUS_APPEARANCE,
@@ -21,19 +35,22 @@ import {
   TablePagination,
   useEmptyState,
 } from '../../helperComponents';
+import { ColumnDefinition } from '../../types';
+import { fuzzyFilter } from '../../utils';
 import { TableProps } from '../types';
-import { useLoadingTable, useTable } from './hooks';
+import { useLoadingTable } from './hooks';
+import { useStateControl } from './hooks/useStateControl';
 import styles from './styles.module.scss';
 
 /** Компонент таблицы */
 export function Table<TData extends object>({
   data,
   columnDefinitions,
-  rowSelection,
+  rowSelection: rowSelectionProp,
   search,
-  sorting,
+  sorting: sortingProp,
   columnFilters,
-  pagination,
+  pagination: paginationProp,
   className,
   onRowClick,
   onRefresh,
@@ -61,17 +78,84 @@ export function Table<TData extends object>({
 
   ...rest
 }: TableProps<TData>) {
-  const { table, tableColumns, columnPinning } = useTable<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,
-    sorting,
-    manualFiltering,
-    manualPagination,
-    manualSorting,
-    columnDefinitions,
-    rowSelection,
-    pagination,
+    columns: tableColumns,
+    state: {
+      columnPinning,
+      globalFilter,
+      rowSelection,
+      sorting,
+      pagination,
+    },
     pageCount,
-    pageSize,
+    defaultColumn: {
+      enableSorting: false,
+      enableResizing: false,
+      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',
   });
 
   const { loadingTable } = useLoadingTable({ pageSize, columnDefinitions: tableColumns, columnPinning });
@@ -92,7 +176,7 @@ export function Table<TData extends object>({
   }, [loading, onDelete, table]);
 
   const handleOnCheck = useCallback(() => {
-    if (!loading && rowSelection?.multiRow) {
+    if (!loading && rowSelectionProp?.multiRow) {
       table.toggleAllPageRowsSelected();
       return;
     }
@@ -101,7 +185,7 @@ export function Table<TData extends object>({
       table.resetRowSelection();
       return;
     }
-  }, [loading, rowSelection?.multiRow, table]);
+  }, [loading, rowSelectionProp?.multiRow, table]);
 
   useEffect(() => {}, []);
 
@@ -148,14 +232,11 @@ 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)}
@@ -164,8 +245,8 @@ export function Table<TData extends object>({
           <div className={styles.header}>
             <Toolbar
               search={{
-                value: table.getState().globalFilter,
-                onChange: table.setGlobalFilter,
+                value: globalFilter,
+                onChange: onGlobalFilterChange,
                 loading: search?.loading,
                 placeholder: search?.placeholder || t('searchPlaceholder'),
               }}
@@ -176,15 +257,17 @@ export function Table<TData extends object>({
               onDelete={enableSelection && onDelete ? handleOnDelete : undefined}
               onCheck={enableSelection ? handleOnCheck : undefined}
               outline={outline}
-              selectionMode={rowSelection?.multiRow ? 'multiple' : 'single'}
+              selectionMode={rowSelectionProp?.multiRow ? 'multiple' : 'single'}
               before={toolbarBefore}
               after={
-                <>
-                  {toolbarAfter}
-                  {exportFileName ? (
-                    <ExportButton fileName={exportFileName} columnDefinitions={columnDefinitions} data={data} />
-                  ) : undefined}
-                </>
+                toolbarAfter || exportFileName ? (
+                  <>
+                    {toolbarAfter}
+                    {exportFileName && (
+                      <ExportButton fileName={exportFileName} columnDefinitions={columnDefinitions} data={data} />
+                    )}
+                  </>
+                ) : undefined
               }
               moreActions={moreActions}
             />
@@ -228,8 +311,8 @@ export function Table<TData extends object>({
         {!suppressPagination && (
           <TablePagination
             table={table}
-            options={pagination?.options}
-            optionsLabel={pagination?.optionsLabel}
+            options={paginationProp?.options}
+            optionsLabel={paginationProp?.optionsLabel}
             pageCount={pageCount}
           />
         )}

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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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/src/components/Table/hooks/useTable.tsx

@@ -1,132 +0,0 @@
-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 };
-}