@snack-uikit/table 0.11.4 → 0.11.6-preview-a0815a00.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.11.5 (2024-02-02)
+
+### Only dependencies have been changed
+* [@snack-uikit/chips@0.10.9](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/chips/CHANGELOG.md)
+
+
+
+
+
 ## 0.11.4 (2024-02-02)
 
 ### Only dependencies have been changed

package/README.md

@@ -107,7 +107,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | data* | `TData[]` | - | Данные для отрисовки |
 | 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 | `{ 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 строки поиска |
+| search | `{ initialValue?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; disableDefaultSearch?: boolean; }` | 'Search'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
 | pageSize | `number` | 10 | Максимальное кол-во строк на страницу |
 | pagination | `{ state?: PaginationState; options?: number[]; optionsLabel?: string; onChange?(state: PaginationState): void; }` | 'Rows volume: ' <br> <strong>onChange</strong>: Колбэк на изменение пагинации | Параметры отвечают за пагинацию в таблице <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
 | pageCount | `number` | - | Кол-во страниц (используется для внешнего управления) |
@@ -144,6 +144,52 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | actionsGenerator* | `ActionsGenerator<TData>` | - | Действия для строки |
 | pinned | `boolean` | - | Закрепление колонки справа в таблице |
+## ServerTable
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| onRefresh* | `() => void` | - | Колбек обновления данных |
+| 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 строки поиска |
+| columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
+| onChangePage* | `(offset: number, limit: number) => void` | - |  |
+| items | `TData[]` | - | Данные для отрисовки |
+| total | `number` | 10 | Общее кол-во строк |
+| limit | `number` | 10 | Кол-во строк на страницу |
+| offset | `number` | - | Смещение |
+| 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>: Колбэк на выбор строк |
+| pagination | `{ options?: number[]; optionsLabel?: string; }` | 'Rows volume' <br> | Параметры отвечают за пагинацию в таблице <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу<br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
+| onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
+| className | `string` | - | CSS-класс |
+| loading | `boolean` | - | Состояние загрузки |
+| onDelete | `(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void) => void` | - | Колбек удаления выбранных |
+| outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
+| columnFilters | `ReactNode` | - | Фильтры |
+| exportFileName | `string` | - | Название файла при экспорте CSV/XLSX |
+| moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
+| noDataState | `TableEmptyStateProps` | - | Экран при отстутствии данных |
+| noResultsState | `TableEmptyStateProps` | - | Экран при отстутствии результатов поиска |
+| suppressToolbar | `boolean` | - | Отключение тулбара |
+| suppressPagination | `boolean` | - | Отключение пагинации |
+## ServerTable.getRowActionsColumnDef
+Вспомогательная функция для создания ячейки с дополнительными действиями у строки
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| actionsGenerator* | `ActionsGenerator<TData>` | - | Действия для строки |
+| pinned | `boolean` | - | Закрепление колонки справа в таблице |
+## ServerTable.getStatusColumnDef
+Вспомогательная функция для создания ячейки со статусом
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| mapStatusToAppearance* | `(value: string \| number) => StatusAppearance` | - | Маппинг значений статуса на цвета |
+| 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,93 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { ColumnDefinition, RowClickHandler, RowSelectionOptions, RowSelectionState, SortingState, TableEmptyStateProps, ToolbarProps } from '../../types';
+export type ServerTableProps<TData extends object> = WithSupportProps<{
+    /** Данные для отрисовки */
+    items?: TData[];
+    /** Общее кол-во строк  @default 10 */
+    total?: number;
+    /** Кол-во строк на страницу @default 10 */
+    limit?: number;
+    /** Смещение @default 0 */
+    offset?: number;
+    onChangePage(offset: number, limit: number): void;
+    /** Определение внешнего вида и функционала колонок */
+    columnDefinitions: ColumnDefinition<TData>[];
+    /** Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br>
+     *  <strong>initialState</strong>: Начальное состояние сортировки <br>
+     *  <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br>
+     * <strong>onChange</strong>: Колбэк на изменение сортировки
+     *  */
+    sorting?: {
+        initialState?: SortingState;
+        state: SortingState;
+        onChange(state: SortingState): void;
+    };
+    /** Параметры отвечают за возможность выбора строк <br>
+     * <strong>initialState</strong>: Начальное состояние выбора строк <br>
+     * <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br>
+     * <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br>
+     * <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br>
+     * <strong>onChange</strong>: Колбэк на выбор строк
+     *  */
+    rowSelection?: {
+        initialState?: RowSelectionState;
+        state: RowSelectionState;
+        enable?: RowSelectionOptions<TData>['enableRowSelection'];
+        multiRow?: boolean;
+        onChange(state: RowSelectionState): 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;
+    };
+    /** Колбэк клика по строке */
+    onRowClick?: RowClickHandler<TData>;
+    /** CSS-класс */
+    className?: string;
+    /** Состояние загрузки */
+    loading?: boolean;
+    /** Колбек обновления данных */
+    onRefresh(): void;
+    /** Колбек удаления выбранных */
+    onDelete?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
+    /** Внешний бордер для тулбара и таблицы*/
+    outline?: boolean;
+    /** Фильтры*/
+    columnFilters?: ReactNode;
+    /** Название файла при экспорте CSV/XLSX*/
+    exportFileName?: string;
+    /** Элементы выпадающего списка кнопки с действиями */
+    moreActions?: ToolbarProps['moreActions'];
+    /** Экран при отстутствии данных */
+    noDataState?: TableEmptyStateProps;
+    /** Экран при отстутствии результатов поиска */
+    noResultsState?: TableEmptyStateProps;
+    /** Отключение тулбара */
+    suppressToolbar?: boolean;
+    /** Отключение пагинации */
+    suppressPagination?: boolean;
+}>;
+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,43 @@
+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 debounce from 'lodash.debounce';
+import { useCallback, useMemo, useState } from 'react';
+import { Table } from '../Table';
+import { DEFAULT_PAGINATION_LIMIT, SEARCH_DELAY } from './constants';
+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 onSearchDebounced = useMemo(() => debounce((newValue, onChange) => {
+        onChange(newValue);
+    }, SEARCH_DELAY), []);
+    const handleSearch = useCallback((newValue) => {
+        setTempSearch(newValue);
+        onSearchDebounced(newValue.trim(), search.onChange);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [limit, onSearchDebounced]);
+    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({ 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 }, rest)));
+}
+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/Table/Table.d.ts

@@ -47,6 +47,7 @@ export type TableProps<TData extends object> = WithSupportProps<{
         placeholder?: string;
         loading?: boolean;
         onChange?(value: string): void;
+        disableDefaultSearch?: boolean;
     };
     /** Максимальное кол-во строк на страницу @default 10 */
     pageSize?: number;

package/dist/components/Table/Table.js

@@ -22,12 +22,12 @@ import { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getSelectio
 import { fuzzyFilter } from '../../utils';
 import { TableEmptyState } from '../TableEmptyState';
 import { TablePagination } from '../TablePagination';
-import { DEFAULT_NO_DATA_TABLE_STATE, DEFAULT_NO_RESULTS_TABLE_STATE } from './constants';
+import { DEFAULT_NO_DATA_TABLE_STATE, DEFAULT_NO_RESULTS_TABLE_STATE, DEFAULT_PAGE_SIZE } from './constants';
 import { useLoadingTable, useStateControl } 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 = DEFAULT_NO_DATA_TABLE_STATE, noResultsState = DEFAULT_NO_RESULTS_TABLE_STATE, 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, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportFileName, noDataState = DEFAULT_NO_DATA_TABLE_STATE, noResultsState = DEFAULT_NO_RESULTS_TABLE_STATE, 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"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -73,6 +73,9 @@ export function Table(_a) {
             enableResizing: false,
             minSize: 40,
         },
+        manualSorting: Boolean(pageCount),
+        manualPagination: pageCount !== undefined,
+        manualFiltering: Boolean(pageCount),
         globalFilterFn: fuzzyFilter,
         onGlobalFilterChange,
         onRowSelectionChange,
@@ -82,9 +85,7 @@ export function Table(_a) {
         getFilteredRowModel: getFilteredRowModel(),
         enableColumnResizing: true,
         enableSorting: true,
-        manualSorting: false,
-        enableMultiSort: false,
-        manualPagination: pageCount !== undefined,
+        enableMultiSort: true,
         onSortingChange,
         getSortedRowModel: getSortedRowModel(),
         onPaginationChange,
@@ -140,7 +141,8 @@ export function Table(_a) {
     const tableRows = table.getRowModel().rows;
     const loadingTableRows = loadingTable.getRowModel().rows;
     const tablePagination = table.getState().pagination;
-    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 prePageSize = !suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize;
+    return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { '--page-size': !tableRows.length ? Math.min(prePageSize, DEFAULT_PAGE_SIZE) : prePageSize }, 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,

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

@@ -1,3 +1,4 @@
 import { TableEmptyStateProps } from '../TableEmptyState';
 export declare const DEFAULT_NO_DATA_TABLE_STATE: TableEmptyStateProps;
 export declare const DEFAULT_NO_RESULTS_TABLE_STATE: TableEmptyStateProps;
+export declare const DEFAULT_PAGE_SIZE = 10;

package/dist/components/Table/constants.js

@@ -11,3 +11,4 @@ export const DEFAULT_NO_RESULTS_TABLE_STATE = {
     title: 'Not found',
     description: 'Try entering another query',
 };
+export const DEFAULT_PAGE_SIZE = 10;

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

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.11.4",
+  "version": "0.11.6-preview-a0815a00.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,24 +33,25 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.15.1",
-    "@snack-uikit/chips": "0.10.8",
+    "@snack-uikit/chips": "0.10.9",
     "@snack-uikit/icon-predefined": "0.4.1",
     "@snack-uikit/icons": "0.20.0",
-    "@snack-uikit/list": "0.2.0",
+    "@snack-uikit/list": "0.2.1-preview-a0815a00.0",
     "@snack-uikit/pagination": "0.6.1",
     "@snack-uikit/scroll": "0.5.0",
     "@snack-uikit/skeleton": "0.3.2",
     "@snack-uikit/tag": "0.7.1",
     "@snack-uikit/toggles": "0.9.4",
-    "@snack-uikit/toolbar": "0.7.4",
+    "@snack-uikit/toolbar": "0.7.5-preview-a0815a00.0",
     "@snack-uikit/truncate-string": "0.4.6",
     "@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",
+    "lodash.debounce": "4.0.8",
     "uncontrollable": "8.0.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz"
   },
-  "gitHead": "07c554af2d1a8128e587ba88d5d36e6da3c8f1ce"
+  "gitHead": "bccfe5b8df0866bff03fc00d5f5480988da8512b"
 }

package/src/components/ServerTable/ServerTable.tsx

@@ -0,0 +1,182 @@
+import debounce from 'lodash.debounce';
+import { ReactNode, useCallback, useMemo, useState } from 'react';
+
+import { WithSupportProps } from '@snack-uikit/utils';
+
+import {
+  ColumnDefinition,
+  PaginationState,
+  RowClickHandler,
+  RowSelectionOptions,
+  RowSelectionState,
+  SortingState,
+  TableEmptyStateProps,
+  ToolbarProps,
+} from '../../types';
+import { Table } from '../Table';
+import { DEFAULT_PAGINATION_LIMIT, SEARCH_DELAY } from './constants';
+
+export type ServerTableProps<TData extends object> = WithSupportProps<{
+  /** Данные для отрисовки */
+  items?: TData[];
+  /** Общее кол-во строк  @default 10 */
+  total?: number;
+  /** Кол-во строк на страницу @default 10 */
+  limit?: number;
+  /** Смещение @default 0 */
+  offset?: number;
+
+  onChangePage(offset: number, limit: number): void;
+
+  /** Определение внешнего вида и функционала колонок */
+  columnDefinitions: ColumnDefinition<TData>[];
+  /** Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br>
+   *  <strong>initialState</strong>: Начальное состояние сортировки <br>
+   *  <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br>
+   * <strong>onChange</strong>: Колбэк на изменение сортировки
+   *  */
+  sorting?: {
+    initialState?: SortingState;
+    state: SortingState;
+    onChange(state: SortingState): void;
+  };
+  /** Параметры отвечают за возможность выбора строк <br>
+   * <strong>initialState</strong>: Начальное состояние выбора строк <br>
+   * <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br>
+   * <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br>
+   * <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br>
+   * <strong>onChange</strong>: Колбэк на выбор строк
+   *  */
+  rowSelection?: {
+    initialState?: RowSelectionState;
+    state: RowSelectionState;
+    enable?: RowSelectionOptions<TData>['enableRowSelection'];
+    multiRow?: boolean;
+    onChange(state: RowSelectionState): 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;
+  };
+
+  /** Колбэк клика по строке */
+  onRowClick?: RowClickHandler<TData>;
+  /** CSS-класс */
+  className?: string;
+
+  /** Состояние загрузки */
+  loading?: boolean;
+
+  /** Колбек обновления данных */
+  onRefresh(): void;
+
+  /** Колбек удаления выбранных */
+  onDelete?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
+
+  /** Внешний бордер для тулбара и таблицы*/
+  outline?: boolean;
+
+  /** Фильтры*/
+  columnFilters?: ReactNode;
+
+  /** Название файла при экспорте CSV/XLSX*/
+  exportFileName?: string;
+
+  /** Элементы выпадающего списка кнопки с действиями */
+  moreActions?: ToolbarProps['moreActions'];
+
+  /** Экран при отстутствии данных */
+  noDataState?: TableEmptyStateProps;
+  /** Экран при отстутствии результатов поиска */
+  noResultsState?: TableEmptyStateProps;
+
+  /** Отключение тулбара */
+  suppressToolbar?: boolean;
+  /** Отключение пагинации */
+  suppressPagination?: boolean;
+}>;
+
+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 onSearchDebounced = useMemo(
+    () =>
+      debounce((newValue: string, onChange: (newValue: string) => void) => {
+        onChange(newValue);
+      }, SEARCH_DELAY),
+    [],
+  );
+
+  const handleSearch = useCallback(
+    (newValue: string) => {
+      setTempSearch(newValue);
+      onSearchDebounced(newValue.trim(), search.onChange);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [limit, onSearchDebounced],
+  );
+
+  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
+      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}
+      {...rest}
+    />
+  );
+}
+
+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/Table/Table.tsx

@@ -36,7 +36,7 @@ import { ColumnDefinition } from '../../types';
 import { fuzzyFilter } from '../../utils';
 import { TableEmptyState, TableEmptyStateProps } from '../TableEmptyState';
 import { TablePagination } from '../TablePagination';
-import { DEFAULT_NO_DATA_TABLE_STATE, DEFAULT_NO_RESULTS_TABLE_STATE } from './constants';
+import { DEFAULT_NO_DATA_TABLE_STATE, DEFAULT_NO_RESULTS_TABLE_STATE, DEFAULT_PAGE_SIZE } from './constants';
 import { useLoadingTable, useStateControl } from './hooks';
 import styles from './styles.module.scss';
 
@@ -82,6 +82,7 @@ export type TableProps<TData extends object> = WithSupportProps<{
     placeholder?: string;
     loading?: boolean;
     onChange?(value: string): void;
+    disableDefaultSearch?: boolean;
   };
 
   /** Максимальное кол-во строк на страницу @default 10 */
@@ -161,7 +162,7 @@ export function Table<TData extends object>({
   onRefresh,
   onDelete,
 
-  pageSize = 10,
+  pageSize = DEFAULT_PAGE_SIZE,
   pageCount,
   loading = false,
   outline = false,
@@ -252,6 +253,10 @@ export function Table<TData extends object>({
       minSize: 40,
     },
 
+    manualSorting: Boolean(pageCount),
+    manualPagination: pageCount !== undefined,
+    manualFiltering: Boolean(pageCount),
+
     globalFilterFn: fuzzyFilter,
     onGlobalFilterChange,
 
@@ -265,11 +270,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(),
 
@@ -339,10 +345,12 @@ export function Table<TData extends object>({
   const loadingTableRows = loadingTable.getRowModel().rows;
   const tablePagination = table.getState().pagination;
 
+  const prePageSize = !suppressPagination ? tablePagination?.pageSize : pageSize;
+
   return (
     <>
       <div
-        style={{ '--page-size': !suppressPagination ? tablePagination?.pageSize : pageSize }}
+        style={{ '--page-size': !tableRows.length ? Math.min(prePageSize, DEFAULT_PAGE_SIZE) : prePageSize }}
         className={cn(styles.wrapper, className)}
         {...extractSupportProps(rest)}
       >

package/src/components/Table/constants.ts

@@ -15,3 +15,5 @@ export const DEFAULT_NO_RESULTS_TABLE_STATE: TableEmptyStateProps = {
   title: 'Not found',
   description: 'Try entering another query',
 } as const;
+
+export const DEFAULT_PAGE_SIZE = 10;

package/src/components/index.ts

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