@snack-uikit/table 0.12.1 → 0.13.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.13.0 (2024-02-07)
+
+
+### Bug Fixes
+
+* **FF-4187:** change local no data to InfoBlock ([542cf0d](https://github.com/cloud-ru-tech/snack-uikit/commit/542cf0de8fed7f4ab5e2bca3afff1318b30a6043))
+
+
+### Features
+
+* **FF-4241:** add ServerTable; add CopyCell ([2cf16c1](https://github.com/cloud-ru-tech/snack-uikit/commit/2cf16c15e72a93f20d40c1bc54d7708c1a273079))
+
+
+
+
+
 ## 0.12.1 (2024-02-07)
 
 ### Only dependencies have been changed

package/README.md

@@ -1,17 +1,19 @@
 # Table
 
 ## Installation
+
 `npm i @snack-uikit/table`
 
 [Changelog](./CHANGELOG.md)
 
 ## TODO:
-  - multiple row selection with Shift key pressed
 
+- multiple row selection with Shift key pressed
 
 ## Примечание
+
 > Для оптимальной работы таблицы используйте `useMemo` для `columnDefinitions`
-или выносите их определение за компонент
+> или выносите их определение за компонент
 
 ## Example
 
@@ -88,16 +90,20 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
   data={data}
   rowSelection={{
     enable: true, // false выключает выбор всех строк (состояние disabled)
-    // или можно передать функцию для вычисления 
+    // или можно передать функцию для вычисления
     // enable: row => !['Pending', 'Loading'].includes(row.original.status),
     onChange: handleRowSelection,
   }}
 />
 ```
 
-
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
+## CopyCell
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| value | `string \| number` | - |  |
 ## Table
 Компонент таблицы
 ### Props
@@ -118,6 +124,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | onDelete | `(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void) => void` | - | Колбек удаления выбранных |
 | outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
 | columnFilters | `ReactNode` | - | Фильтры |
+| dataFiltered | `boolean` | - |  |
 | exportFileName | `string` | - | Название файла при экспорте CSV/XLSX |
 | moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 | noDataState | `TableEmptyStateProps` | - | Экран при отстутствии данных |
@@ -130,7 +137,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| mapStatusToAppearance* | `(value: string \| number) => StatusAppearance` | - | Маппинг значений статуса на цвета |
+| mapStatusToAppearance* | `MapStatusToAppearanceFnType` | - | Маппинг значений статуса на цвета |
 | accessorKey* | `string` | - | Имя ключа соответствующее полю в data |
 | enableSorting | `boolean` | - | Включение/выключение сортировки |
 | renderDescription | `(cellValue: string) => string` | - | Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса |
@@ -144,6 +151,54 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | actionsGenerator* | `ActionsGenerator<TData>` | - | Действия для строки |
 | pinned | `boolean` | - | Закрепление колонки справа в таблице |
+## ServerTable
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| search* | `{ initialValue?: string; state: string; placeholder?: string; loading?: boolean; onChange(value: string): void; }` | 'Search...'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
+| onChangePage* | `(offset: number, limit: number) => void` | - |  |
+| columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
+| loading | `boolean` | - | Состояние загрузки |
+| 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>: Колбэк на выбор строк |
+| onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
+| className | `string` | - | CSS-класс |
+| onRefresh | `() => void` | - | Колбек обновления данных |
+| onDelete | `(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void) => void` | - | Колбек удаления выбранных |
+| outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
+| columnFilters | `ReactNode` | - | Фильтры |
+| dataFiltered | `boolean` | - |  |
+| exportFileName | `string` | - | Название файла при экспорте CSV/XLSX |
+| moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
+| noDataState | `TableEmptyStateProps` | - | Экран при отстутствии данных |
+| noResultsState | `TableEmptyStateProps` | - | Экран при отстутствии результатов поиска |
+| suppressToolbar | `boolean` | - | Отключение тулбара |
+| toolbarBefore | `ReactNode` | - | Дополнительный слот в `Toolbar` перед строкой поиска |
+| suppressPagination | `boolean` | - | Отключение пагинации |
+| items | `TData[]` | - | Данные для отрисовки |
+| total | `number` | 10 | Общее кол-во строк |
+| limit | `number` | 10 | Кол-во строк на страницу |
+| offset | `number` | - | Смещение |
+| pagination | `{ options?: number[]; optionsLabel?: string; }` | 'Rows volume' <br> | Параметры отвечают за пагинацию в таблице <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу<br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
+## ServerTable.getRowActionsColumnDef
+Вспомогательная функция для создания ячейки с дополнительными действиями у строки
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| actionsGenerator* | `ActionsGenerator<TData>` | - | Действия для строки |
+| pinned | `boolean` | - | Закрепление колонки справа в таблице |
+## ServerTable.getStatusColumnDef
+Вспомогательная функция для создания ячейки со статусом
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| mapStatusToAppearance* | `MapStatusToAppearanceFnType` | - | Маппинг значений статуса на цвета |
+| accessorKey* | `string` | - | Имя ключа соответствующее полю в data |
+| enableSorting | `boolean` | - | Включение/выключение сортировки |
+| renderDescription | `(cellValue: string) => string` | - | Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса |
+| size | `number` | - | Размер ячейки |
+| header | `ColumnDefTemplate<HeaderContext<TData, unknown>> & (string \| ((ctx: HeaderContext<TData, unknown>) => string))` | - | Заголовок колонки |
+| enableResizing | `boolean` | - | Включение/выключение ресайза колонки |
 ## exportToCSV
 ### Props
 | name | type | default value | description |

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

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

package/dist/components/ServerTable/ServerTable.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { Table } from '../Table';
+import { DEFAULT_PAGINATION_LIMIT } from './constants';
+import { onSearchDebounced } from './utils';
+export function ServerTable(_a) {
+    var { items, total = DEFAULT_PAGINATION_LIMIT, limit = DEFAULT_PAGINATION_LIMIT, offset = 0, onChangePage, search, pagination, columnFilters } = _a, rest = __rest(_a, ["items", "total", "limit", "offset", "onChangePage", "search", "pagination", "columnFilters"]);
+    const [tempSearch, setTempSearch] = useState(search.initialValue || '');
+    const handleSearch = useCallback((newValue) => {
+        setTempSearch(newValue);
+        onSearchDebounced()(newValue.trim(), search.onChange);
+    }, [search.onChange]);
+    const handlePageChange = useCallback(({ pageSize, pageIndex }) => onChangePage(pageIndex * pageSize, pageSize), [onChangePage]);
+    const pageIndex = useMemo(() => Math.floor(offset / limit), [limit, offset]);
+    const pageCount = useMemo(() => Math.ceil(total / limit), [limit, total]);
+    return (_jsx(Table, Object.assign({}, rest, { data: items || [], search: {
+            state: tempSearch,
+            onChange: handleSearch,
+            loading: search.loading,
+            placeholder: search.placeholder,
+        }, columnFilters: columnFilters, pageCount: pageCount, pagination: Object.assign(Object.assign({}, pagination), { state: {
+                pageIndex,
+                pageSize: limit,
+            }, onChange: handlePageChange }), pageSize: limit })));
+}
+ServerTable.getRowActionsColumnDef = Table.getRowActionsColumnDef;
+ServerTable.getStatusColumnDef = Table.getStatusColumnDef;

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

@@ -0,0 +1,2 @@
+export declare const SEARCH_DELAY = 500;
+export declare const DEFAULT_PAGINATION_LIMIT = 10;

package/dist/components/ServerTable/constants.js

@@ -0,0 +1,2 @@
+export const SEARCH_DELAY = 500;
+export const DEFAULT_PAGINATION_LIMIT = 10;

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

@@ -0,0 +1 @@
+export * from './ServerTable';

package/dist/components/ServerTable/index.js

@@ -0,0 +1 @@
+export * from './ServerTable';

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

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

package/dist/components/ServerTable/utils.js

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

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

@@ -78,6 +78,7 @@ export type TableProps<TData extends object> = WithSupportProps<{
     outline?: boolean;
     /** Фильтры */
     columnFilters?: ReactNode;
+    dataFiltered?: boolean;
     /** Название файла при экспорте CSV/XLSX */
     exportFileName?: string;
     /** Элементы выпадающего списка кнопки с действиями */
@@ -94,7 +95,7 @@ export type TableProps<TData extends object> = WithSupportProps<{
     suppressPagination?: boolean;
 }>;
 /** Компонент таблицы */
-export declare function Table<TData extends object>({ data, columnDefinitions, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters: columnFiltersProp, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportFileName, noDataState, noResultsState, suppressToolbar, toolbarBefore, suppressPagination, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object>({ data, columnDefinitions, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters: columnFiltersProp, dataFiltered, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportFileName, noDataState, noResultsState, suppressToolbar, toolbarBefore, suppressPagination, ...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

@@ -19,6 +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 { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getSelectionCellColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, } from '../../helperComponents';
 import { fuzzyFilter } from '../../utils';
 import { TableEmptyState } from '../TableEmptyState';
@@ -27,7 +28,7 @@ import { useLoadingTable, useStateControl, useTableEmptyState } from './hooks';
 import styles from './styles.module.css';
 /** Компонент таблицы */
 export function Table(_a) {
-    var { data, columnDefinitions, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters: columnFiltersProp, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = 10, pageCount, loading = false, outline = false, moreActions, exportFileName, noDataState, noResultsState, suppressToolbar = false, toolbarBefore, suppressPagination = false } = _a, rest = __rest(_a, ["data", "columnDefinitions", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportFileName", "noDataState", "noResultsState", "suppressToolbar", "toolbarBefore", "suppressPagination"]);
+    var { data, columnDefinitions, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters: columnFiltersProp, dataFiltered, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportFileName, noDataState, noResultsState, suppressToolbar = false, toolbarBefore, suppressPagination = false } = _a, rest = __rest(_a, ["data", "columnDefinitions", "rowSelection", "search", "sorting", "columnFilters", "dataFiltered", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportFileName", "noDataState", "noResultsState", "suppressToolbar", "toolbarBefore", "suppressPagination"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -73,6 +74,9 @@ export function Table(_a) {
             enableResizing: false,
             minSize: 40,
         },
+        manualSorting: Boolean(pageCount),
+        manualPagination: pageCount !== undefined,
+        manualFiltering: Boolean(pageCount),
         globalFilterFn: fuzzyFilter,
         onGlobalFilterChange,
         onRowSelectionChange,
@@ -82,9 +86,7 @@ export function Table(_a) {
         getFilteredRowModel: getFilteredRowModel(),
         enableColumnResizing: true,
         enableSorting: true,
-        manualSorting: false,
-        enableMultiSort: false,
-        manualPagination: pageCount !== undefined,
+        enableMultiSort: true,
         onSortingChange,
         getSortedRowModel: getSortedRowModel(),
         onPaginationChange,
@@ -142,12 +144,18 @@ export function Table(_a) {
     const tablePagination = table.getState().pagination;
     const [locales] = useLocale('Table');
     const emptyStates = useTableEmptyState({ noDataState, noResultsState });
-    return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { '--page-size': !suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize }, className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [!suppressToolbar && (_jsxs("div", { className: styles.header, children: [_jsx(Toolbar, { search: {
+    const cssPageSize = useMemo(() => {
+        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]);
+    return (_jsx(_Fragment, { 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: {
                                 value: globalFilter,
                                 onChange: onGlobalFilterChange,
                                 loading: search === null || search === void 0 ? void 0 : search.loading,
                                 placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || locales.searchPlaceholder,
-                            }, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', before: toolbarBefore, after: exportFileName ? (_jsx(ExportButton, { fileName: exportFileName, columnDefinitions: columnDefinitions, data: data })) : undefined, moreActions: moreActions }), columnFiltersProp && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFiltersProp, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsx(Scroll, { size: 's', className: styles.table, children: _jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [tableRows.length ? _jsx(HeaderRow, {}) : null, tableRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), !tableRows.length && globalFilter && _jsx(TableEmptyState, Object.assign({}, emptyStates.noResultsState)), !tableRows.length && !globalFilter && _jsx(TableEmptyState, Object.assign({}, emptyStates.noDataState))] })) }) }) }) }), !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: exportFileName ? (_jsx(ExportButton, { fileName: exportFileName, columnDefinitions: columnDefinitions, data: data })) : undefined, moreActions: moreActions }), columnFiltersProp && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFiltersProp, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsx(Scroll, { size: 's', className: styles.table, children: _jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [tableRows.length ? _jsx(HeaderRow, {}) : null, tableRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), !tableRows.length && (globalFilter || dataFiltered) && (_jsx(TableEmptyState, Object.assign({}, emptyStates.noResultsState))), !tableRows.length && !globalFilter && !dataFiltered && (_jsx(TableEmptyState, Object.assign({}, emptyStates.noDataState)))] })) }) }) }) }), !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.js

@@ -40,8 +40,8 @@ export function useLoadingTable({ pageSize, columnDefinitions, columnPinning })
 export function useTableEmptyState({ noDataState: noDataStateProp, noResultsState: noResultsStateProp, }) {
     const [locales] = useLocale('Table');
     return useMemo(() => {
-        const noDataState = noDataStateProp !== null && noDataStateProp !== void 0 ? noDataStateProp : Object.assign({ icon: CrossSVG, appearance: 'red' }, locales.noData);
-        const noResultsState = noResultsStateProp !== null && noResultsStateProp !== void 0 ? noResultsStateProp : Object.assign({ icon: SearchSVG, appearance: 'neutral' }, locales.noResults);
+        const noDataState = noDataStateProp !== null && noDataStateProp !== void 0 ? noDataStateProp : Object.assign({ icon: { icon: CrossSVG, appearance: 'red', decor: true } }, locales.noData);
+        const noResultsState = noResultsStateProp !== null && noResultsStateProp !== void 0 ? noResultsStateProp : Object.assign({ icon: { icon: SearchSVG, appearance: 'neutral', decor: true } }, locales.noResults);
         return {
             noDataState,
             noResultsState,

package/dist/components/TableEmptyState/TableEmptyState.d.ts

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
 import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
 export type TableEmptyStateProps = {
-    title: string;
-    description?: ReactNode;
+    title?: string;
+    description: string;
+    icon?: Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
+    footer?: ReactNode;
     className?: string;
-} & Pick<IconPredefinedProps, 'icon' | 'appearance'>;
-export declare function TableEmptyState({ title, description, className, icon, appearance }: TableEmptyStateProps): import("react/jsx-runtime").JSX.Element;
+};
+export declare function TableEmptyState({ className, ...props }: TableEmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TableEmptyState/TableEmptyState.js

@@ -1,8 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
-import { IconPredefined } from '@snack-uikit/icon-predefined';
-import { Typography } from '@snack-uikit/typography';
+import { InfoBlock } from '@snack-uikit/info-block';
 import styles from './styles.module.css';
-export function TableEmptyState({ title, description, className, icon, appearance }) {
-    return (_jsxs("div", { className: cn(styles.tableEmptyStateWrapper, className), children: [_jsx(IconPredefined, { icon: icon, size: 'l', appearance: appearance }), _jsxs("div", { className: styles.textWrapper, children: [_jsx(Typography.SansTitleM, { children: title }), description && _jsx(Typography.SansBodyM, { children: description })] })] }));
+export function TableEmptyState(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", { className: cn(styles.tableEmptyStateWrapper, className), children: _jsx(InfoBlock, Object.assign({}, props, { size: 'm', align: 'vertical' })) }));
 }

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

@@ -5,11 +5,4 @@
   align-items:center;
   justify-content:center;
   height:calc(var(--page-size, 10) * var(--size-table-line-height, 40px) + var(--size-table-line-height, 40px));
-}
-
-.textWrapper{
-  display:flex;
-  flex-direction:column;
-  align-items:center;
-  justify-content:center;
 }

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

package/dist/constants.d.ts

@@ -26,3 +26,4 @@ export declare const SORT_FN: {
     readonly DateTime: "datetime";
     readonly AlphaNumeric: "alphanumeric";
 };
+export declare const DEFAULT_PAGE_SIZE = 10;

package/dist/constants.js

@@ -26,3 +26,4 @@ export const SORT_FN = {
     DateTime: 'datetime',
     AlphaNumeric: 'alphanumeric',
 };
+export const DEFAULT_PAGE_SIZE = 10;

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

@@ -0,0 +1,4 @@
+export type CopyCellProps = {
+    value?: string | number;
+};
+export declare function CopyCell({ value }: CopyCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/Cells/CopyCell/CopyCell.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { CopyButton } from './components';
+import styles from './styles.module.css';
+export function CopyCell({ value }) {
+    return (_jsxs("div", { className: styles.copyCell, children: [_jsx(TruncateString, { text: String(value), maxLines: 1 }), _jsx(CopyButton, { valueToCopy: value, className: styles.copyButton })] }));
+}

package/dist/helperComponents/Cells/CopyCell/components/CopyButton/CopyButton.d.ts

@@ -0,0 +1,5 @@
+export type CopyButtonProps = {
+    valueToCopy?: string | number;
+    className?: string;
+};
+export declare function CopyButton({ valueToCopy, className }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/Cells/CopyCell/components/CopyButton/CopyButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import copyToClipboard from 'copy-to-clipboard';
+import { useEffect, useRef, useState } from 'react';
+import { ButtonFunction } from '@snack-uikit/button';
+import { CheckSVG, CopySVG } from '@snack-uikit/icons';
+export function CopyButton({ valueToCopy, className }) {
+    const [isChecked, setIsCheckedOpen] = useState(false);
+    const timerId = useRef();
+    const openChecked = () => setIsCheckedOpen(true);
+    const closeChecked = () => setIsCheckedOpen(false);
+    const handleClick = event => {
+        event.stopPropagation();
+        valueToCopy && copyToClipboard(String(valueToCopy), { format: 'text/plain' });
+        openChecked();
+        clearTimeout(timerId.current);
+        timerId.current = setTimeout(closeChecked, 1000);
+    };
+    useEffect(() => () => {
+        closeChecked();
+        clearTimeout(timerId.current);
+    }, []);
+    return (_jsx(ButtonFunction, { onClick: handleClick, "data-test-id": 'button-copy-value', type: 'button', icon: isChecked ? _jsx(CheckSVG, {}) : _jsx(CopySVG, {}), size: 's', className: className }));
+}

package/dist/helperComponents/Cells/CopyCell/components/CopyButton/index.d.ts

@@ -0,0 +1 @@
+export * from './CopyButton';

package/dist/helperComponents/Cells/CopyCell/components/CopyButton/index.js

@@ -0,0 +1 @@
+export * from './CopyButton';

package/dist/helperComponents/Cells/CopyCell/components/index.d.ts

@@ -0,0 +1 @@
+export * from './CopyButton';

package/dist/helperComponents/Cells/CopyCell/components/index.js

@@ -0,0 +1 @@
+export * from './CopyButton';

package/dist/helperComponents/Cells/CopyCell/index.d.ts

@@ -0,0 +1 @@
+export * from './CopyCell';

package/dist/helperComponents/Cells/CopyCell/index.js

@@ -0,0 +1 @@
+export * from './CopyCell';

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

@@ -0,0 +1,14 @@
+.copyCell{
+  cursor:pointer;
+  display:flex;
+  gap:var(--dimension-050m, 4px);
+  align-items:center;
+  min-width:0;
+  max-width:100%;
+}
+.copyCell .copyButton{
+  display:none;
+}
+.copyCell:hover .copyButton{
+  display:inline-flex;
+}

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

@@ -12,7 +12,7 @@ export type RowActionProps<TData> = Pick<BaseItemProps, 'content' | 'disabled'>
     tagLabel?: string;
     id?: string;
     hidden?: boolean;
-    onClick(row: RowActionInfo<TData>, e: MouseEvent<HTMLButtonElement>): void;
+    onClick(row: RowActionInfo<TData>, e: MouseEvent<HTMLElement>): void;
 };
 export type ActionsGenerator<TData> = (cell: CellContext<TData, unknown>) => RowActionProps<TData>[];
 export type RowActionsColumnDefProps<TData> = {

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

@@ -3,11 +3,12 @@ import { STATUS_APPEARANCE } from './constants';
 import { StatusAppearance } from './types';
 export type { StatusAppearance };
 export { STATUS_APPEARANCE };
+export type MapStatusToAppearanceFnType = (value: string | number) => StatusAppearance;
 type BaseStatusColumnDef = {
     /** Имя ключа соответствующее полю в data */
     accessorKey: string;
     /** Маппинг значений статуса на цвета */
-    mapStatusToAppearance(value: string | number): StatusAppearance;
+    mapStatusToAppearance: MapStatusToAppearanceFnType;
     /** Включение/выключение сортировки */
     enableSorting?: boolean;
 };

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

@@ -3,3 +3,4 @@ export * from './RowActionsCell';
 export * from './HeaderCell';
 export * from './SelectionCell';
 export * from './StatusCell';
+export * from './CopyCell';

package/dist/helperComponents/Cells/index.js

@@ -3,3 +3,4 @@ export * from './RowActionsCell';
 export * from './HeaderCell';
 export * from './SelectionCell';
 export * from './StatusCell';
+export * from './CopyCell';

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './types';
 export * from './exportTable';
+export { type CopyCellProps, type ActionsGenerator, CopyCell } from './helperComponents';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './types';
 export * from './exportTable';
+export { CopyCell } from './helperComponents';

package/dist/types.d.ts

@@ -37,5 +37,5 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
     size: number;
 };
 export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
-export type { RowActionInfo, RowActionProps, RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, ActionsGenerator, } from './helperComponents';
+export type { RowActionInfo, RowActionProps, RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, ActionsGenerator, CopyCellProps, MapStatusToAppearanceFnType, } from './helperComponents';
 export type { PaginationState, SortingState, RowSelectionState, RowSelectionOptions, TableEmptyStateProps, ToolbarProps, HeaderContext, CellContext, };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,22 +36,25 @@
     "@snack-uikit/chips": "0.11.1",
     "@snack-uikit/icon-predefined": "0.4.1",
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/list": "0.2.1",
+    "@snack-uikit/info-block": "0.1.1",
+    "@snack-uikit/list": "0.3.0",
     "@snack-uikit/locale": "0.1.1",
     "@snack-uikit/pagination": "0.6.3",
     "@snack-uikit/scroll": "0.5.0",
     "@snack-uikit/skeleton": "0.3.2",
     "@snack-uikit/tag": "0.7.2",
     "@snack-uikit/toggles": "0.9.5",
-    "@snack-uikit/toolbar": "0.7.6",
+    "@snack-uikit/toolbar": "0.7.7",
     "@snack-uikit/truncate-string": "0.4.7",
     "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "@tanstack/match-sorter-utils": "8.8.4",
     "@tanstack/react-table": "8.11.6",
     "classnames": "2.3.2",
+    "copy-to-clipboard": "3.3.3",
+    "lodash.debounce": "4.0.8",
     "uncontrollable": "8.0.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz"
   },
-  "gitHead": "0e3f0ca15d2f0903a25bfa72bd95da9a414bddc2"
+  "gitHead": "88a44a8f4c6490f3004f7feac3d50d17ff03f31c"
 }

package/src/components/ServerTable/ServerTable.tsx

@@ -0,0 +1,113 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { PaginationState } from '../../types';
+import { Table, TableProps } from '../Table';
+import { DEFAULT_PAGINATION_LIMIT } from './constants';
+import { onSearchDebounced } from './utils';
+
+export type ServerTableProps<TData extends object> = Omit<
+  TableProps<TData>,
+  'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'
+> & {
+  /** Данные для отрисовки */
+  items?: TData[];
+  /**
+   * Общее кол-во строк
+   * @default 10
+   */
+  total?: number;
+  /**
+   * Кол-во строк на страницу
+   * @default 10
+   */
+  limit?: number;
+  /**
+   * Смещение
+   * @default 0
+   * */
+  offset?: number;
+
+  onChangePage(offset: number, limit: number): void;
+
+  /** Параметры отвечают за глобальный поиск в таблице <br>
+   * <strong>initialState</strong>: Начальное состояние строки поиска <br>
+   * <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br>
+   * <strong>placeholder</strong>: Placeholder строки поиска @default 'Search...'<br>
+   * <strong>loading</strong>: Состояние загрузки в строке поиска <br>
+   * <strong>onChange</strong>: Колбэк на изменение данных в строке поиска
+   *  */
+  search: {
+    initialValue?: string;
+    state: string;
+    placeholder?: string;
+    loading?: boolean;
+    onChange(value: string): void;
+  };
+
+  /** Параметры отвечают за пагинацию в таблице <br>
+   * <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу<br>
+   * <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу @default 'Rows volume' <br>
+   *  */
+  pagination?: {
+    options?: number[];
+    optionsLabel?: string;
+  };
+};
+
+export function ServerTable<TData extends object>({
+  items,
+  total = DEFAULT_PAGINATION_LIMIT,
+  limit = DEFAULT_PAGINATION_LIMIT,
+  offset = 0,
+  onChangePage,
+  search,
+  pagination,
+  columnFilters,
+  ...rest
+}: ServerTableProps<TData>) {
+  const [tempSearch, setTempSearch] = useState(search.initialValue || '');
+
+  const handleSearch = useCallback(
+    (newValue: string) => {
+      setTempSearch(newValue);
+      onSearchDebounced()(newValue.trim(), search.onChange);
+    },
+
+    [search.onChange],
+  );
+
+  const handlePageChange = useCallback(
+    ({ pageSize, pageIndex }: PaginationState) => onChangePage(pageIndex * pageSize, pageSize),
+    [onChangePage],
+  );
+
+  const pageIndex = useMemo(() => Math.floor(offset / limit), [limit, offset]);
+  const pageCount = useMemo(() => Math.ceil(total / limit), [limit, total]);
+
+  return (
+    <Table
+      {...rest}
+      data={items || []}
+      search={{
+        state: tempSearch,
+        onChange: handleSearch,
+        loading: search.loading,
+        placeholder: search.placeholder,
+      }}
+      columnFilters={columnFilters}
+      pageCount={pageCount}
+      pagination={{
+        ...pagination,
+        state: {
+          pageIndex,
+          pageSize: limit,
+        },
+        onChange: handlePageChange,
+      }}
+      pageSize={limit}
+    />
+  );
+}
+
+ServerTable.getRowActionsColumnDef = Table.getRowActionsColumnDef;
+ServerTable.getStatusColumnDef = Table.getStatusColumnDef;

package/src/components/ServerTable/constants.ts

@@ -0,0 +1,2 @@
+export const SEARCH_DELAY = 500;
+export const DEFAULT_PAGINATION_LIMIT = 10;

package/src/components/ServerTable/index.ts

@@ -0,0 +1 @@
+export * from './ServerTable';

package/src/components/ServerTable/utils.ts

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

package/src/components/Table/Table.tsx

@@ -21,6 +21,7 @@ import { Toolbar, ToolbarProps } from '@snack-uikit/toolbar';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
+import { DEFAULT_PAGE_SIZE } from '../../constants';
 import {
   BodyRow,
   ExportButton,
@@ -123,6 +124,8 @@ export type TableProps<TData extends object> = WithSupportProps<{
   /** Фильтры */
   columnFilters?: ReactNode;
 
+  dataFiltered?: boolean;
+
   /** Название файла при экспорте CSV/XLSX */
   exportFileName?: string;
 
@@ -152,6 +155,7 @@ export function Table<TData extends object>({
   search,
   sorting: sortingProp,
   columnFilters: columnFiltersProp,
+  dataFiltered,
 
   pagination: paginationProp,
 
@@ -161,7 +165,7 @@ export function Table<TData extends object>({
   onRefresh,
   onDelete,
 
-  pageSize = 10,
+  pageSize = DEFAULT_PAGE_SIZE,
   pageCount,
   loading = false,
   outline = false,
@@ -252,6 +256,10 @@ export function Table<TData extends object>({
       minSize: 40,
     },
 
+    manualSorting: Boolean(pageCount),
+    manualPagination: pageCount !== undefined,
+    manualFiltering: Boolean(pageCount),
+
     globalFilterFn: fuzzyFilter,
     onGlobalFilterChange,
 
@@ -265,11 +273,12 @@ export function Table<TData extends object>({
     enableColumnResizing: true,
 
     enableSorting: true,
-    manualSorting: false,
-    enableMultiSort: false,
-    manualPagination: pageCount !== undefined,
+
+    enableMultiSort: true,
+
     onSortingChange,
     getSortedRowModel: getSortedRowModel(),
+
     onPaginationChange,
     getPaginationRowModel: getPaginationRowModel(),
 
@@ -342,10 +351,18 @@ export function Table<TData extends object>({
   const [locales] = useLocale('Table');
   const emptyStates = useTableEmptyState({ noDataState, noResultsState });
 
+  const cssPageSize = useMemo(() => {
+    const tempPageSize = !suppressPagination ? tablePagination?.pageSize : pageSize;
+
+    return !tableRows.length ? Math.min(Math.max(tempPageSize, 5), DEFAULT_PAGE_SIZE) : tempPageSize;
+  }, [pageSize, suppressPagination, tablePagination?.pageSize, tableRows.length]);
+
   return (
     <>
       <div
-        style={{ '--page-size': !suppressPagination ? tablePagination?.pageSize : pageSize }}
+        style={{
+          '--page-size': cssPageSize,
+        }}
         className={cn(styles.wrapper, className)}
         {...extractSupportProps(rest)}
       >
@@ -397,8 +414,12 @@ export function Table<TData extends object>({
                       <BodyRow key={row.id} row={row} onRowClick={onRowClick} />
                     ))}
 
-                    {!tableRows.length && globalFilter && <TableEmptyState {...emptyStates.noResultsState} />}
-                    {!tableRows.length && !globalFilter && <TableEmptyState {...emptyStates.noDataState} />}
+                    {!tableRows.length && (globalFilter || dataFiltered) && (
+                      <TableEmptyState {...emptyStates.noResultsState} />
+                    )}
+                    {!tableRows.length && !globalFilter && !dataFiltered && (
+                      <TableEmptyState {...emptyStates.noDataState} />
+                    )}
                   </>
                 )}
               </TableContext.Provider>

package/src/components/Table/hooks.tsx

@@ -80,14 +80,12 @@ export function useTableEmptyState({
 
   return useMemo(() => {
     const noDataState: TableEmptyStateProps = noDataStateProp ?? {
-      icon: CrossSVG,
-      appearance: 'red',
+      icon: { icon: CrossSVG, appearance: 'red', decor: true },
       ...locales.noData,
     };
 
     const noResultsState: TableEmptyStateProps = noResultsStateProp ?? {
-      icon: SearchSVG,
-      appearance: 'neutral',
+      icon: { icon: SearchSVG, appearance: 'neutral', decor: true },
       ...locales.noResults,
     };
 

package/src/components/TableEmptyState/TableEmptyState.tsx

@@ -1,25 +1,23 @@
 import cn from 'classnames';
 import { ReactNode } from 'react';
 
-import { IconPredefined, IconPredefinedProps } from '@snack-uikit/icon-predefined';
-import { Typography } from '@snack-uikit/typography';
+import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
+import { InfoBlock } from '@snack-uikit/info-block';
 
 import styles from './styles.module.scss';
 
 export type TableEmptyStateProps = {
-  title: string;
-  description?: ReactNode;
+  title?: string;
+  description: string;
+  icon?: Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
+  footer?: ReactNode;
   className?: string;
-} & Pick<IconPredefinedProps, 'icon' | 'appearance'>;
+};
 
-export function TableEmptyState({ title, description, className, icon, appearance }: TableEmptyStateProps) {
+export function TableEmptyState({ className, ...props }: TableEmptyStateProps) {
   return (
     <div className={cn(styles.tableEmptyStateWrapper, className)}>
-      <IconPredefined icon={icon} size='l' appearance={appearance} />
-      <div className={styles.textWrapper}>
-        <Typography.SansTitleM>{title}</Typography.SansTitleM>
-        {description && <Typography.SansBodyM>{description}</Typography.SansBodyM>}
-      </div>
+      <InfoBlock {...props} size='m' align='vertical' />
     </div>
   );
 }

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

@@ -9,10 +9,3 @@
 
   height: calc((var(--page-size, 10) * $size-table-line-height) + $size-table-line-height);
 }
-
-.textWrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}

package/src/components/index.ts

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

package/src/constants.ts

@@ -29,3 +29,5 @@ export const SORT_FN = {
   DateTime: 'datetime',
   AlphaNumeric: 'alphanumeric',
 } as const;
+
+export const DEFAULT_PAGE_SIZE = 10;

package/src/helperComponents/Cells/CopyCell/CopyCell.tsx

@@ -0,0 +1,17 @@
+import { TruncateString } from '@snack-uikit/truncate-string';
+
+import { CopyButton } from './components';
+import styles from './styles.module.scss';
+
+export type CopyCellProps = {
+  value?: string | number;
+};
+
+export function CopyCell({ value }: CopyCellProps) {
+  return (
+    <div className={styles.copyCell}>
+      <TruncateString text={String(value)} maxLines={1} />
+      <CopyButton valueToCopy={value} className={styles.copyButton} />
+    </div>
+  );
+}

package/src/helperComponents/Cells/CopyCell/components/CopyButton/CopyButton.tsx

@@ -0,0 +1,44 @@
+import copyToClipboard from 'copy-to-clipboard';
+import { MouseEventHandler, useEffect, useRef, useState } from 'react';
+
+import { ButtonFunction } from '@snack-uikit/button';
+import { CheckSVG, CopySVG } from '@snack-uikit/icons';
+
+export type CopyButtonProps = {
+  valueToCopy?: string | number;
+  className?: string;
+};
+
+export function CopyButton({ valueToCopy, className }: CopyButtonProps) {
+  const [isChecked, setIsCheckedOpen] = useState(false);
+  const timerId = useRef<NodeJS.Timeout>();
+  const openChecked = () => setIsCheckedOpen(true);
+  const closeChecked = () => setIsCheckedOpen(false);
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
+    event.stopPropagation();
+    valueToCopy && copyToClipboard(String(valueToCopy), { format: 'text/plain' });
+    openChecked();
+    clearTimeout(timerId.current);
+    timerId.current = setTimeout(closeChecked, 1000);
+  };
+
+  useEffect(
+    () => () => {
+      closeChecked();
+      clearTimeout(timerId.current);
+    },
+    [],
+  );
+
+  return (
+    <ButtonFunction
+      onClick={handleClick}
+      data-test-id='button-copy-value'
+      type='button'
+      icon={isChecked ? <CheckSVG /> : <CopySVG />}
+      size='s'
+      className={className}
+    />
+  );
+}

package/src/helperComponents/Cells/CopyCell/components/CopyButton/index.ts

@@ -0,0 +1 @@
+export * from './CopyButton';

package/src/helperComponents/Cells/CopyCell/components/index.ts

@@ -0,0 +1 @@
+export * from './CopyButton';

package/src/helperComponents/Cells/CopyCell/index.ts

@@ -0,0 +1 @@
+export * from './CopyCell';

package/src/helperComponents/Cells/CopyCell/styles.module.scss

@@ -0,0 +1,21 @@
+@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+.copyCell {
+  cursor: pointer;
+
+  display: flex;
+  gap: $dimension-050m;
+  align-items: center;
+
+  min-width: 0;
+  max-width: 100%;
+  .copyButton {
+    display: none;
+  }
+
+  &:hover {
+    .copyButton {
+      display: inline-flex;
+    }
+  }
+}

package/src/helperComponents/Cells/RowActionsCell/RowActionsCell.tsx

@@ -22,7 +22,7 @@ export type RowActionProps<TData> = Pick<BaseItemProps, 'content' | 'disabled'>
   tagLabel?: string;
   id?: string;
   hidden?: boolean;
-  onClick(row: RowActionInfo<TData>, e: MouseEvent<HTMLButtonElement>): void;
+  onClick(row: RowActionInfo<TData>, e: MouseEvent<HTMLElement>): void;
 };
 
 type RowActionsCellProps<TData> = {
@@ -34,7 +34,7 @@ function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
   const { droplistOpened, setDroplistOpen } = useRowContext();
   const triggerRef = useRef(null);
 
-  const handleItemClick = (item: RowActionProps<TData>) => (e: MouseEvent<HTMLButtonElement>) => {
+  const handleItemClick = (item: RowActionProps<TData>) => (e: MouseEvent<HTMLElement>) => {
     item.onClick({ rowId: row.id, itemId: item.id, data: row.original }, e);
   };
 

package/src/helperComponents/Cells/StatusCell/StatusCell.tsx

@@ -16,11 +16,13 @@ type StatusCellProps = {
   appearance: StatusAppearance;
 };
 
+export type MapStatusToAppearanceFnType = (value: string | number) => StatusAppearance;
+
 type BaseStatusColumnDef = {
   /** Имя ключа соответствующее полю в data */
   accessorKey: string;
   /** Маппинг значений статуса на цвета */
-  mapStatusToAppearance(value: string | number): StatusAppearance;
+  mapStatusToAppearance: MapStatusToAppearanceFnType;
   /** Включение/выключение сортировки */
   enableSorting?: boolean;
 };

package/src/helperComponents/Cells/index.ts

@@ -3,3 +3,4 @@ export * from './RowActionsCell';
 export * from './HeaderCell';
 export * from './SelectionCell';
 export * from './StatusCell';
+export * from './CopyCell';

package/src/index.ts

@@ -1,3 +1,5 @@
 export * from './components';
 export * from './types';
 export * from './exportTable';
+
+export { type CopyCellProps, type ActionsGenerator, CopyCell } from './helperComponents';

package/src/types.ts

@@ -71,6 +71,8 @@ export type {
   RowInfo,
   RowClickHandler,
   ActionsGenerator,
+  CopyCellProps,
+  MapStatusToAppearanceFnType,
 } from './helperComponents';
 
 export type {