@snack-uikit/table 0.27.3 → 0.28.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.28.0 (2025-02-05)
+
+
+### BREAKING CHANGES
+
+
+* **PDS-1081:** change columnFilters type to ChipChoiceRowProps, add suppressSearch prop ([5fb3278](https://github.com/cloud-ru-tech/snack-uikit/commit/5fb327801a846d837346773ed7d4747e78832b19))
+
+
+
+
 ## 0.27.3 (2025-02-04)
 
 ### Only dependencies have been changed

package/README.md

@@ -128,13 +128,14 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | loading | `boolean` | - | Состояние загрузки |
 | onRefresh | `() => void` | - | Колбек обновления данных |
 | outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
-| columnFilters | `ReactNode` | - | Фильтры |
-| dataFiltered | `boolean` | - |  |
-| dataError | `boolean` | - |  |
+| columnFilters | `ChipChoiceRowProps<TFilters>` | - | Фильтры |
+| dataFiltered | `boolean` | - | Флаг, показывающий что данные были отфильтрованы при пустых данных |
+| dataError | `boolean` | - | Флаг, показывающий что произошла ошибка запроса при пустых данных |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
 | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
 | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
 | suppressToolbar | `boolean` | - | Отключение тулбара |
+| suppressSearch | `boolean` | - | Отключение поиска |
 | bulkActions | `BulkAction[]` | - | Список действия для массовых операций |
 | moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 | toolbarAfter | `ReactNode` | - | Дополнительный слот в `Toolbar` после строки поиска |
@@ -188,13 +189,14 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | loading | `boolean` | - | Состояние загрузки |
 | onRefresh | `() => void` | - | Колбек обновления данных |
 | outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
-| columnFilters | `ReactNode` | - | Фильтры |
-| dataFiltered | `boolean` | - |  |
-| dataError | `boolean` | - |  |
+| columnFilters | `ChipChoiceRowProps<TFilters>` | - | Фильтры |
+| dataFiltered | `boolean` | - | Флаг, показывающий что данные были отфильтрованы при пустых данных |
+| dataError | `boolean` | - | Флаг, показывающий что произошла ошибка запроса при пустых данных |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
 | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
 | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
 | suppressToolbar | `boolean` | - | Отключение тулбара |
+| suppressSearch | `boolean` | - | Отключение поиска |
 | bulkActions | `BulkAction[]` | - | Список действия для массовых операций |
 | moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 | toolbarAfter | `ReactNode` | - | Дополнительный слот в `Toolbar` после строки поиска |

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

@@ -1,5 +1,6 @@
+import { FiltersState } from '@snack-uikit/chips';
 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 function ServerTable<TData extends object, TFilters extends FiltersState>({ items, total, limit, offset, onChangePage, search: searchProp, pagination, columnFilters, manualSorting, manualPagination, manualFiltering, ...rest }: ServerTableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ServerTable {
     var getRowActionsColumnDef: typeof import("../../helperComponents").getRowActionsColumnDef;
     var statusAppearances: Record<string, string>;

package/dist/cjs/components/ServerTable/ServerTable.js

@@ -20,7 +20,6 @@ const hooks_1 = require("../Table/hooks");
 const constants_1 = require("./constants");
 const utils_1 = require("./utils");
 function ServerTable(_a) {
-  // добавить uncontrolledState
   var {
       items,
       total = constants_1.DEFAULT_PAGINATION_LIMIT,

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

@@ -1,6 +1,7 @@
+import { FiltersState } from '@snack-uikit/chips';
 import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object, TFilters extends FiltersState>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
     var statusAppearances: Record<string, string>;

package/dist/cjs/components/Table/Table.js

@@ -67,6 +67,7 @@ function Table(_a) {
       noResultsState,
       errorDataState,
       suppressToolbar = false,
+      suppressSearch = false,
       toolbarAfter,
       suppressPagination = false,
       manualSorting = false,
@@ -81,7 +82,7 @@ function Table(_a) {
       expanding,
       bulkActions: bulkActionsProp
     } = _a,
-    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions"]);
+    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions"]);
   const {
     state: globalFilter,
     onStateChange: onGlobalFilterChange
@@ -239,8 +240,7 @@ function Table(_a) {
       } = (0, utils_3.getColumnStyleVars)(header.id);
       const originalColDef = originalColumnDefs.find(col => (0, helperComponents_1.getColumnId)(header) === col.id);
       if (header.id === 'snack_predefined_statusColumn' && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.header) && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableSorting)) {
-        const indicatorSize = 'var(--size-table-cell-status-indicator-horizontal)';
-        colSizes[sizeKey] = indicatorSize;
+        colSizes[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
         colSizes[flexKey] = '100%';
       } else {
         const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
@@ -323,6 +323,7 @@ function Table(_a) {
   const {
     updateCellMap
   } = (0, contexts_1.useCellAutoResizeController)(table);
+  const showToolbar = !suppressToolbar;
   return (0, jsx_runtime_1.jsx)(contexts_1.CellAutoResizeContext.Provider, {
     value: {
       updateCellMap
@@ -333,10 +334,10 @@ function Table(_a) {
       },
       className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className)
     }, (0, utils_1.extractSupportProps)(rest), {
-      children: [!suppressToolbar && (0, jsx_runtime_1.jsxs)("div", {
+      children: [showToolbar && (0, jsx_runtime_1.jsx)("div", {
         className: styles_module_scss_1.default.header,
-        children: [(0, jsx_runtime_1.jsx)(toolbar_1.Toolbar, {
-          search: {
+        children: (0, jsx_runtime_1.jsx)(toolbar_1.Toolbar, {
+          search: suppressSearch ? undefined : {
             value: globalFilter,
             onChange: onGlobalFilterChange,
             loading: search === null || search === void 0 ? void 0 : search.loading,
@@ -359,11 +360,10 @@ function Table(_a) {
               centerRows: centerRows
             })]
           }) : undefined,
-          moreActions: moreActions
-        }), columnFilters && (0, jsx_runtime_1.jsxs)("div", {
-          className: styles_module_scss_1.default.filtersWrapper,
-          children: [" ", columnFilters, " "]
-        })]
+          moreActions: moreActions,
+          filterRow: columnFilters,
+          "data-test-id": constants_1.TEST_IDS.toolbar
+        })
       }), (0, jsx_runtime_1.jsx)("div", {
         className: styles_module_scss_1.default.scrollWrapper,
         "data-outline": outline || undefined,

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

@@ -59,7 +59,7 @@
 .topRowWrapper{
   position:sticky;
   z-index:3;
-  top:calc(var(--size-table-line-height, 40px));
+  top:var(--size-table-line-height, 40px);
   margin-bottom:calc(-1 * var(--border-width-table, 1px));
   border-bottom:var(--border-width-table, 1px) solid var(--sys-neutral-decor-default, #dde0ea);
 }

package/dist/cjs/components/types.d.ts

@@ -1,14 +1,15 @@
 import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
 import { ReactNode, RefObject } from 'react';
+import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
 import { TreeColumnDefinitionProps } from '../helperComponents/Cells/TreeCell';
 import { ColumnDefinition } from '../types';
-type BulkAction = Omit<NonNullable<ToolbarProps['bulkActions']>[number], 'onClick'> & {
+type BulkAction = Omit<NonNullable<ToolbarProps<Record<string, string>>['bulkActions']>[number], 'onClick'> & {
     onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
 };
-export type TableProps<TData extends object> = WithSupportProps<{
+export type TableProps<TData extends object, TFilters extends FiltersState> = WithSupportProps<{
     /** Данные для отрисовки */
     data: TData[];
     /** Определение внешнего вида и функционала колонок */
@@ -97,8 +98,10 @@ export type TableProps<TData extends object> = WithSupportProps<{
     /** Внешний бордер для тулбара и таблицы */
     outline?: boolean;
     /** Фильтры */
-    columnFilters?: ReactNode;
+    columnFilters?: ChipChoiceRowProps<TFilters>;
+    /** Флаг, показывающий что данные были отфильтрованы при пустых данных */
     dataFiltered?: boolean;
+    /** Флаг, показывающий что произошла ошибка запроса при пустых данных */
     dataError?: boolean;
     /** Экран при отстутствии данных */
     noDataState?: EmptyStateProps;
@@ -108,10 +111,12 @@ export type TableProps<TData extends object> = WithSupportProps<{
     errorDataState?: EmptyStateProps;
     /** Отключение тулбара */
     suppressToolbar?: boolean;
+    /** Отключение поиска */
+    suppressSearch?: boolean;
     /** Список действия для массовых операций */
     bulkActions?: BulkAction[];
     /** Элементы выпадающего списка кнопки с действиями */
-    moreActions?: ToolbarProps['moreActions'];
+    moreActions?: ToolbarProps<TFilters>['moreActions'];
     /** Дополнительный слот в `Toolbar` после строки поиска */
     toolbarAfter?: ReactNode;
     /** Настройки экспорта в тулбаре */
@@ -138,7 +143,7 @@ export type TableProps<TData extends object> = WithSupportProps<{
         resize?: boolean;
     };
 }>;
-export type ServerTableProps<TData extends object> = Omit<TableProps<TData>, 'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'> & {
+export type ServerTableProps<TData extends object, TFilters extends FiltersState> = Omit<TableProps<TData, TFilters>, 'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'> & {
     /** Данные для отрисовки */
     items?: TData[];
     /**

package/dist/cjs/constants.d.ts

@@ -28,6 +28,7 @@ export declare const TEST_IDS: {
     };
     statusIndicator: string;
     statusLabel: string;
+    toolbar: string;
 };
 export declare const SORT_FN: {
     readonly DateTime: "datetime";

package/dist/cjs/constants.js

@@ -33,7 +33,8 @@ exports.TEST_IDS = {
     option: 'list__base-item-option'
   },
   statusIndicator: 'table__status-indicator',
-  statusLabel: 'table__status-label'
+  statusLabel: 'table__status-label',
+  toolbar: 'table__toolbar'
 };
 exports.SORT_FN = {
   DateTime: 'datetime',

package/dist/cjs/helperComponents/TablePagination/TablePagination.js

@@ -55,7 +55,6 @@ function TablePagination(_ref) {
       options: options,
       label: optionsLabel,
       widthStrategy: 'auto',
-      showClearButton: false,
       size: 'xs'
     })]
   });

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

@@ -1,5 +1,6 @@
+import { FiltersState } from '@snack-uikit/chips';
 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 function ServerTable<TData extends object, TFilters extends FiltersState>({ items, total, limit, offset, onChangePage, search: searchProp, pagination, columnFilters, manualSorting, manualPagination, manualFiltering, ...rest }: ServerTableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ServerTable {
     var getRowActionsColumnDef: typeof import("../../helperComponents").getRowActionsColumnDef;
     var statusAppearances: Record<string, string>;

package/dist/esm/components/ServerTable/ServerTable.js

@@ -17,7 +17,6 @@ import { useStateControl } from '../Table/hooks';
 import { DEFAULT_PAGINATION_LIMIT } from './constants';
 import { onSearchDebounced } from './utils';
 export function ServerTable(_a) {
-    // добавить 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 { state: search, onStateChange: setSearch } = useStateControl(searchProp, '');
     const [tempSearch, setTempSearch] = useState(search || '');

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

@@ -1,6 +1,7 @@
+import { FiltersState } from '@snack-uikit/chips';
 import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object, TFilters extends FiltersState>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
     var statusAppearances: Record<string, string>;

package/dist/esm/components/Table/Table.js

@@ -19,7 +19,7 @@ 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 { DEFAULT_PAGE_SIZE, TEST_IDS } from '../../constants';
 import { CellAutoResizeContext, useCellAutoResizeController } from '../../contexts';
 import { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getSelectionCellColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, TableEmptyState, TablePagination, useEmptyState, } from '../../helperComponents';
 import { getTreeColumnDef } from '../../helperComponents/Cells/TreeCell';
@@ -32,7 +32,7 @@ import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSiz
 export function Table(_a) {
     var { data, rowPinning = {
         top: [],
-    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions"]);
+    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, suppressSearch = false, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -163,8 +163,7 @@ export function Table(_a) {
             const { sizeKey, flexKey } = getColumnStyleVars(header.id);
             const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
             if (header.id === 'snack_predefined_statusColumn' && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.header) && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableSorting)) {
-                const indicatorSize = 'var(--size-table-cell-status-indicator-horizontal)';
-                colSizes[sizeKey] = indicatorSize;
+                colSizes[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
                 colSizes[flexKey] = '100%';
             }
             else {
@@ -235,14 +234,17 @@ export function Table(_a) {
         autoResetPageIndex,
     });
     const { updateCellMap } = useCellAutoResizeController(table);
+    const showToolbar = !suppressToolbar;
     return (_jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsxs("div", Object.assign({ style: {
                 '--page-size': cssPageSize,
-            }, className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [!suppressToolbar && (_jsxs("div", { className: styles.header, children: [_jsx(Toolbar, { search: {
+            }, className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [showToolbar && (_jsx("div", { className: styles.header, children: _jsx(Toolbar, { search: suppressSearch
+                            ? undefined
+                            : {
                                 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'),
-                            }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : 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: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.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 + filteredTopRows.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, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
+                            }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _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: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.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 + filteredTopRows.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, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

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

@@ -59,7 +59,7 @@
 .topRowWrapper{
   position:sticky;
   z-index:3;
-  top:calc(var(--size-table-line-height, 40px));
+  top:var(--size-table-line-height, 40px);
   margin-bottom:calc(-1 * var(--border-width-table, 1px));
   border-bottom:var(--border-width-table, 1px) solid var(--sys-neutral-decor-default, #dde0ea);
 }

package/dist/esm/components/types.d.ts

@@ -1,14 +1,15 @@
 import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
 import { ReactNode, RefObject } from 'react';
+import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
 import { TreeColumnDefinitionProps } from '../helperComponents/Cells/TreeCell';
 import { ColumnDefinition } from '../types';
-type BulkAction = Omit<NonNullable<ToolbarProps['bulkActions']>[number], 'onClick'> & {
+type BulkAction = Omit<NonNullable<ToolbarProps<Record<string, string>>['bulkActions']>[number], 'onClick'> & {
     onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
 };
-export type TableProps<TData extends object> = WithSupportProps<{
+export type TableProps<TData extends object, TFilters extends FiltersState> = WithSupportProps<{
     /** Данные для отрисовки */
     data: TData[];
     /** Определение внешнего вида и функционала колонок */
@@ -97,8 +98,10 @@ export type TableProps<TData extends object> = WithSupportProps<{
     /** Внешний бордер для тулбара и таблицы */
     outline?: boolean;
     /** Фильтры */
-    columnFilters?: ReactNode;
+    columnFilters?: ChipChoiceRowProps<TFilters>;
+    /** Флаг, показывающий что данные были отфильтрованы при пустых данных */
     dataFiltered?: boolean;
+    /** Флаг, показывающий что произошла ошибка запроса при пустых данных */
     dataError?: boolean;
     /** Экран при отстутствии данных */
     noDataState?: EmptyStateProps;
@@ -108,10 +111,12 @@ export type TableProps<TData extends object> = WithSupportProps<{
     errorDataState?: EmptyStateProps;
     /** Отключение тулбара */
     suppressToolbar?: boolean;
+    /** Отключение поиска */
+    suppressSearch?: boolean;
     /** Список действия для массовых операций */
     bulkActions?: BulkAction[];
     /** Элементы выпадающего списка кнопки с действиями */
-    moreActions?: ToolbarProps['moreActions'];
+    moreActions?: ToolbarProps<TFilters>['moreActions'];
     /** Дополнительный слот в `Toolbar` после строки поиска */
     toolbarAfter?: ReactNode;
     /** Настройки экспорта в тулбаре */
@@ -138,7 +143,7 @@ export type TableProps<TData extends object> = WithSupportProps<{
         resize?: boolean;
     };
 }>;
-export type ServerTableProps<TData extends object> = Omit<TableProps<TData>, 'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'> & {
+export type ServerTableProps<TData extends object, TFilters extends FiltersState> = Omit<TableProps<TData, TFilters>, 'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'> & {
     /** Данные для отрисовки */
     items?: TData[];
     /**

package/dist/esm/constants.d.ts

@@ -28,6 +28,7 @@ export declare const TEST_IDS: {
     };
     statusIndicator: string;
     statusLabel: string;
+    toolbar: string;
 };
 export declare const SORT_FN: {
     readonly DateTime: "datetime";

package/dist/esm/constants.js

@@ -28,6 +28,7 @@ export const TEST_IDS = {
     },
     statusIndicator: 'table__status-indicator',
     statusLabel: 'table__status-label',
+    toolbar: 'table__toolbar',
 };
 export const SORT_FN = {
     DateTime: 'datetime',

package/dist/esm/helperComponents/TablePagination/TablePagination.js

@@ -21,5 +21,5 @@ export function TablePagination({ table, options: optionsProp, optionsLabel: opt
     if (table.getPageCount() <= 1 && !options) {
         return null;
     }
-    return (_jsxs("div", { className: styles.footer, children: [table.getPageCount() > 1 && (_jsx(Pagination, { total: table.getPageCount(), page: tablePaginationState.pageIndex + 1, onChange: handlePaginationOnChange, size: 'xs', className: styles.pagination })), options && table.getRowModel().rows.length >= Number(options[0].value) && (_jsx(ChipChoice.Single, { value: String(tablePaginationState.pageSize), onChange: handleRowsVolumeOnChange, placement: 'top-end', options: options, label: optionsLabel, widthStrategy: 'auto', showClearButton: false, size: 'xs' }))] }));
+    return (_jsxs("div", { className: styles.footer, children: [table.getPageCount() > 1 && (_jsx(Pagination, { total: table.getPageCount(), page: tablePaginationState.pageIndex + 1, onChange: handlePaginationOnChange, size: 'xs', className: styles.pagination })), options && table.getRowModel().rows.length >= Number(options[0].value) && (_jsx(ChipChoice.Single, { value: String(tablePaginationState.pageSize), onChange: handleRowsVolumeOnChange, placement: 'top-end', options: options, label: optionsLabel, widthStrategy: 'auto', size: 'xs' }))] }));
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.27.3",
+  "version": "0.28.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,17 +36,17 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.6",
-    "@snack-uikit/chips": "0.24.3",
+    "@snack-uikit/button": "0.19.7",
+    "@snack-uikit/chips": "0.25.0",
     "@snack-uikit/icon-predefined": "0.7.3",
     "@snack-uikit/icons": "0.24.2",
-    "@snack-uikit/info-block": "0.6.10",
-    "@snack-uikit/list": "0.24.1",
-    "@snack-uikit/pagination": "0.10.1",
+    "@snack-uikit/info-block": "0.6.11",
+    "@snack-uikit/list": "0.24.2",
+    "@snack-uikit/pagination": "0.10.2",
     "@snack-uikit/scroll": "0.9.3",
     "@snack-uikit/skeleton": "0.6.2",
     "@snack-uikit/toggles": "0.13.5",
-    "@snack-uikit/toolbar": "0.10.3",
+    "@snack-uikit/toolbar": "0.11.0",
     "@snack-uikit/truncate-string": "0.6.7",
     "@snack-uikit/typography": "0.8.4",
     "@snack-uikit/utils": "3.7.0",
@@ -61,5 +61,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "4beda461fbd94378a1534458d7942270226a39ef"
+  "gitHead": "70bed6c518009afe4292cb9d12baf08a16700781"
 }

package/src/components/ServerTable/ServerTable.tsx

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { FiltersState } from '@snack-uikit/chips';
+
 import { STATUS_APPEARANCE } from '../../helperComponents';
 import { PaginationState } from '../../types';
 import { Table } from '../Table';
@@ -8,7 +10,7 @@ import { ServerTableProps } from '../types';
 import { DEFAULT_PAGINATION_LIMIT } from './constants';
 import { onSearchDebounced } from './utils';
 
-export function ServerTable<TData extends object>({
+export function ServerTable<TData extends object, TFilters extends FiltersState>({
   items,
   total = DEFAULT_PAGINATION_LIMIT,
   limit = DEFAULT_PAGINATION_LIMIT,
@@ -21,9 +23,7 @@ export function ServerTable<TData extends object>({
   manualPagination = true,
   manualFiltering = true,
   ...rest
-}: ServerTableProps<TData>) {
-  // добавить uncontrolledState
-
+}: ServerTableProps<TData, TFilters>) {
   const { state: search, onStateChange: setSearch } = useStateControl<string>(searchProp, '');
 
   const [tempSearch, setTempSearch] = useState(search || '');

package/src/components/Table/Table.tsx

@@ -15,6 +15,7 @@ import {
 import cn from 'classnames';
 import { RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
 
+import { FiltersState } from '@snack-uikit/chips';
 import { useLocale } from '@snack-uikit/locale';
 import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
@@ -22,7 +23,7 @@ import { Toolbar, ToolbarProps } from '@snack-uikit/toolbar';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 
-import { DEFAULT_PAGE_SIZE } from '../../constants';
+import { DEFAULT_PAGE_SIZE, TEST_IDS } from '../../constants';
 import { CellAutoResizeContext, useCellAutoResizeController } from '../../contexts';
 import {
   BodyRow,
@@ -53,7 +54,7 @@ import {
 } from './utils';
 
 /** Компонент таблицы */
-export function Table<TData extends object>({
+export function Table<TData extends object, TFilters extends FiltersState>({
   data,
   rowPinning = {
     top: [],
@@ -82,6 +83,7 @@ export function Table<TData extends object>({
   noResultsState,
   errorDataState,
   suppressToolbar = false,
+  suppressSearch = false,
   toolbarAfter,
   suppressPagination = false,
   manualSorting = false,
@@ -96,7 +98,7 @@ export function Table<TData extends object>({
   expanding,
   bulkActions: bulkActionsProp,
   ...rest
-}: TableProps<TData>) {
+}: TableProps<TData, TFilters>) {
   const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl<string>(search, '');
   const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl<RowSelectionState>(
     rowSelectionProp,
@@ -218,7 +220,7 @@ export function Table<TData extends object>({
     onRefresh?.();
   }, [onRefresh, table]);
 
-  const bulkActions: ToolbarProps['bulkActions'] = useMemo(
+  const bulkActions: ToolbarProps<TFilters>['bulkActions'] = useMemo(
     () =>
       enableSelection
         ? bulkActionsProp?.map(action => ({
@@ -264,9 +266,7 @@ export function Table<TData extends object>({
       const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
 
       if (header.id === 'snack_predefined_statusColumn' && !originalColDef?.header && !originalColDef?.enableSorting) {
-        const indicatorSize = 'var(--size-table-cell-status-indicator-horizontal)';
-
-        colSizes[sizeKey] = indicatorSize;
+        colSizes[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
         colSizes[flexKey] = '100%';
       } else {
         const originalColumnDefSize = originalColDef?.size;
@@ -352,7 +352,11 @@ export function Table<TData extends object>({
     onPaginationChange,
     autoResetPageIndex,
   });
+
   const { updateCellMap } = useCellAutoResizeController(table);
+
+  const showToolbar = !suppressToolbar;
+
   return (
     <CellAutoResizeContext.Provider value={{ updateCellMap }}>
       <div
@@ -362,15 +366,19 @@ export function Table<TData extends object>({
         className={cn(styles.wrapper, className)}
         {...extractSupportProps(rest)}
       >
-        {!suppressToolbar && (
+        {showToolbar && (
           <div className={styles.header}>
             <Toolbar
-              search={{
-                value: globalFilter,
-                onChange: onGlobalFilterChange,
-                loading: search?.loading,
-                placeholder: search?.placeholder || t('searchPlaceholder'),
-              }}
+              search={
+                suppressSearch
+                  ? undefined
+                  : {
+                      value: globalFilter,
+                      onChange: onGlobalFilterChange,
+                      loading: search?.loading,
+                      placeholder: search?.placeholder || t('searchPlaceholder'),
+                    }
+              }
               className={styles.toolbar}
               onRefresh={onRefresh ? handleOnRefresh : undefined}
               bulkActions={bulkActions}
@@ -396,9 +404,9 @@ export function Table<TData extends object>({
                 ) : undefined
               }
               moreActions={moreActions}
+              filterRow={columnFilters}
+              data-test-id={TEST_IDS.toolbar}
             />
-
-            {columnFilters && <div className={styles.filtersWrapper}> {columnFilters} </div>}
           </div>
         )}
 

package/src/components/Table/styles.module.scss

@@ -1,7 +1,7 @@
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table' as table;
 
 .table {
-  @include styles-tokens-table.composite-var(styles-tokens-table.$table-table-container);
+  @include table.composite-var(table.$table-table-container);
 
   position: relative;
   /* stylelint-disable-next-line declaration-property-value-allowed-list */
@@ -15,24 +15,24 @@
   width: 100%;
   height: auto;
   max-height: calc(
-    (var(--page-size, 10) * styles-tokens-table.$size-table-line-height) + styles-tokens-table.$size-table-line-height + styles-tokens-table.$border-width-table * 2
+    (var(--page-size, 10) * #{table.$size-table-line-height}) + #{table.$size-table-line-height} + #{table.$border-width-table} * 2
   );
 
-  background-color: styles-tokens-table.$sys-neutral-background1-level;
-  border-color: styles-tokens-table.$sys-neutral-background1-level;
+  background-color: table.$sys-neutral-background1-level;
+  border-color: table.$sys-neutral-background1-level;
   border-style: solid;
 }
 
 .scrollWrapper {
   &[data-outline] {
     .table {
-      border-color: styles-tokens-table.$sys-neutral-decor-default;
+      border-color: table.$sys-neutral-decor-default;
     }
   }
 }
 
 .header {
-  @include styles-tokens-table.composite-var(styles-tokens-table.$table-header);
+  @include table.composite-var(table.$table-header);
 
   display: flex;
   flex-direction: column;
@@ -49,13 +49,13 @@
 .filtersWrapper {
   display: flex;
   flex-wrap: wrap;
-  gap: styles-tokens-table.$dimension-1m;
+  gap: table.$dimension-1m;
   align-items: center;
   justify-content: flex-start;
 }
 
 .skeleton {
-  padding: 0 styles-tokens-table.$dimension-1m;
+  padding: 0 table.$dimension-1m;
 }
 
 .wrapper {
@@ -63,8 +63,8 @@
 }
 
 .scrollStub {
-  height: calc(styles-tokens-table.$dimension-025m / 2);
-  margin-top: calc(styles-tokens-table.$dimension-025m / -2);
+  height: calc(#{table.$dimension-025m} / 2);
+  margin-top: calc(#{table.$dimension-025m} / -2);
   background: transparent;
 }
 
@@ -72,9 +72,9 @@
   position: sticky;
   /* stylelint-disable-next-line declaration-property-value-allowed-list */
   z-index: 3;
-  top: calc(styles-tokens-table.$size-table-line-height);
+  top: table.$size-table-line-height;
 
-  margin-bottom: calc(-1 * styles-tokens-table.$border-width-table);
+  margin-bottom: calc(-1 * #{table.$border-width-table});
 
-  border-bottom: styles-tokens-table.$border-width-table solid styles-tokens-table.$sys-neutral-decor-default;
+  border-bottom: table.$border-width-table solid table.$sys-neutral-decor-default;
 }

package/src/components/types.ts

@@ -8,6 +8,7 @@ import {
 } from '@tanstack/react-table';
 import { ReactNode, RefObject } from 'react';
 
+import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
 
@@ -15,11 +16,11 @@ import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperCo
 import { TreeColumnDefinitionProps } from '../helperComponents/Cells/TreeCell';
 import { ColumnDefinition } from '../types';
 
-type BulkAction = Omit<NonNullable<ToolbarProps['bulkActions']>[number], 'onClick'> & {
+type BulkAction = Omit<NonNullable<ToolbarProps<Record<string, string>>['bulkActions']>[number], 'onClick'> & {
   onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
 };
 
-export type TableProps<TData extends object> = WithSupportProps<{
+export type TableProps<TData extends object, TFilters extends FiltersState> = WithSupportProps<{
   /** Данные для отрисовки */
   data: TData[];
   /** Определение внешнего вида и функционала колонок */
@@ -119,9 +120,11 @@ export type TableProps<TData extends object> = WithSupportProps<{
   outline?: boolean;
 
   /** Фильтры */
-  columnFilters?: ReactNode;
+  columnFilters?: ChipChoiceRowProps<TFilters>;
 
+  /** Флаг, показывающий что данные были отфильтрованы при пустых данных */
   dataFiltered?: boolean;
+  /** Флаг, показывающий что произошла ошибка запроса при пустых данных */
   dataError?: boolean;
 
   /** Экран при отстутствии данных */
@@ -133,10 +136,12 @@ export type TableProps<TData extends object> = WithSupportProps<{
 
   /** Отключение тулбара */
   suppressToolbar?: boolean;
+  /** Отключение поиска */
+  suppressSearch?: boolean;
   /** Список действия для массовых операций */
   bulkActions?: BulkAction[];
   /** Элементы выпадающего списка кнопки с действиями */
-  moreActions?: ToolbarProps['moreActions'];
+  moreActions?: ToolbarProps<TFilters>['moreActions'];
   /** Дополнительный слот в `Toolbar` после строки поиска */
   toolbarAfter?: ReactNode;
   /** Настройки экспорта в тулбаре */
@@ -170,8 +175,8 @@ export type TableProps<TData extends object> = WithSupportProps<{
   };
 }>;
 
-export type ServerTableProps<TData extends object> = Omit<
-  TableProps<TData>,
+export type ServerTableProps<TData extends object, TFilters extends FiltersState> = Omit<
+  TableProps<TData, TFilters>,
   'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'
 > & {
   /** Данные для отрисовки */

package/src/constants.tsx

@@ -30,6 +30,7 @@ export const TEST_IDS = {
   },
   statusIndicator: 'table__status-indicator',
   statusLabel: 'table__status-label',
+  toolbar: 'table__toolbar',
 };
 
 export const SORT_FN = {

package/src/helperComponents/TablePagination/TablePagination.tsx

@@ -75,7 +75,6 @@ export function TablePagination<TData>({
           options={options}
           label={optionsLabel}
           widthStrategy='auto'
-          showClearButton={false}
           size='xs'
         />
       )}