@snack-uikit/table 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.19.0 (2024-06-06)
+
+
+### Features
+
+* **PDS-287:** add row pinning functionality to table ([f33a911](https://github.com/cloud-ru-tech/snack-uikit/commit/f33a9116d78de8ab09a01a0db22999e09c7fd773))
+
+
+
+
+
+## 0.18.1 (2024-06-06)
+
+### Only dependencies have been changed
+* [@snack-uikit/chips@0.14.7](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/chips/CHANGELOG.md)
+* [@snack-uikit/info-block@0.4.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/info-block/CHANGELOG.md)
+* [@snack-uikit/list@0.13.5](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+* [@snack-uikit/toolbar@0.7.40](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toolbar/CHANGELOG.md)
+
+
+
+
+
 # 0.18.0 (2024-06-03)
 
 

package/README.md

@@ -111,6 +111,8 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
 | data* | `TData[]` | - | Данные для отрисовки |
+| keepPinnedRows | `boolean` | - | Параметр овтечает за сохранение закрепленных строк на всех страницах таблицы |
+| enableSelectPinned | `boolean` | - | Параметр овтечает за чекбокс выбора закрепленных строк |
 | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | search | `{ initialState?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; }` | 'Search'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
@@ -142,6 +144,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | getRowId | `(originalRow: TData, index: number, parent?: Row<TData>) => string` | - | Дополнительная функция используется для получения уникального идентификатора для любой заданной строки |
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| rowPinning | `Pick<RowPinningState, "top">` | {     top: [],   } | Определение какие строки должны быть закреплены в таблице |
 ## Table.getStatusColumnDef
 Вспомогательная функция для создания ячейки со статусом
 ### Props
@@ -168,6 +171,8 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | onChangePage* | `(offset: number, limit: number) => void` | - |  |
 | columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
 | loading | `boolean` | - | Состояние загрузки |
+| keepPinnedRows | `boolean` | - | Параметр овтечает за сохранение закрепленных строк на всех страницах таблицы |
+| enableSelectPinned | `boolean` | - | Параметр овтечает за чекбокс выбора закрепленных строк |
 | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
@@ -194,6 +199,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | getRowId | `(originalRow: TData, index: number, parent?: Row<TData>) => string` | - | Дополнительная функция используется для получения уникального идентификатора для любой заданной строки |
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| rowPinning | `Pick<RowPinningState, "top">` | - | Определение какие строки должны быть закреплены в таблице |
 | items | `TData[]` | - | Данные для отрисовки |
 | total | `number` | 10 | Общее кол-во строк |
 | limit | `number` | 10 | Кол-во строк на страницу |

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, getRowId, enableFuzzySearch, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object>({ data, rowPinning, columnDefinitions, keepPinnedRows, enableSelectPinned, 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, getRowId, enableFuzzySearch, ...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

@@ -28,7 +28,9 @@ import styles from './styles.module.css';
 import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth } from './utils';
 /** Компонент таблицы */
 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, getRowId, enableFuzzySearch } = _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", "getRowId", "enableFuzzySearch"]);
+    var { data, rowPinning = {
+        top: [],
+    }, columnDefinitions, keepPinnedRows = false, enableSelectPinned = false, 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, getRowId, enableFuzzySearch } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "enableSelectPinned", "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", "getRowId", "enableFuzzySearch"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -41,10 +43,10 @@ export function Table(_a) {
     const tableColumns = useMemo(() => {
         let cols = columnDefinitions;
         if (enableSelection) {
-            cols = [getSelectionCellColumnDef(), ...cols];
+            cols = [getSelectionCellColumnDef(enableSelectPinned), ...cols];
         }
         return cols;
-    }, [columnDefinitions, enableSelection]);
+    }, [columnDefinitions, enableSelection, enableSelectPinned]);
     const columnPinning = useMemo(() => {
         var _a;
         const pinningState = { left: [], right: [] };
@@ -65,6 +67,7 @@ export function Table(_a) {
             rowSelection,
             sorting,
             pagination,
+            rowPinning,
         },
         pageCount,
         defaultColumn: {
@@ -94,6 +97,7 @@ export function Table(_a) {
         getPaginationRowModel: getPaginationRowModel(),
         getCoreRowModel: getCoreRowModel(),
         columnResizeMode: 'onEnd',
+        keepPinnedRows,
     });
     const { loadingTable } = useLoadingTable({ pageSize, columnDefinitions: tableColumns, columnPinning });
     const handleOnRefresh = useCallback(() => {
@@ -160,8 +164,15 @@ export function Table(_a) {
         columnSizeVarsRef.current = columnSizeVars;
     }, [columnSizeVars]);
     const tableRows = table.getRowModel().rows;
+    const tableCenterRows = table.getCenterRows();
+    const tableFilteredRows = table.getFilteredRowModel().rows;
+    const tableFilteredRowsIds = tableFilteredRows.map(row => row.id);
+    const topRows = table.getTopRows();
     const loadingTableRows = loadingTable.getRowModel().rows;
     const tablePagination = table.getState().pagination;
+    const filteredTopRows = table.getState().globalFilter
+        ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id))
+        : topRows;
     const { t } = useLocale('Table');
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
     const cssPageSize = useMemo(() => {
@@ -181,7 +192,7 @@ export function Table(_a) {
                                 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: (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 }))] })) }));
