@cloud-ru/uikit-product-mobile-table 0.14.0 → 0.16.0

package/dist/esm/helperComponents/TableSorting/utils.d.ts

@@ -0,0 +1,9 @@
+import { Header } from '@tanstack/react-table';
+import { ColumnDefinition } from '@snack-uikit/table';
+export declare function getHeaderLabel<TData extends object>(header: Header<TData, unknown>): string;
+export declare function createColumnDefMap<TData extends object>(columnDefinitions: ColumnDefinition<TData>[]): Map<string, ColumnDefinition<TData>>;
+export declare function groupHeadersByPinned<TData extends object>(headers: Header<TData, unknown>[], columnDefMap: Map<string, ColumnDefinition<TData>>): {
+    leftHeaders: Header<TData, unknown>[];
+    unpinnedHeaders: Header<TData, unknown>[];
+    rightHeaders: Header<TData, unknown>[];
+};

package/dist/esm/helperComponents/TableSorting/utils.js

@@ -0,0 +1,70 @@
+export function getHeaderLabel(header) {
+    const headerDef = header.column.columnDef.header;
+    if (typeof headerDef === 'string') {
+        return headerDef;
+    }
+    if (typeof headerDef === 'function') {
+        try {
+            const context = header.getContext();
+            const result = headerDef(context);
+            if (typeof result === 'string' || typeof result === 'number') {
+                return String(result);
+            }
+            if (result != null && typeof result === 'object' && 'props' in result && result.props) {
+                const children = result.props.children;
+                if (typeof children === 'string' || typeof children === 'number') {
+                    return String(children);
+                }
+                if (Array.isArray(children)) {
+                    const textChild = children.find(child => typeof child === 'string' || typeof child === 'number');
+                    if (textChild != null) {
+                        return String(textChild);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.error('Error getting header label:', error);
+        }
+    }
+    return header.id || header.column.id || '';
+}
+export function createColumnDefMap(columnDefinitions) {
+    const map = new Map();
+    columnDefinitions.forEach(colDef => {
+        let id;
+        if ('id' in colDef && colDef.id) {
+            id = colDef.id;
+        }
+        else if ('accessorKey' in colDef && colDef.accessorKey) {
+            id = String(colDef.accessorKey);
+        }
+        if (id) {
+            map.set(id, colDef);
+        }
+    });
+    return map;
+}
+export function groupHeadersByPinned(headers, columnDefMap) {
+    const leftHeaders = [];
+    const unpinnedHeaders = [];
+    const rightHeaders = [];
+    headers.forEach(header => {
+        const columnDef = columnDefMap.get(header.id);
+        if (!columnDef) {
+            unpinnedHeaders.push(header);
+            return;
+        }
+        switch (columnDef.pinned) {
+            case 'left':
+                leftHeaders.push(header);
+                break;
+            case 'right':
+                rightHeaders.push(header);
+                break;
+            default:
+                unpinnedHeaders.push(header);
+        }
+    });
+    return { leftHeaders, unpinnedHeaders, rightHeaders };
+}

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

@@ -1,5 +1,7 @@
+export * from './ColumnsSettings';
 export * from './RowActionsCell';
 export * from './StatusColumnDef';
 export * from './TableCard';
-export * from './TablePagination';
 export * from './TableEmptyState';
+export * from './TablePagination';
+export * from './TableSorting';

package/dist/esm/helperComponents/index.js

@@ -1,5 +1,7 @@
+export * from './ColumnsSettings';
 export * from './RowActionsCell';
 export * from './StatusColumnDef';
 export * from './TableCard';
-export * from './TablePagination';
 export * from './TableEmptyState';
+export * from './TablePagination';
+export * from './TableSorting';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-mobile-table",
   "title": "Mobile Table",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -42,11 +42,14 @@
     "@cloud-ru/uikit-product-mobile-toolbar": "0.4.11",
     "@cloud-ru/uikit-product-utils": "8.0.1",
     "@snack-uikit/button": "0.19.16",
+    "@snack-uikit/figma-tokens": "18.0.1",
+    "@snack-uikit/icons": "0.27.4",
     "@snack-uikit/info-block": "0.6.35",
+    "@snack-uikit/list": "0.32.10",
     "@snack-uikit/pagination": "0.10.21",
     "@snack-uikit/skeleton": "0.6.9",
     "@snack-uikit/status": "0.10.7",
-    "@snack-uikit/table": "0.37.23",
+    "@snack-uikit/table": "0.37.25",
     "@snack-uikit/toggles": "0.13.23",
     "@tanstack/match-sorter-utils": "8.19.4",
     "@tanstack/react-table": "8.12.0",
@@ -60,5 +63,5 @@
   "devDependencies": {
     "@types/lodash.debounce": "4.0.9"
   },
-  "gitHead": "6366d4a4912c09f95af6ba794df7b5a246893762"
+  "gitHead": "10d32fab2d99b115e56be7ea6025eae9ad31304b"
 }

package/src/components/MobileTable.tsx

@@ -9,14 +9,21 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import cn from 'classnames';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 
 import { useLocale } from '@cloud-ru/uikit-product-locale';
 import { FiltersState, MobileChipChoiceRowProps } from '@cloud-ru/uikit-product-mobile-chips';
 import { MobileToolbar, MobileToolbarProps } from '@cloud-ru/uikit-product-mobile-toolbar';
 import { extractSupportProps, WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
-import { PaginationState, TableProps } from '@snack-uikit/table';
+import {
+  getPinnedGroups,
+  PaginationState,
+  TableProps,
+  useColumnOrderByDrag,
+  useColumnSettings,
+  usePageReset,
+} from '@snack-uikit/table';
 
 import {
   getRowActionsColumnDef,
@@ -24,8 +31,10 @@ import {
   TableCard,
   TableEmptyState,
   TablePagination,
+  TableSorting,
   useEmptyState,
 } from '../helperComponents';
+import { ColumnsSettings } from '../helperComponents/ColumnsSettings';
 import { DEFAULT_PAGE_SIZE } from './constants';
 import { useLoadingTable, useStateControl } from './hooks';
 import styles from './styles.module.scss';
@@ -40,7 +49,6 @@ export type MobileTableProps<TData extends object, TFilters extends FiltersState
   | 'suppressSearch'
   | 'search'
   | 'onRefresh'
-  | 'toolbarAfter'
   | 'moreActions'
   | 'className'
   | 'enableFuzzySearch'
@@ -59,6 +67,10 @@ export type MobileTableProps<TData extends object, TFilters extends FiltersState
   | 'getRowId'
   | 'rowSelection'
   | 'bulkActions'
+  | 'columnsSettings'
+  | 'savedState'
+  | 'autoResetPageIndex'
+  | 'toolbarAfter'
 > &
   WithSupportProps<{
     headlineId?: string;
@@ -93,9 +105,12 @@ export function MobileTable<TData extends object, TFilters extends FiltersState
   manualSorting = false,
   manualPagination = false,
   manualFiltering = false,
+  autoResetPageIndex = false,
   getRowId,
   rowSelection: rowSelectionProp,
   bulkActions: bulkActionsProp,
+  columnsSettings: columnsSettingsProp,
+  savedState,
   ...rest
 }: MobileTableProps<TData, TFilters>) {
   const defaultPaginationState = useMemo(() => ({ pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE }), []);
@@ -126,18 +141,96 @@ export function MobileTable<TData extends object, TFilters extends FiltersState
     [rowSelectionProp],
   );
 
+  const enableSelection = Boolean(rowSelectionProp?.enable);
+
+  const pinnedGroups = useMemo(() => getPinnedGroups(columnDefinitions), [columnDefinitions]);
+
+  const {
+    enabledColumns,
+    setEnabledColumns,
+    getColumnsSettings,
+    enabledTableColumns,
+    enabledColumnsDefinitions,
+    areColumnsSettingsEnabled,
+  } = useColumnSettings({
+    columnDefinitions,
+    pinnedGroups,
+    savedState,
+    columnsSettings: columnsSettingsProp,
+    rowSelection: undefined,
+    enableSelectPinned: false,
+    expanding: undefined,
+  });
+
+  const { columnOrder, setColumnOrder, enableColumnsOrderSortByDrag } = useColumnOrderByDrag<TData>({
+    tableColumns: columnDefinitions,
+    savedState,
+    columnSettings: columnsSettingsProp,
+  });
+
+  const columnsSettings = useMemo(() => getColumnsSettings(columnOrder), [columnOrder, getColumnsSettings]);
+
+  // Получаем список колонок с mode: 'hidden', которые всегда доступны для сортировки
+  const hiddenColumnsBySettings = useMemo(() => {
+    if (!areColumnsSettingsEnabled) return new Set<string>();
+
+    const hidden = new Set<string>();
+    columnDefinitions.forEach(colDef => {
+      let columnId: string | undefined;
+      if ('id' in colDef && colDef.id) {
+        columnId = colDef.id;
+      } else if ('accessorKey' in colDef && colDef.accessorKey) {
+        columnId = String(colDef.accessorKey);
+      }
+
+      if (columnId) {
+        const colDefWithSettings = colDef as typeof colDef & {
+          columnSettings?: { mode?: 'hidden' | string };
+        };
+        if (colDefWithSettings.columnSettings?.mode === 'hidden') {
+          hidden.add(columnId);
+        }
+      }
+    });
+    return hidden;
+  }, [areColumnsSettingsEnabled, columnDefinitions]);
+
+  // Сбрасываем сортировку, если колонка с активной сортировкой была скрыта
+  // Колонки с mode: 'hidden' всегда доступны для сортировки
+  useEffect(() => {
+    if (areColumnsSettingsEnabled && enabledColumns && sorting.length > 0) {
+      const activeSortColumnId = sorting[0]?.id;
+      if (activeSortColumnId) {
+        const isHiddenColumn = hiddenColumnsBySettings.has(activeSortColumnId);
+        const isEnabledColumn = enabledColumns.includes(activeSortColumnId);
+        // Сбрасываем сортировку только если колонка не скрыта через mode: 'hidden' и не включена
+        if (!isHiddenColumn && !isEnabledColumn) {
+          // Колонка с активной сортировкой скрыта - сбрасываем сортировку
+          onSortingChange([]);
+        }
+      }
+    }
+  }, [areColumnsSettingsEnabled, enabledColumns, sorting, onSortingChange, hiddenColumnsBySettings]);
+
   const table = useReactTable<TData>({
     data,
-    columns: columnDefinitions,
+    columns: enabledTableColumns,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
 
-    state: { pagination, globalFilter, sorting, rowSelection },
+    state: {
+      pagination,
+      globalFilter,
+      sorting,
+      rowSelection,
+      columnOrder: enableColumnsOrderSortByDrag ? columnOrder : undefined,
+    },
     pageCount,
     onPaginationChange,
     onSortingChange,
+    onColumnOrderChange: enableColumnsOrderSortByDrag ? setColumnOrder : undefined,
     globalFilterFn: enableFuzzySearch ? fuzzyFilter : 'includesString',
 
     enableFilters: true,
@@ -146,6 +239,8 @@ export function MobileTable<TData extends object, TFilters extends FiltersState
     manualFiltering,
     getRowId,
 
+    autoResetPageIndex,
+
     onRowSelectionChange,
     enableGrouping: true,
     enableRowSelection,
@@ -155,7 +250,7 @@ export function MobileTable<TData extends object, TFilters extends FiltersState
 
   const { loadingTable } = useLoadingTable<TData, TFilters>({
     pageSize: DEFAULT_PAGE_SIZE,
-    columnDefinitions,
+    columnDefinitions: enabledColumnsDefinitions,
   });
 
   const tableRows = table.getRowModel().rows;
@@ -169,8 +264,6 @@ export function MobileTable<TData extends object, TFilters extends FiltersState
     onRefresh?.();
   }, [onRefresh, table]);
 
-  const enableSelection = Boolean(rowSelectionProp?.enable);
-
   const bulkActions: MobileToolbarProps<TFilters>['bulkActions'] = useMemo(
     () =>
       enableSelection
@@ -206,6 +299,26 @@ export function MobileTable<TData extends object, TFilters extends FiltersState
     ? 'multiple'
     : 'single';
 
+  const hasSortableColumns = useMemo(
+    () => columnDefinitions.some(column => column.enableSorting !== false),
+    [columnDefinitions],
+  );
+
+  const shouldShowSorting = useMemo(
+    () => Boolean(sortingProp) || hasSortableColumns,
+    [sortingProp, hasSortableColumns],
+  );
+
+  const tableFilteredRows = table.getFilteredRowModel().rows;
+
+  usePageReset({
+    manualPagination,
+    maximumAvailablePage: pageCount || tableFilteredRows.length / pagination.pageSize,
+    pagination,
+    onPaginationChange,
+    autoResetPageIndex,
+  });
+
   return (
     <div className={cn(styles.tableWrapper, className)} {...extractSupportProps(rest)}>
       {(!suppressToolbar || columnFilters) && (
@@ -224,7 +337,28 @@ export function MobileTable<TData extends object, TFilters extends FiltersState
             onRefresh={onRefresh ? handleOnRefresh : undefined}
             outline
             filterRow={columnFilters}
-            after={toolbarAfter}
+            after={
+              toolbarAfter || shouldShowSorting || (areColumnsSettingsEnabled && columnsSettings) ? (
+                <>
+                  {toolbarAfter}
+                  {shouldShowSorting && (
+                    <TableSorting
+                      table={table}
+                      columnDefinitions={columnDefinitions}
+                      enabledColumns={areColumnsSettingsEnabled ? enabledColumns : undefined}
+                      areColumnsSettingsEnabled={areColumnsSettingsEnabled}
+                    />
+                  )}
+                  {areColumnsSettingsEnabled && columnsSettings && (
+                    <ColumnsSettings
+                      columnsSettings={columnsSettings}
+                      enabledColumns={enabledColumns}
+                      setEnabledColumns={setEnabledColumns}
+                    />
+                  )}
+                </>
+              ) : undefined
+            }
             moreActions={moreActions}
             bulkActions={bulkActions}
             selectedCount={table.getSelectedRowModel().rows.length}
@@ -251,6 +385,7 @@ export function MobileTable<TData extends object, TFilters extends FiltersState
                 headlineId={headlineId}
                 row={row}
                 table={table}
+                selectionAppearance={rowSelectionProp?.appearance}
                 selection={enableSelection ? selectionMode : 'none'}
               />
             ))}

package/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './AdaptiveTable';
 export * from './AdaptiveServerTable';
 export * from './MobileTable';
+export * from '../helperComponents';

package/src/helperComponents/ColumnsSettings/ColumnsSettings.tsx

@@ -0,0 +1,28 @@
+import { MobileDroplist } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { ButtonFunction } from '@snack-uikit/button';
+import { FunctionSettingsSVG } from '@snack-uikit/icons';
+import { GroupSelectItemProps } from '@snack-uikit/list';
+
+import styles from './styles.module.scss';
+export type ColumnsSettingsProps = {
+  enabledColumns: string[];
+  setEnabledColumns(enabledColumns: string[]): void;
+  columnsSettings: [GroupSelectItemProps];
+};
+
+export function ColumnsSettings({ columnsSettings, enabledColumns, setEnabledColumns }: ColumnsSettingsProps) {
+  return (
+    <MobileDroplist
+      className={styles.columnsSettings}
+      items={columnsSettings}
+      selection={{
+        value: enabledColumns,
+        onChange: setEnabledColumns,
+        mode: 'multiple',
+      }}
+      data-test-id='table__column-settings-droplist'
+    >
+      <ButtonFunction size='m' data-test-id='table__column-settings' icon={<FunctionSettingsSVG />} />
+    </MobileDroplist>
+  );
+}

package/src/helperComponents/ColumnsSettings/index.ts

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

package/src/helperComponents/ColumnsSettings/styles.module.scss

@@ -0,0 +1,5 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table' as table;
+
+.columnsSettings {
+  min-width: 256px;
+}

package/src/helperComponents/TableCard/TableCard.tsx

@@ -1,6 +1,7 @@
 import { flexRender, Row, Table } from '@tanstack/react-table';
 import { useCallback } from 'react';
 
+import { RowAppearance } from '@snack-uikit/table';
 import { Checkbox, Radio } from '@snack-uikit/toggles';
 
 import { ROW_ACTIONS_COLUMN_ID } from '../../constants';
@@ -11,9 +12,16 @@ type TableCardProps<TData extends object> = {
   row: Row<TData>;
   table: Table<TData>;
   selection: 'multiple' | 'single' | 'none';
+  selectionAppearance?: RowAppearance;
 };
 
-export function TableCard<TData extends object>({ headlineId, table, row, selection }: TableCardProps<TData>) {
+export function TableCard<TData extends object>({
+  headlineId,
+  table,
+  row,
+  selection,
+  selectionAppearance = RowAppearance.Disabled,
+}: TableCardProps<TData>) {
   const headerGroups = table.getHeaderGroups();
 
   const headerCell = row._getAllCellsByColumnId()[headlineId ?? ''];
@@ -23,11 +31,14 @@ export function TableCard<TData extends object>({ headlineId, table, row, select
   const actionsColumn = table.getFlatHeaders().find(header => header.id === ROW_ACTIONS_COLUMN_ID);
 
   const isSelected = row.getIsSelected();
+  const canSelect = row.getCanSelect();
+  const isDisabled = !canSelect;
 
   const handleSelection = useCallback(() => {
+    if (isDisabled) return;
     if (selection === 'single') row.toggleSelected(true);
     if (selection === 'multiple') row.toggleSelected(!isSelected);
-  }, [isSelected, row, selection]);
+  }, [isDisabled, isSelected, row, selection]);
 
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -65,8 +76,14 @@ export function TableCard<TData extends object>({ headlineId, table, row, select
         </div>
       </div>
 
-      {selection === 'single' && <Radio size='m' className={styles.selectionController} checked={isSelected} />}
-      {selection === 'multiple' && <Checkbox size='m' className={styles.selectionController} checked={isSelected} />}
+      {selection === 'single' &&
+        (isDisabled && selectionAppearance === RowAppearance.HideToggler ? null : (
+          <Radio size='m' className={styles.selectionController} checked={isSelected} disabled={isDisabled} />
+        ))}
+      {selection === 'multiple' &&
+        (isDisabled && selectionAppearance === RowAppearance.HideToggler ? null : (
+          <Checkbox size='m' className={styles.selectionController} checked={isSelected} disabled={isDisabled} />
+        ))}
       {actionsCell && actionsColumn && (
         <div className={styles.button}>{flexRender(actionsColumn.column.columnDef.cell, actionsCell.getContext())}</div>
       )}

package/src/helperComponents/TableSorting/TableSorting.tsx

@@ -0,0 +1,60 @@
+import { SortingState, Table } from '@tanstack/react-table';
+import { useState } from 'react';
+
+import { ArrowDownSVG, ArrowUpSVG, SortSVG } from '@cloud-ru/uikit-product-icons';
+import { MobileDroplist } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { ButtonFunction } from '@snack-uikit/button';
+import { ColumnDefinition } from '@snack-uikit/table';
+
+import { useTableSorting } from './useTableSorting';
+
+export type TableSortingProps<TData extends object> = {
+  table: Table<TData>;
+  sorting?: SortingState;
+  columnDefinitions: ColumnDefinition<TData>[];
+  enabledColumns?: string[];
+  areColumnsSettingsEnabled?: boolean;
+};
+
+export function TableSorting<TData extends object>({
+  table,
+  sorting,
+  columnDefinitions,
+  enabledColumns,
+  areColumnsSettingsEnabled = false,
+}: TableSortingProps<TData>) {
+  const [open, setOpen] = useState(false);
+
+  const { items, pinBottom, selection, currentSort, selectedSortId, handleClearSort } = useTableSorting({
+    table,
+    sorting,
+    columnDefinitions,
+    enabledColumns,
+    areColumnsSettingsEnabled,
+  });
+
+  const handleClear = () => {
+    handleClearSort();
+    setOpen(false);
+  };
+
+  const clearItem = pinBottom?.[0] ? [{ ...pinBottom[0], onClick: handleClear }] : undefined;
+
+  let SortIcon = SortSVG;
+  if (currentSort) {
+    SortIcon = currentSort.desc ? ArrowDownSVG : ArrowUpSVG;
+  }
+
+  return (
+    <MobileDroplist
+      items={items}
+      selection={selection}
+      virtualized={items.length > 10}
+      pinBottom={clearItem}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <ButtonFunction size='m' icon={<SortIcon />} appearance={selectedSortId ? 'primary' : 'neutral'} />
+    </MobileDroplist>
+  );
+}

package/src/helperComponents/TableSorting/index.ts

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

package/src/helperComponents/TableSorting/styles.module.scss

@@ -0,0 +1,9 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.clearSortItem {
+  &[data-disabled='true'] {
+    svg {
+      color: stv.$sys-neutral-text-disabled;
+    }
+  }
+}