@snack-uikit/table 0.33.4 → 0.34.0

package/dist/esm/helperComponents/hooks.js

@@ -1,3 +1,5 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { useMemo } from 'react';
 import { useTableContext } from './contexts';
 function hasHeaders(groups) {
@@ -7,6 +9,7 @@ export function useHeaderGroups() {
     const { table } = useTableContext();
     const columnDefs = table._getColumnDefs();
     const pinEnabled = table.getIsSomeColumnsPinned();
+    const { columnOrder } = table.getState();
     return useMemo(() => {
         if (!pinEnabled) {
             return {
@@ -22,12 +25,13 @@ export function useHeaderGroups() {
         };
         // need to rebuild if columnDefinitions has changed
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [table, pinEnabled, columnDefs]);
+    }, [table, pinEnabled, columnDefs, columnOrder]);
 }
 export function useRowCells(row) {
     const { table } = useTableContext();
     const pinEnabled = table.getIsSomeColumnsPinned();
     const columnDefs = table._getColumnDefs();
+    const { columnOrder } = table.getState();
     return useMemo(() => {
         if (!pinEnabled) {
             return {
@@ -37,24 +41,41 @@ export function useRowCells(row) {
         const left = row.getLeftVisibleCells();
         const right = row.getRightVisibleCells();
         return {
-            pinnedLeft: left.length ? left : undefined,
-            pinnedRight: right.length ? right : undefined,
+            leftPinned: left.length ? left : undefined,
+            rightPinned: right.length ? right : undefined,
             unpinned: row.getCenterVisibleCells(),
         };
         // need to rebuild if columnDefinitions has changed
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [row, pinEnabled, columnDefs]);
+    }, [row, pinEnabled, columnDefs, columnOrder]);
 }
-export function useCellSizes(element) {
+export function useCellSizes(element, options) {
     const column = element.column;
+    const { isDragging, transform } = useSortable({
+        id: column.id,
+    });
     const minWidth = column.columnDef.minSize;
     const maxWidth = column.columnDef.maxSize;
     const width = `var(--table-column-${column.id}-size)`;
     const flexShrink = `var(--table-column-${column.id}-flex)`;
-    return useMemo(() => ({
-        minWidth,
-        width,
-        maxWidth,
-        flexShrink,
-    }), [flexShrink, maxWidth, minWidth, width]);
+    const isHeaderCell = 'headerGroup' in element;
+    return useMemo(() => {
+        const styles = {
+            minWidth,
+            width,
+            maxWidth,
+            flexShrink,
+        };
+        if (options === null || options === void 0 ? void 0 : options.isDraggable) {
+            styles.opacity = isDragging ? 0.8 : 1;
+            styles.position = 'relative';
+            styles.transform = CSS.Translate.toString(transform);
+            styles.transition = 'width transform 0.2s ease-in-out';
+            styles.zIndex = isDragging ? 1 : undefined;
+            if (isHeaderCell) {
+                styles.whiteSpace = 'nowrap';
+            }
+        }
+        return styles;
+    }, [options === null || options === void 0 ? void 0 : options.isDraggable, flexShrink, isDragging, isHeaderCell, maxWidth, minWidth, transform, width]);
 }

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

@@ -7,3 +7,4 @@ export * from './hooks';
 export * from './types';
 export * from './TableEmptyState';
 export * from './TablePagination';
+export * from './ColumnsSettings';

package/dist/esm/helperComponents/index.js

@@ -7,3 +7,4 @@ export * from './hooks';
 export * from './types';
 export * from './TableEmptyState';
 export * from './TablePagination';
+export * from './ColumnsSettings';

package/dist/esm/types.d.ts

@@ -3,8 +3,7 @@ import { ReactNode } from 'react';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { ValueOf } from '@snack-uikit/utils';
 import { COLUMN_ALIGN, COLUMN_PIN_POSITION } from './constants';
-import { Except } from './helperComponents';
-import { EmptyStateProps } from './helperComponents/TableEmptyState';
+import { EmptyStateProps, Except } from './helperComponents';
 type ColumnAlign = ValueOf<typeof COLUMN_ALIGN>;
 type ColumnPinPosition = ValueOf<typeof COLUMN_PIN_POSITION>;
 type BaseColumnDefinition<TData> = Except<ColumnDef<TData>, 'footer' | 'enablePinning' | 'enableGrouping' | 'enableColumnFilter' | 'filterFn' | 'enableGlobalFilter' | 'enableMultiSort' | 'enableHiding'> & {
@@ -39,6 +38,15 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
     /** Размер ячейки */
     size: number;
 };
-export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
+type FilterableProps = {
+    id: string;
+    /** Название колонки в настройках таблицы */
+    headerConfigLabel?: string;
+};
+type FilterableNormalColumnDefinition<TData> = NormalColumnDefinition<TData> & FilterableProps;
+type FilterablePinnedColumnDefinition<TData> = PinnedColumnDefinition<TData> & FilterableProps;
+export type FilterableColumnDefinition<TData> = FilterableNormalColumnDefinition<TData> | FilterablePinnedColumnDefinition<TData>;
+export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData> | FilterableColumnDefinition<TData>;
+export type ColumnOrder = string[];
 export type { RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, ActionsGenerator, CopyCellProps, MapStatusToAppearanceFnType, } from './helperComponents';
 export type { ColumnPinPosition, PaginationState, SortingState, RowSelectionState, RowSelectionOptions, EmptyStateProps, ToolbarProps, HeaderContext, CellContext, };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.33.4",
+  "version": "0.34.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,17 +37,21 @@
   "scripts": {},
   "dependencies": {
     "@cloud-ru/ft-request-payload-transform": "0.1.0",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/modifiers": "9.0.0",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
     "@snack-uikit/button": "0.19.8",
-    "@snack-uikit/chips": "0.26.1",
+    "@snack-uikit/chips": "0.26.2",
     "@snack-uikit/icon-predefined": "0.7.4",
     "@snack-uikit/icons": "0.25.1",
     "@snack-uikit/info-block": "0.6.16",
-    "@snack-uikit/list": "0.27.0",
+    "@snack-uikit/list": "0.27.1",
     "@snack-uikit/pagination": "0.10.5",
     "@snack-uikit/scroll": "0.9.4",
     "@snack-uikit/skeleton": "0.6.3",
     "@snack-uikit/toggles": "0.13.8",
-    "@snack-uikit/toolbar": "0.12.4",
+    "@snack-uikit/toolbar": "0.12.5",
     "@snack-uikit/truncate-string": "0.6.13",
     "@snack-uikit/typography": "0.8.5",
     "@snack-uikit/utils": "3.8.0",
@@ -62,5 +66,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "d8510c4d566cee9fd0e96ff969fdefb7fb11ac49"
+  "gitHead": "cafb29b74a6ac4d38594e9d46599617925165935"
 }

package/src/components/Table/Table.tsx

@@ -1,3 +1,5 @@
+import { closestCenter, DndContext } from '@dnd-kit/core';
+import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
 import {
   CellContext,
   ColumnPinningState,
@@ -13,7 +15,7 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import cn from 'classnames';
-import { RefObject, useCallback, useEffect, useMemo, useRef } from 'react';
+import { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { FiltersState } from '@snack-uikit/chips';
 import { useLocale } from '@snack-uikit/locale';
@@ -33,6 +35,7 @@ import {
 import { CellAutoResizeContext, useCellAutoResizeController } from '../../contexts';
 import {
   BodyRow,
+  ColumnsSettings,
   ExportButton,
   getColumnId,
   getRowActionsColumnDef,
@@ -49,7 +52,7 @@ import { getTreeColumnDef } from '../../helperComponents/Cells/TreeCell';
 import { ColumnDefinition } from '../../types';
 import { customDateParser, fuzzyFilter } from '../../utils';
 import { TableProps } from '../types';
-import { useLoadingTable, useStateControl } from './hooks';
+import { useColumnOrderByDrag, useLoadingTable, useStateControl } from './hooks';
 import { usePageReset } from './hooks/usePageReset';
 import { useSaveTableSettings } from './hooks/useSaveTableSettings';
 import styles from './styles.module.scss';
@@ -57,6 +60,9 @@ import {
   getColumnStyleVars,
   getCurrentlyConfiguredHeaderWidth,
   getInitColumnSizeFromLocalStorage,
+  isFilterableColumn,
+  prepareColumnsSettings,
+  prepareColumnsSettingsMap,
   saveStateToLocalStorage,
 } from './utils';
 
@@ -106,6 +112,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   expanding,
   bulkActions: bulkActionsProp,
   rowAutoHeight,
+  columnsSettings: columnsSettingsProp,
   ...rest
 }: TableProps<TData, TFilters>) {
   const { setDataToStorages, defaultFilter } = useSaveTableSettings({
@@ -150,6 +157,8 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     DEFAULT_FILTER_VISIBILITY,
   );
 
+  const [areColumnFiltersOpen, setAreColumnFiltersOpen] = useState<boolean>(true);
+
   useEffect(() => {
     setDataToStorages({ pagination, sorting, filter, search: globalFilter || '' });
   }, [pagination, sorting, filter, setDataToStorages, globalFilter]);
@@ -166,26 +175,42 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     // eslint-disable-next-line
   }, [defaultFilter]);
 
-  const patchedFilter = useMemo(
-    () =>
-      columnFilters
-        ? {
-            ...columnFilters,
-            value: filter,
-            onChange: setFilter,
-            visibleFilters: filterVisibility,
-            onVisibleFiltersChange: setFilterVisibility,
-          }
-        : undefined,
-    [columnFilters, filter, setFilter, filterVisibility, setFilterVisibility],
-  );
+  const patchedFilter = useMemo(() => {
+    if (!columnFilters) {
+      return undefined;
+    }
+
+    return {
+      ...columnFilters,
+      open: areColumnFiltersOpen,
+      onOpenChange: setAreColumnFiltersOpen,
+      value: filter,
+      onChange: setFilter,
+      visibleFilters: filterVisibility,
+      onVisibleFiltersChange: setFilterVisibility,
+    };
+  }, [columnFilters, areColumnFiltersOpen, filter, setFilter, filterVisibility, setFilterVisibility]);
 
   const enableSelection = Boolean(rowSelectionProp?.enable);
 
   const manualPagination = infiniteLoading || manualPaginationProp;
 
+  const [enabledColumns, setEnabledColumns] = useState<string[]>(() => prepareColumnsSettingsMap(columnDefinitions));
+
+  const filteredColumnDefinitions = useMemo(
+    () =>
+      columnDefinitions.filter(colDef => {
+        if (isFilterableColumn(colDef)) {
+          return enabledColumns.includes(colDef.id);
+        }
+
+        return true;
+      }),
+    [columnDefinitions, enabledColumns],
+  );
+
   const tableColumns: ColumnDefinition<TData>[] = useMemo(() => {
-    let cols: ColumnDefinition<TData>[] = columnDefinitions;
+    let cols: ColumnDefinition<TData>[] = filteredColumnDefinitions;
     if (enableSelection && !expanding) {
       cols = [getSelectionCellColumnDef(enableSelectPinned), ...cols];
     }
@@ -193,7 +218,26 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
       cols = [getTreeColumnDef(expanding.expandingColumnDefinition), ...cols];
     }
     return cols;
-  }, [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
+  }, [filteredColumnDefinitions, enableSelection, enableSelectPinned, expanding]);
+
+  const { columnOrder, setColumnOrder, sensors, handleDragEnd } = useColumnOrderByDrag(tableColumns);
+
+  const filterableColumns = useMemo(() => columnDefinitions.filter(isFilterableColumn), [columnDefinitions]);
+  const areAllColumnsEnabled = filterableColumns.length === enabledColumns.length;
+
+  const { t } = useLocale('Table');
+
+  const columnsSettings = useMemo(
+    () =>
+      prepareColumnsSettings({
+        columnDefinitions,
+        columnOrder,
+        areAllColumnsEnabled,
+        columnsSettingsHeader: columnsSettingsProp?.headerLabel,
+        t,
+      }),
+    [areAllColumnsEnabled, columnDefinitions, columnOrder, columnsSettingsProp?.headerLabel, t],
+  );
 
   const columnPinning = useMemo(() => {
     const pinningState: Required<ColumnPinningState> = { left: [], right: [] };
@@ -225,6 +269,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     columns: tableColumns,
     state: {
       columnPinning,
+      columnOrder,
       globalFilter,
       rowSelection,
       sorting,
@@ -244,6 +289,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
         return <TruncateString text={String(cell.getValue())} maxLines={1} />;
       },
     },
+    onColumnOrderChange: setColumnOrder,
 
     manualSorting,
     manualPagination,
@@ -283,7 +329,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
 
   const { loadingTable } = useLoadingTable({
     pageSize: Math.min(Math.max(pageSize, 5), DEFAULT_PAGE_SIZE),
-    columnDefinitions: tableColumns,
+    columnDefinitions: filteredColumnDefinitions,
     columnPinning,
   });
 
@@ -410,7 +456,6 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     : topRows;
   const centerRows = copyPinnedRows ? tableRows : tableCenterRows;
 
-  const { t } = useLocale('Table');
   const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
 
   usePageReset({
@@ -424,6 +469,8 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const { updateCellMap } = useCellAutoResizeController(table);
 
   const showToolbar = !suppressToolbar;
+  const showColumnsSettings = Boolean(columnsSettingsProp?.headerLabel);
+  const enableColumnsOrderSortByDrag = Boolean(columnsSettingsProp?.enableDrag);
 
   return (
     <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)}>
@@ -449,7 +496,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
             onCheck={enableSelection ? handleOnToolbarCheck : undefined}
             outline={outline}
             after={
-              toolbarAfter || exportSettings ? (
+              toolbarAfter || exportSettings || showColumnsSettings ? (
                 <>
                   {toolbarAfter}
                   {exportSettings && (
@@ -461,6 +508,13 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                       centerRows={centerRows}
                     />
                   )}
+                  {showColumnsSettings && (
+                    <ColumnsSettings
+                      columnsSettings={columnsSettings}
+                      enabledColumns={enabledColumns}
+                      setEnabledColumns={setEnabledColumns}
+                    />
+                  )}
                 </>
               ) : undefined
             }
@@ -474,47 +528,79 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
       <Scroll size='s' className={styles.table} ref={scrollContainerRef} data-outline={outline || undefined}>
         <div className={styles.tableContent} style={columnSizes.vars}>
           <CellAutoResizeContext.Provider value={{ updateCellMap }}>
-            <TableContext.Provider value={{ table }}>
-              {(!infiniteLoading || !data.length) && loading ? (
-                <SkeletonContextProvider loading>
-                  <HeaderRow rowAutoHeight={rowAutoHeight} />
-                  {loadingTableRows.map(row => (
-                    <BodyRow key={row.id} row={row} rowAutoHeight={rowAutoHeight} />
-                  ))}
-                </SkeletonContextProvider>
-              ) : (
-                <>
-                  {centerRows.length || filteredTopRows.length ? <HeaderRow /> : null}
-
-                  {filteredTopRows.length ? (
-                    <div className={styles.topRowWrapper}>
-                      {filteredTopRows.map(row => (
-                        <BodyRow key={row.id} row={row} onRowClick={onRowClick} rowAutoHeight={rowAutoHeight} />
-                      ))}
-                    </div>
-                  ) : null}
-
-                  {centerRows.map(row => (
-                    <BodyRow key={row.id} row={row} onRowClick={onRowClick} rowAutoHeight={rowAutoHeight} />
-                  ))}
-
-                  {data.length > 0 && infiniteLoading && loading && !dataError && (
-                    <SkeletonContextProvider loading>
-                      {loadingTableRows.slice(0, 3).map(row => (
-                        <BodyRow key={row.id} row={row} />
-                      ))}
-                    </SkeletonContextProvider>
-                  )}
-
-                  <TableEmptyState
-                    emptyStates={emptyStates}
-                    dataError={dataError}
-                    dataFiltered={dataFiltered || Boolean(table.getState().globalFilter)}
-                    tableRowsLength={tableRows.length + filteredTopRows.length}
-                  />
-                </>
-              )}
-            </TableContext.Provider>
+            <DndContext
+              collisionDetection={closestCenter}
+              modifiers={[restrictToHorizontalAxis]}
+              onDragEnd={handleDragEnd}
+              sensors={sensors}
+            >
+              <TableContext.Provider value={{ table }}>
+                {(!infiniteLoading || !data.length) && loading ? (
+                  <SkeletonContextProvider loading>
+                    <HeaderRow rowAutoHeight={rowAutoHeight} columnOrder={columnOrder} />
+                    {loadingTableRows.map(row => (
+                      <BodyRow key={row.id} row={row} rowAutoHeight={rowAutoHeight} columnOrder={columnOrder} />
+                    ))}
+                  </SkeletonContextProvider>
+                ) : (
+                  <>
+                    {centerRows.length || filteredTopRows.length ? (
+                      <HeaderRow
+                        rowAutoHeight={rowAutoHeight}
+                        columnOrder={columnOrder}
+                        enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
+                      />
+                    ) : null}
+
+                    {filteredTopRows.length ? (
+                      <div className={styles.topRowWrapper}>
+                        {filteredTopRows.map(row => (
+                          <BodyRow
+                            key={row.id}
+                            row={row}
+                            onRowClick={onRowClick}
+                            rowAutoHeight={rowAutoHeight}
+                            columnOrder={columnOrder}
+                            enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
+                          />
+                        ))}
+                      </div>
+                    ) : null}
+
+                    {centerRows.map(row => (
+                      <BodyRow
+                        key={row.id}
+                        row={row}
+                        onRowClick={onRowClick}
+                        rowAutoHeight={rowAutoHeight}
+                        columnOrder={columnOrder}
+                        enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
+                      />
+                    ))}
+
+                    {data.length > 0 && infiniteLoading && loading && !dataError && (
+                      <SkeletonContextProvider loading>
+                        {loadingTableRows.slice(0, 3).map(row => (
+                          <BodyRow
+                            key={row.id}
+                            row={row}
+                            columnOrder={columnOrder}
+                            enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
+                          />
+                        ))}
+                      </SkeletonContextProvider>
+                    )}
+
+                    <TableEmptyState
+                      emptyStates={emptyStates}
+                      dataError={dataError}
+                      dataFiltered={dataFiltered || Boolean(table.getState().globalFilter)}
+                      tableRowsLength={tableRows.length + filteredTopRows.length}
+                    />
+                  </>
+                )}
+              </TableContext.Provider>
+            </DndContext>
           </CellAutoResizeContext.Provider>
         </div>
 

package/src/components/Table/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useLoadingTable';
 export * from './useStateControl';
+export * from './useColumnOrderByDrag';

package/src/components/Table/hooks/useColumnOrderByDrag.ts

@@ -0,0 +1,67 @@
+import {
+  DragEndEvent,
+  KeyboardSensor,
+  MouseSensor,
+  SensorOptions,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+import { useCallback, useState } from 'react';
+
+import { ColumnDefinition } from '../../../types';
+
+function prepareInitialState<TData extends object>(tableColumns: ColumnDefinition<TData>[]) {
+  return tableColumns.filter(column => column.pinned !== 'left' && column.pinned !== 'right').map(c => c.id as string);
+}
+
+const draggingOptions: SensorOptions = {
+  activationConstraint: {
+    distance: 5, // Is required to differ click (sort) from drag
+  },
+};
+
+export function useColumnOrderByDrag<TData extends object>(tableColumns: ColumnDefinition<TData>[]) {
+  const [columnOrder, setColumnOrder] = useState<string[]>(() => prepareInitialState(tableColumns));
+
+  const handleDragEnd = useCallback(
+    ({ active, over }: DragEndEvent) => {
+      if (!active || !over) {
+        return;
+      }
+
+      const activeId = active.id.toString();
+      const overId = over.id.toString();
+
+      if (activeId === overId) {
+        return;
+      }
+
+      if (!columnOrder.includes(overId)) {
+        return;
+      }
+
+      setColumnOrder(columnOrder => {
+        const oldIndex = columnOrder.indexOf(activeId);
+        const newIndex = columnOrder.indexOf(overId);
+        return arrayMove(columnOrder, oldIndex, newIndex);
+      });
+    },
+    [columnOrder],
+  );
+
+  const sensors = useSensors(
+    useSensor(MouseSensor, draggingOptions),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {}),
+  );
+
+  return {
+    columnOrder,
+    setColumnOrder,
+
+    handleDragEnd,
+    sensors,
+  };
+}