+                            }, 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: [tableCenterRows.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, tableCenterRows.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/styles.module.css

@@ -54,4 +54,12 @@
   height:calc(var(--dimension-025m, 2px) / 2);
   margin-top:calc(var(--dimension-025m, 2px) / -2);
   background:transparent;
+}
+
+.topRowWrapper{
+  position:sticky;
+  z-index:3;
+  top:calc(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, #dfe2ec);
 }

package/dist/components/types.d.ts

@@ -1,15 +1,18 @@
-import { PaginationState, Row, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
+import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
 import { ReactNode, RefObject } from 'react';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { RowClickHandler } from '../helperComponents';
-import { EmptyStateProps } from '../helperComponents/TableEmptyState';
+import { EmptyStateProps, RowClickHandler } from '../helperComponents';
 import { ColumnDefinition } from '../types';
 export type TableProps<TData extends object> = WithSupportProps<{
     /** Данные для отрисовки */
     data: TData[];
     /** Определение внешнего вида и функционала колонок */
     columnDefinitions: ColumnDefinition<TData>[];
+    /** Параметр овтечает за сохранение закрепленных строк на всех страницах таблицы */
+    keepPinnedRows?: boolean;
+    /** Параметр овтечает за чекбокс выбора закрепленных строк */
+    enableSelectPinned?: boolean;
     /** Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br>
      *  <strong>initialState</strong>: Начальное состояние сортировки <br>
      *  <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br>
@@ -109,6 +112,8 @@ export type TableProps<TData extends object> = WithSupportProps<{
     scrollRef?: RefObject<HTMLElement>;
     /** Ссылка на контейнер, который скроллится */
     scrollContainerRef?: RefObject<HTMLElement>;
+    /** Определение какие строки должны быть закреплены в таблице */
+    rowPinning?: Pick<RowPinningState, 'top'>;
 }>;
 export type ServerTableProps<TData extends object> = Omit<TableProps<TData>, 'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'> & {
     /** Данные для отрисовки */

package/dist/helperComponents/Cells/SelectionCell/SelectionCell.d.ts

@@ -1,2 +1,2 @@
 import { ColumnDefinition } from '../../../types';
-export declare function getSelectionCellColumnDef<TData>(): ColumnDefinition<TData>;
+export declare function getSelectionCellColumnDef<TData>(enableSelectPinned: boolean): ColumnDefinition<TData>;

package/dist/helperComponents/Cells/SelectionCell/SelectionCell.js

@@ -23,7 +23,7 @@ function SelectionCell(_a) {
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     _jsx("div", { onClick: handleCellClick, className: styles.selectionCell, "data-test-id": TEST_IDS.rowSelect, children: isMulti ? _jsx(Checkbox, Object.assign({}, props, { size: 's' })) : _jsx(Radio, Object.assign({}, props, { size: 's' })) }));
 }
-export function getSelectionCellColumnDef() {
+export function getSelectionCellColumnDef(enableSelectPinned) {
     return {
         id: 'selectionCell',
         pinned: COLUMN_PIN_POSITION.Left,
@@ -33,7 +33,7 @@ export function getSelectionCellColumnDef() {
         enableResizing: false,
         cell: ({ row, table }) => {
             const disabled = !row.getCanSelect();
-            if (disabled)
+            if (disabled || (!enableSelectPinned && row.getIsPinned()))
                 return null;
             const { enableMultiRowSelection } = table.options;
             const isMulti = typeof enableMultiRowSelection === 'boolean' ? enableMultiRowSelection : true;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,16 +33,16 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.17.1",
-    "@snack-uikit/chips": "0.14.6",
+    "@snack-uikit/chips": "0.14.7",
     "@snack-uikit/icon-predefined": "0.5.1",
     "@snack-uikit/icons": "0.21.0",
-    "@snack-uikit/info-block": "0.3.6",
-    "@snack-uikit/list": "0.13.4",
+    "@snack-uikit/info-block": "0.4.0",
+    "@snack-uikit/list": "0.13.5",
     "@snack-uikit/pagination": "0.6.8",
     "@snack-uikit/scroll": "0.6.0",
     "@snack-uikit/skeleton": "0.3.4",
     "@snack-uikit/toggles": "0.9.10",
-    "@snack-uikit/toolbar": "0.7.39",
+    "@snack-uikit/toolbar": "0.7.40",
     "@snack-uikit/truncate-string": "0.4.17",
     "@snack-uikit/typography": "0.6.2",
     "@snack-uikit/utils": "3.3.0",
@@ -57,5 +57,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "6d0c73127e9874b0a302e4a2ea2ed41cb9adae2d"
+  "gitHead": "2073ec039b8c391a322e0ad3016fabbe6dfb54bd"
 }

package/src/components/Table/Table.tsx

@@ -46,7 +46,12 @@ import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth } from './utils';
 /** Компонент таблицы */
 export function Table<TData extends object>({
   data,
+  rowPinning = {
+    top: [],
+  },
   columnDefinitions,
+  keepPinnedRows = false,
+  enableSelectPinned = false,
   rowSelection: rowSelectionProp,
   search,
   sorting: sortingProp,
@@ -78,6 +83,7 @@ export function Table<TData extends object>({
   scrollContainerRef,
   getRowId,
   enableFuzzySearch,
+
   ...rest
 }: TableProps<TData>) {
   const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl<string>(search, '');
@@ -85,6 +91,7 @@ export function Table<TData extends object>({
     rowSelectionProp,
     {},
   );
+
   const defaultPaginationState = useMemo(
     () => ({
       pageIndex: 0,
@@ -103,10 +110,10 @@ export function Table<TData extends object>({
   const tableColumns: ColumnDefinition<TData>[] = useMemo(() => {
     let cols: ColumnDefinition<TData>[] = columnDefinitions;
     if (enableSelection) {
-      cols = [getSelectionCellColumnDef(), ...cols];
+      cols = [getSelectionCellColumnDef(enableSelectPinned), ...cols];
     }
     return cols;
-  }, [columnDefinitions, enableSelection]);
+  }, [columnDefinitions, enableSelection, enableSelectPinned]);
 
   const columnPinning = useMemo(() => {
     const pinningState: Required<ColumnPinningState> = { left: [], right: [] };
@@ -128,6 +135,7 @@ export function Table<TData extends object>({
       rowSelection,
       sorting,
       pagination,
+      rowPinning,
     },
     pageCount,
     defaultColumn: {
@@ -160,6 +168,7 @@ export function Table<TData extends object>({
     getPaginationRowModel: getPaginationRowModel(),
     getCoreRowModel: getCoreRowModel(),
     columnResizeMode: 'onEnd',
+    keepPinnedRows,
   });
 
   const { loadingTable } = useLoadingTable({ pageSize, columnDefinitions: tableColumns, columnPinning });
@@ -243,9 +252,17 @@ export function Table<TData extends object>({
   }, [columnSizeVars]);
 
   const tableRows = table.getRowModel().rows;
+  const tableCenterRows = table.getCenterRows();
+  const tableFilteredRows = table.getFilteredRowModel().rows;
+  const tableFilteredRowsIds = tableFilteredRows.map(row => row.id);
+  const topRows = table.getTopRows();
   const loadingTableRows = loadingTable.getRowModel().rows;
   const tablePagination = table.getState().pagination;
 
+  const filteredTopRows = table.getState().globalFilter
+    ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id))
+    : topRows;
+
   const { t } = useLocale('Table');
   const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
 
@@ -319,8 +336,16 @@ export function Table<TData extends object>({
                   </SkeletonContextProvider>
                 ) : (
                   <>
-                    {tableRows.length ? <HeaderRow /> : null}
-                    {tableRows.map(row => (
+                    {tableCenterRows.length || filteredTopRows.length ? <HeaderRow /> : null}
+                    {filteredTopRows.length ? (
+                      <div className={styles.topRowWrapper}>
+                        {filteredTopRows.map(row => (
+                          <BodyRow key={row.id} row={row} onRowClick={onRowClick} />
+                        ))}
+                      </div>
+                    ) : null}
+
+                    {tableCenterRows.map(row => (
                       <BodyRow key={row.id} row={row} onRowClick={onRowClick} />
                     ))}
 

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

@@ -66,3 +66,13 @@
   margin-top: calc($dimension-025m / -2);
   background: transparent;
 }
+
+.topRowWrapper {
+  position: sticky;
+  z-index: 3;
+  top: calc($size-table-line-height);
+
+  margin-bottom: calc(-1 * $border-width-table);
+
+  border-bottom: $border-width-table solid $sys-neutral-decor-default;
+}

package/src/components/types.ts

@@ -1,11 +1,17 @@
-import { PaginationState, Row, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
+import {
+  PaginationState,
+  Row,
+  RowPinningState,
+  RowSelectionOptions,
+  RowSelectionState,
+  SortingState,
+} from '@tanstack/react-table';
 import { ReactNode, RefObject } from 'react';
 
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
 
-import { RowClickHandler } from '../helperComponents';
-import { EmptyStateProps } from '../helperComponents/TableEmptyState';
+import { EmptyStateProps, RowClickHandler } from '../helperComponents';
 import { ColumnDefinition } from '../types';
 
 export type TableProps<TData extends object> = WithSupportProps<{
@@ -13,6 +19,10 @@ export type TableProps<TData extends object> = WithSupportProps<{
   data: TData[];
   /** Определение внешнего вида и функционала колонок */
   columnDefinitions: ColumnDefinition<TData>[];
+  /** Параметр овтечает за сохранение закрепленных строк на всех страницах таблицы */
+  keepPinnedRows?: boolean;
+  /** Параметр овтечает за чекбокс выбора закрепленных строк */
+  enableSelectPinned?: boolean;
   /** Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br>
    *  <strong>initialState</strong>: Начальное состояние сортировки <br>
    *  <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br>
@@ -132,6 +142,8 @@ export type TableProps<TData extends object> = WithSupportProps<{
   scrollRef?: RefObject<HTMLElement>;
   /** Ссылка на контейнер, который скроллится */
   scrollContainerRef?: RefObject<HTMLElement>;
+  /** Определение какие строки должны быть закреплены в таблице */
+  rowPinning?: Pick<RowPinningState, 'top'>;
 }>;
 
 export type ServerTableProps<TData extends object> = Omit<

package/src/helperComponents/Cells/SelectionCell/SelectionCell.tsx

@@ -27,7 +27,7 @@ function SelectionCell({ isMulti, onChange, ...props }: SelectionCellProps) {
   );
 }
 
-export function getSelectionCellColumnDef<TData>(): ColumnDefinition<TData> {
+export function getSelectionCellColumnDef<TData>(enableSelectPinned: boolean): ColumnDefinition<TData> {
   return {
     id: 'selectionCell',
     pinned: COLUMN_PIN_POSITION.Left,
@@ -38,7 +38,7 @@ export function getSelectionCellColumnDef<TData>(): ColumnDefinition<TData> {
     cell: ({ row, table }) => {
       const disabled = !row.getCanSelect();
 
-      if (disabled) return null;
+      if (disabled || (!enableSelectPinned && row.getIsPinned())) return null;
 
       const { enableMultiRowSelection } = table.options;