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

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}

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/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;
+    }
+  }
+}

package/src/helperComponents/TableSorting/useTableSorting.tsx

@@ -0,0 +1,248 @@
+import { Header, SortingState, Table } from '@tanstack/react-table';
+import { ReactNode, useCallback, useMemo } from 'react';
+
+import { ArrowDownSVG, ArrowUpSVG, UpdateSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { MobileDroplistProps, SelectionSingleState } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { ColumnDefinition } from '@snack-uikit/table';
+
+import styles from './styles.module.scss';
+import { createColumnDefMap, getHeaderLabel, groupHeadersByPinned } from './utils';
+
+type UseTableSortingReturn = {
+  items: MobileDroplistProps['items'];
+  pinBottom: MobileDroplistProps['items'];
+  selection?: SelectionSingleState;
+  currentSort: { id: string; label: string; desc: boolean } | null;
+  selectedSortId?: string;
+  handleClearSort(): void;
+};
+
+export function useTableSorting<TData extends object>({
+  table,
+  sorting: sortingProp,
+  columnDefinitions,
+  enabledColumns,
+  areColumnsSettingsEnabled = false,
+}: {
+  table: Table<TData>;
+  sorting?: SortingState;
+  columnDefinitions: ColumnDefinition<TData>[];
+  enabledColumns?: string[];
+  areColumnsSettingsEnabled?: boolean;
+}): UseTableSortingReturn {
+  const { t } = useLocale('Table');
+  const sorting = sortingProp ?? table.getState().sorting;
+
+  const columnDefMap = useMemo(() => createColumnDefMap(columnDefinitions), [columnDefinitions]);
+
+  const hiddenColumnsBySettings = useMemo(() => {
+    if (!areColumnsSettingsEnabled) return new Set<string>();
+
+    const hidden = new Set<string>();
+    columnDefMap.forEach((colDef, columnId) => {
+      const colDefWithSettings = colDef as ColumnDefinition<TData> & {
+        columnSettings?: { mode?: 'hidden' | string };
+      };
+      if (colDefWithSettings.columnSettings?.mode === 'hidden') {
+        hidden.add(columnId);
+      }
+    });
+    return hidden;
+  }, [areColumnsSettingsEnabled, columnDefMap]);
+
+  const sortableHeaders = useMemo(() => {
+    let headers = table
+      .getFlatHeaders()
+      .filter(header => header.column.getCanSort() && header.id !== 'select' && header.id !== 'actions');
+
+    if (areColumnsSettingsEnabled && enabledColumns) {
+      headers = headers.filter(header => hiddenColumnsBySettings.has(header.id) || enabledColumns.includes(header.id));
+    }
+
+    return headers;
+  }, [table, areColumnsSettingsEnabled, enabledColumns, hiddenColumnsBySettings]);
+
+  const currentSort = useMemo(() => {
+    if (sorting.length === 0) return null;
+    const firstSort = sorting[0];
+
+    if (areColumnsSettingsEnabled && enabledColumns) {
+      const isHiddenColumn = hiddenColumnsBySettings.has(firstSort.id);
+      const isEnabledColumn = enabledColumns.includes(firstSort.id);
+      if (!isHiddenColumn && !isEnabledColumn) {
+        return null;
+      }
+    }
+
+    const header = table.getFlatHeaders().find(h => h.id === firstSort.id);
+    if (!header) return null;
+
+    const headerLabel = getHeaderLabel(header);
+
+    return {
+      id: firstSort.id,
+      label: headerLabel || firstSort.id,
+      desc: firstSort.desc,
+    };
+  }, [sorting, table, areColumnsSettingsEnabled, enabledColumns, hiddenColumnsBySettings]);
+
+  const handleColumnSortToggle = useCallback(
+    (columnId: string) => {
+      const currentSorting = table.getState().sorting;
+      const currentColumnSort = currentSorting.find(s => s.id === columnId);
+
+      let newSorting: SortingState;
+      if (!currentColumnSort) {
+        newSorting = [{ id: columnId, desc: false }];
+      } else if (!currentColumnSort.desc) {
+        newSorting = [{ id: columnId, desc: true }];
+      } else {
+        newSorting = [];
+      }
+
+      table.setSorting(newSorting);
+    },
+    [table],
+  );
+
+  const handleClearSort = useCallback(() => {
+    table.setSorting([]);
+  }, [table]);
+
+  const selectedSortId = useMemo(() => {
+    if (sorting.length === 0) return undefined;
+    const firstSort = sorting[0];
+
+    if (areColumnsSettingsEnabled && enabledColumns) {
+      const isHiddenColumn = hiddenColumnsBySettings.has(firstSort.id);
+      const isEnabledColumn = enabledColumns.includes(firstSort.id);
+      if (!isHiddenColumn && !isEnabledColumn) {
+        return undefined;
+      }
+    }
+
+    return `sort-${firstSort.id}`;
+  }, [sorting, areColumnsSettingsEnabled, enabledColumns, hiddenColumnsBySettings]);
+
+  const createSortItem = useCallback(
+    (header: Header<TData, unknown>) => {
+      const columnId = header.id;
+      const currentColumnSort = sorting.find(s => s.id === columnId);
+      const isAsc = currentColumnSort && !currentColumnSort.desc;
+      const isDesc = currentColumnSort && currentColumnSort.desc;
+
+      const headerLabel = getHeaderLabel(header) || columnId;
+
+      let SortIcon: ReactNode = undefined;
+      if (isAsc) {
+        SortIcon = <ArrowUpSVG />;
+      } else if (isDesc) {
+        SortIcon = <ArrowDownSVG />;
+      }
+
+      return {
+        id: `sort-${columnId}`,
+        content: {
+          option: headerLabel,
+        },
+        afterContent: SortIcon,
+        onClick: () => handleColumnSortToggle(columnId),
+      };
+    },
+    [sorting, handleColumnSortToggle],
+  );
+
+  const groupSortableHeadersByPinned = useCallback(
+    () => groupHeadersByPinned(sortableHeaders, columnDefMap),
+    [sortableHeaders, columnDefMap],
+  );
+
+  const { items, pinBottom } = useMemo(() => {
+    const { leftHeaders, unpinnedHeaders, rightHeaders } = groupSortableHeadersByPinned();
+
+    const groups: MobileDroplistProps['items'] = [];
+
+    if (leftHeaders.length > 0) {
+      groups.push({
+        type: 'group',
+        divider: false,
+        items: leftHeaders.map(createSortItem),
+      });
+    }
+
+    if (unpinnedHeaders.length > 0) {
+      groups.push({
+        type: 'group',
+        divider: leftHeaders.length > 0 || rightHeaders.length > 0,
+        items: unpinnedHeaders.map(createSortItem),
+      });
+    }
+
+    if (rightHeaders.length > 0) {
+      groups.push({
+        type: 'group',
+        divider: leftHeaders.length > 0 || unpinnedHeaders.length > 0,
+        items: rightHeaders.map(createSortItem),
+      });
+    }
+
+    const clearItem: MobileDroplistProps['items'] = [
+      {
+        id: 'snack-internal-clear-id',
+        content: {
+          option: t('clearSort'),
+        },
+        afterContent: <UpdateSVG />,
+        onClick: handleClearSort,
+        disabled: sorting.length === 0,
+        className: styles.clearSortItem,
+      },
+    ];
+
+    const mainGroup: MobileDroplistProps['items'][0] = {
+      type: 'group',
+      label: t('sort'),
+      items: groups,
+      mode: 'primary',
+    };
+
+    return {
+      items: [mainGroup],
+      pinBottom: clearItem,
+    };
+  }, [groupSortableHeadersByPinned, createSortItem, sorting, handleClearSort, t]);
+
+  const handleSelectionChange = useCallback(
+    (selectedId: string | number) => {
+      const id = String(selectedId);
+      if (id === 'sort-clear') {
+        return;
+      }
+      const match = id.match(/^sort-(.+)$/);
+      if (match) {
+        const [, columnId] = match;
+        handleColumnSortToggle(columnId);
+      }
+    },
+    [handleColumnSortToggle],
+  );
+
+  const selection = useMemo((): SelectionSingleState | undefined => {
+    if (!selectedSortId) return undefined;
+    return {
+      mode: 'single',
+      value: selectedSortId,
+      onChange: handleSelectionChange,
+    };
+  }, [selectedSortId, handleSelectionChange]);
+
+  return {
+    items,
+    pinBottom,
+    selection,
+    currentSort,
+    selectedSortId,
+    handleClearSort,
+  };
+}