@snack-uikit/table 0.34.2 → 0.34.3

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.34.3 (2025-03-12)
+
+
+### Bug Fixes
+
+* **PDS-1483:** invalid behavior with disabled columns sort by drag fixed ([4d4fc57](https://github.com/cloud-ru-tech/snack-uikit/commit/4d4fc5770f204378c37333a9d9fdf5f05520de48))
+* **PDS-1483:** invalid columns order without id fixed ([c35ce70](https://github.com/cloud-ru-tech/snack-uikit/commit/c35ce70c162fcac4bf87f376ef3ed44cb230470a))
+
+
+
+
+
 ## 0.34.2 (2025-03-11)
 
 ### Only dependencies have been changed

package/dist/cjs/components/Table/Table.js

@@ -151,12 +151,18 @@ function Table(_a) {
   const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
   const manualPagination = infiniteLoading || manualPaginationProp;
   const [enabledColumns, setEnabledColumns] = (0, react_1.useState)(() => (0, utils_3.prepareColumnsSettingsMap)(columnDefinitions));
-  const filteredColumnDefinitions = (0, react_1.useMemo)(() => columnDefinitions.filter(colDef => {
-    if ((0, utils_3.isFilterableColumn)(colDef)) {
-      return enabledColumns.includes(colDef.id);
+  const areColumnsSettingsEnabled = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableSettingsMenu);
+  const filteredColumnDefinitions = (0, react_1.useMemo)(() => {
+    if (!areColumnsSettingsEnabled) {
+      return columnDefinitions;
     }
-    return true;
-  }), [columnDefinitions, enabledColumns]);
+    return columnDefinitions.filter(colDef => {
+      if ((0, utils_3.isFilterableColumn)(colDef)) {
+        return enabledColumns.includes((0, utils_3.getColumnIdentifier)(colDef));
+      }
+      return true;
+    });
+  }, [columnDefinitions, enabledColumns, areColumnsSettingsEnabled]);
   const tableColumns = (0, react_1.useMemo)(() => {
     let cols = filteredColumnDefinitions;
     if (enableSelection && !expanding) {
@@ -167,12 +173,24 @@ function Table(_a) {
     }
     return cols;
   }, [filteredColumnDefinitions, enableSelection, enableSelectPinned, expanding]);
+  const enableColumnsOrderSortByDrag = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableDrag);
   const {
     columnOrder,
     setColumnOrder,
     sensors,
     handleDragEnd
   } = (0, hooks_1.useColumnOrderByDrag)(tableColumns);
+  const dndContextProps = (0, react_1.useMemo)(() => {
+    if (!enableColumnsOrderSortByDrag) {
+      return {};
+    }
+    return {
+      collisionDetection: core_1.closestCenter,
+      modifiers: [modifiers_1.restrictToHorizontalAxis],
+      onDragEnd: handleDragEnd,
+      sensors: sensors
+    };
+  }, [enableColumnsOrderSortByDrag, handleDragEnd, sensors]);
   const filterableColumns = (0, react_1.useMemo)(() => columnDefinitions.filter(utils_3.isFilterableColumn), [columnDefinitions]);
   const areAllColumnsEnabled = filterableColumns.length === enabledColumns.length;
   const {
@@ -212,7 +230,7 @@ function Table(_a) {
     columns: tableColumns,
     state: {
       columnPinning,
-      columnOrder,
+      columnOrder: enableColumnsOrderSortByDrag ? columnOrder : undefined,
       globalFilter,
       rowSelection,
       sorting,
@@ -236,7 +254,7 @@ function Table(_a) {
         });
       }
     },
-    onColumnOrderChange: setColumnOrder,
+    onColumnOrderChange: enableColumnsOrderSortByDrag ? setColumnOrder : undefined,
     manualSorting,
     manualPagination,
     manualFiltering,
@@ -404,8 +422,6 @@ function Table(_a) {
     updateCellMap
   } = (0, contexts_1.useCellAutoResizeController)(table);
   const showToolbar = !suppressToolbar;
-  const showColumnsSettings = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableSettingsMenu);
-  const enableColumnsOrderSortByDrag = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableDrag);
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className)
   }, (0, utils_1.extractSupportProps)(rest), {
@@ -426,14 +442,14 @@ function Table(_a) {
         indeterminate: table.getIsSomePageRowsSelected(),
         onCheck: enableSelection ? handleOnToolbarCheck : undefined,
         outline: outline,
-        after: toolbarAfter || exportSettings || showColumnsSettings ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+        after: toolbarAfter || exportSettings || areColumnsSettingsEnabled ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
           children: [toolbarAfter, exportSettings && (0, jsx_runtime_1.jsx)(helperComponents_1.ExportButton, {
             settings: exportSettings,
             columnDefinitions: columnDefinitions,
             data: data,
             topRows: filteredTopRows,
             centerRows: centerRows
-          }), showColumnsSettings && (0, jsx_runtime_1.jsx)(helperComponents_1.ColumnsSettings, {
+          }), areColumnsSettingsEnabled && (0, jsx_runtime_1.jsx)(helperComponents_1.ColumnsSettings, {
             columnsSettings: columnsSettings,
             enabledColumns: enabledColumns,
             setEnabledColumns: setEnabledColumns
@@ -455,11 +471,7 @@ function Table(_a) {
           value: {
             updateCellMap
           },
-          children: (0, jsx_runtime_1.jsx)(core_1.DndContext, {
-            collisionDetection: core_1.closestCenter,
-            modifiers: [modifiers_1.restrictToHorizontalAxis],
-            onDragEnd: handleDragEnd,
-            sensors: sensors,
+          children: (0, jsx_runtime_1.jsx)(core_1.DndContext, Object.assign({}, dndContextProps, {
             children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
               value: {
                 table
@@ -509,7 +521,7 @@ function Table(_a) {
                 })]
               })
             })
-          })
+          }))
         })
       }), (0, jsx_runtime_1.jsx)("div", {
         className: styles_module_scss_1.default.scrollStub,

package/dist/cjs/components/Table/hooks/useColumnOrderByDrag.js

@@ -7,8 +7,9 @@ exports.useColumnOrderByDrag = useColumnOrderByDrag;
 const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 const react_1 = require("react");
+const utils_1 = require("../utils");
 function prepareInitialState(tableColumns) {
-  return tableColumns.filter(column => column.pinned !== 'left' && column.pinned !== 'right').map(c => c.id);
+  return tableColumns.filter(column => column.pinned !== 'left' && column.pinned !== 'right').map(utils_1.getColumnIdentifier);
 }
 const draggingOptions = {
   activationConstraint: {

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

@@ -19,6 +19,7 @@ type SaveStateToLocalStorageProps = {
 };
 export declare function saveStateToLocalStorage({ id, columnId, size }: SaveStateToLocalStorageProps): void;
 export declare function isFilterableColumn<TData extends object>(colDef: ColumnDefinition<TData>): colDef is FilterableColumnDefinition<TData>;
+export declare function getColumnIdentifier<TData extends object>(colDef: ColumnDefinition<TData>): string;
 export declare function prepareColumnsSettingsMap<TData extends object>(columnDefinitions: ColumnDefinition<TData>[]): string[];
 type PrepareColumnsSettingsProps<TData extends object> = {
     columnDefinitions: ColumnDefinition<TData>[];

package/dist/cjs/components/Table/utils.js

@@ -8,6 +8,7 @@ exports.getColumnStyleVars = getColumnStyleVars;
 exports.getInitColumnSizeFromLocalStorage = getInitColumnSizeFromLocalStorage;
 exports.saveStateToLocalStorage = saveStateToLocalStorage;
 exports.isFilterableColumn = isFilterableColumn;
+exports.getColumnIdentifier = getColumnIdentifier;
 exports.prepareColumnsSettingsMap = prepareColumnsSettingsMap;
 exports.prepareColumnsSettings = prepareColumnsSettings;
 exports.getInitialColumnsOpenValue = getInitialColumnsOpenValue;
@@ -62,19 +63,28 @@ function saveStateToLocalStorage(_ref2) {
   })));
 }
 function isFilterableColumn(colDef) {
-  return 'id' in colDef && 'headerConfigLabel' in colDef;
+  return ('id' in colDef || 'accessorKey' in colDef) && 'headerConfigLabel' in colDef;
+}
+function getColumnIdentifier(colDef) {
+  if ('id' in colDef && colDef.id) {
+    return colDef.id;
+  }
+  // Either id or accessorKey is always present
+  // eslint-disable-next-line
+  // @ts-ignore
+  return colDef.accessorKey;
 }
 function prepareColumnsSettingsMap(columnDefinitions) {
-  return columnDefinitions.filter(isFilterableColumn).map(colDef => colDef.id);
+  return columnDefinitions.filter(isFilterableColumn).map(getColumnIdentifier);
 }
 const sortColumnDefinitions = columnOrder => function sortColDefs(colDefA, colDefB) {
-  const indexItemA = columnOrder.findIndex(columnIndex => columnIndex === colDefA.id);
-  const indexItemB = columnOrder.findIndex(columnIndex => columnIndex === colDefB.id);
+  const indexItemA = columnOrder.findIndex(columnIndex => columnIndex === getColumnIdentifier(colDefA));
+  const indexItemB = columnOrder.findIndex(columnIndex => columnIndex === getColumnIdentifier(colDefB));
   return indexItemA - indexItemB;
 };
 function createColumnsSettingsOption(columnDefinition) {
   return {
-    id: columnDefinition.id,
+    id: getColumnIdentifier(columnDefinition),
     content: {
       option: columnDefinition.headerConfigLabel
     },

package/dist/cjs/helperComponents/Cells/BodyCell/BodyCell.js

@@ -43,7 +43,7 @@ function BodyCell(_a) {
     id: cell.column.id
   });
   return (0, jsx_runtime_1.jsx)(Cell_1.Cell, Object.assign({}, props, {
-    ref: setNodeRef,
+    ref: isDraggable ? setNodeRef : undefined,
     style: style,
     className: (0, classnames_1.default)(styles_module_scss_1.default.tableBodyCell, className, columnDef.cellClassName),
     "data-row-auto-height": rowAutoHeight || undefined,

package/dist/cjs/helperComponents/Cells/HeaderCell/HeaderCell.js

@@ -54,9 +54,12 @@ function HeaderCell(_ref) {
     if (isSomeColumnResizing) return;
     return (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
   };
-  const isAvailableForDrag = !constants_1.DEFAULT_COLUMNS.includes(header.column.id);
-  const dragAttributes = isAvailableForDrag ? attributes : {};
-  const listenersAttributes = isAvailableForDrag ? listeners : {};
+  const draggableProps = (0, react_1.useMemo)(() => {
+    if (!isDraggable || constants_1.DEFAULT_COLUMNS.includes(header.column.id)) {
+      return {};
+    }
+    return Object.assign(Object.assign({}, attributes), listeners);
+  }, [attributes, header.column.id, isDraggable, listeners]);
   return (0, jsx_runtime_1.jsxs)(Cell_1.Cell, {
     style: style,
     onClick: sortingHandler,
@@ -73,13 +76,15 @@ function HeaderCell(_ref) {
     role: 'columnheader',
     className: (0, classnames_1.default)(styles_module_scss_1.default.tableHeaderCell, className, columnDef.headerClassName),
     ref: element => {
-      setNodeRef(element);
+      if (isDraggable) {
+        setNodeRef(element);
+      }
       return cellRef;
     },
     children: [(0, jsx_runtime_1.jsx)("div", Object.assign({
       className: styles_module_scss_1.default.tableHeaderCellDragWrapper,
-      "data-dragging": isDragging || undefined
-    }, dragAttributes, listenersAttributes, {
+      "data-dragging": isDraggable && isDragging || undefined
+    }, draggableProps, {
       children: (0, jsx_runtime_1.jsxs)("div", {
         className: styles_module_scss_1.default.tableHeaderCellMain,
         children: [columnDef.header && (0, jsx_runtime_1.jsx)("div", {

package/dist/cjs/types.d.ts

@@ -42,6 +42,10 @@ type FilterableProps = {
     id: string;
     /** Название колонки в настройках таблицы */
     headerConfigLabel?: string;
+} | {
+    accessorKey: string;
+    /** Название колонки в настройках таблицы */
+    headerConfigLabel?: string;
 };
 type FilterableNormalColumnDefinition<TData> = NormalColumnDefinition<TData> & FilterableProps;
 type FilterablePinnedColumnDefinition<TData> = PinnedColumnDefinition<TData> & FilterableProps;

package/dist/esm/components/Table/Table.js

@@ -30,7 +30,7 @@ import { useColumnOrderByDrag, useLoadingTable, useStateControl } from './hooks'
 import { usePageReset } from './hooks/usePageReset';
 import { useSaveTableSettings } from './hooks/useSaveTableSettings';
 import styles from './styles.module.css';
-import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, getInitialColumnsOpenValue, isFilterableColumn, prepareColumnsSettings, prepareColumnsSettingsMap, saveStateToLocalStorage, } from './utils';
+import { getColumnIdentifier, getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, getInitialColumnsOpenValue, isFilterableColumn, prepareColumnsSettings, prepareColumnsSettingsMap, saveStateToLocalStorage, } from './utils';
 /** Компонент таблицы */
 export function Table(_a) {
     var { data, rowPinning = {
@@ -82,12 +82,18 @@ export function Table(_a) {
     const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
     const manualPagination = infiniteLoading || manualPaginationProp;
     const [enabledColumns, setEnabledColumns] = useState(() => prepareColumnsSettingsMap(columnDefinitions));
-    const filteredColumnDefinitions = useMemo(() => columnDefinitions.filter(colDef => {
-        if (isFilterableColumn(colDef)) {
-            return enabledColumns.includes(colDef.id);
+    const areColumnsSettingsEnabled = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableSettingsMenu);
+    const filteredColumnDefinitions = useMemo(() => {
+        if (!areColumnsSettingsEnabled) {
+            return columnDefinitions;
         }
-        return true;
-    }), [columnDefinitions, enabledColumns]);
+        return columnDefinitions.filter(colDef => {
+            if (isFilterableColumn(colDef)) {
+                return enabledColumns.includes(getColumnIdentifier(colDef));
+            }
+            return true;
+        });
+    }, [columnDefinitions, enabledColumns, areColumnsSettingsEnabled]);
     const tableColumns = useMemo(() => {
         let cols = filteredColumnDefinitions;
         if (enableSelection && !expanding) {
@@ -98,7 +104,19 @@ export function Table(_a) {
         }
         return cols;
     }, [filteredColumnDefinitions, enableSelection, enableSelectPinned, expanding]);
+    const enableColumnsOrderSortByDrag = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableDrag);
     const { columnOrder, setColumnOrder, sensors, handleDragEnd } = useColumnOrderByDrag(tableColumns);
+    const dndContextProps = useMemo(() => {
+        if (!enableColumnsOrderSortByDrag) {
+            return {};
+        }
+        return {
+            collisionDetection: closestCenter,
+            modifiers: [restrictToHorizontalAxis],
+            onDragEnd: handleDragEnd,
+            sensors: sensors,
+        };
+    }, [enableColumnsOrderSortByDrag, handleDragEnd, sensors]);
     const filterableColumns = useMemo(() => columnDefinitions.filter(isFilterableColumn), [columnDefinitions]);
     const areAllColumnsEnabled = filterableColumns.length === enabledColumns.length;
     const { t } = useLocale('Table');
@@ -134,7 +152,7 @@ export function Table(_a) {
         columns: tableColumns,
         state: {
             columnPinning,
-            columnOrder,
+            columnOrder: enableColumnsOrderSortByDrag ? columnOrder : undefined,
             globalFilter,
             rowSelection,
             sorting,
@@ -153,7 +171,7 @@ export function Table(_a) {
                 return _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 });
             },
         },
-        onColumnOrderChange: setColumnOrder,
+        onColumnOrderChange: enableColumnsOrderSortByDrag ? setColumnOrder : undefined,
         manualSorting,
         manualPagination,
         manualFiltering,
@@ -297,8 +315,6 @@ export function Table(_a) {
     });
     const { updateCellMap } = useCellAutoResizeController(table);
     const showToolbar = !suppressToolbar;
-    const showColumnsSettings = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableSettingsMenu);
-    const enableColumnsOrderSortByDrag = Boolean(columnsSettingsProp === null || columnsSettingsProp === void 0 ? void 0 : columnsSettingsProp.enableDrag);
     return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [showToolbar && (_jsx("div", { className: styles.header, children: _jsx(Toolbar, { search: suppressSearch
                         ? undefined
                         : {
@@ -306,7 +322,7 @@ export function Table(_a) {
                             onChange: onGlobalFilterChange,
                             loading: search === null || search === void 0 ? void 0 : search.loading,
                             placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
-                        }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings || showColumnsSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows })), showColumnsSettings && (_jsx(ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : undefined, moreActions: moreActions, filterRow: patchedFilter, "data-test-id": TEST_IDS.toolbar }) })), _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, "data-outline": outline || undefined, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsx(DndContext, { collisionDetection: closestCenter, modifiers: [restrictToHorizontalAxis], onDragEnd: handleDragEnd, sensors: sensors, children: _jsx(TableContext.Provider, { value: { table }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? (_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag })) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))) })), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }), !infiniteLoading && !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })));
+                        }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings || areColumnsSettingsEnabled ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows })), areColumnsSettingsEnabled && (_jsx(ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : undefined, moreActions: moreActions, filterRow: patchedFilter, "data-test-id": TEST_IDS.toolbar }) })), _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, "data-outline": outline || undefined, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsx(DndContext, Object.assign({}, dndContextProps, { children: _jsx(TableContext.Provider, { value: { table }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? (_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag })) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))) })), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }), !infiniteLoading && !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/dist/esm/components/Table/hooks/useColumnOrderByDrag.js

@@ -1,8 +1,9 @@
 import { KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors, } from '@dnd-kit/core';
 import { arrayMove } from '@dnd-kit/sortable';
 import { useCallback, useState } from 'react';
+import { getColumnIdentifier } from '../utils';
 function prepareInitialState(tableColumns) {
-    return tableColumns.filter(column => column.pinned !== 'left' && column.pinned !== 'right').map(c => c.id);
+    return tableColumns.filter(column => column.pinned !== 'left' && column.pinned !== 'right').map(getColumnIdentifier);
 }
 const draggingOptions = {
     activationConstraint: {

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

@@ -19,6 +19,7 @@ type SaveStateToLocalStorageProps = {
 };
 export declare function saveStateToLocalStorage({ id, columnId, size }: SaveStateToLocalStorageProps): void;
 export declare function isFilterableColumn<TData extends object>(colDef: ColumnDefinition<TData>): colDef is FilterableColumnDefinition<TData>;
+export declare function getColumnIdentifier<TData extends object>(colDef: ColumnDefinition<TData>): string;
 export declare function prepareColumnsSettingsMap<TData extends object>(columnDefinitions: ColumnDefinition<TData>[]): string[];
 type PrepareColumnsSettingsProps<TData extends object> = {
     columnDefinitions: ColumnDefinition<TData>[];

package/dist/esm/components/Table/utils.js

@@ -36,19 +36,28 @@ export function saveStateToLocalStorage({ id, columnId, size }) {
     localStorage.setItem(id, JSON.stringify(Object.assign(Object.assign({}, (savedStateFromStorage || {})), { resizeState: newResizeState })));
 }
 export function isFilterableColumn(colDef) {
-    return 'id' in colDef && 'headerConfigLabel' in colDef;
+    return ('id' in colDef || 'accessorKey' in colDef) && 'headerConfigLabel' in colDef;
+}
+export function getColumnIdentifier(colDef) {
+    if ('id' in colDef && colDef.id) {
+        return colDef.id;
+    }
+    // Either id or accessorKey is always present
+    // eslint-disable-next-line
+    // @ts-ignore
+    return colDef.accessorKey;
 }
 export function prepareColumnsSettingsMap(columnDefinitions) {
-    return columnDefinitions.filter(isFilterableColumn).map(colDef => colDef.id);
+    return columnDefinitions.filter(isFilterableColumn).map(getColumnIdentifier);
 }
 const sortColumnDefinitions = (columnOrder) => function sortColDefs(colDefA, colDefB) {
-    const indexItemA = columnOrder.findIndex(columnIndex => columnIndex === colDefA.id);
-    const indexItemB = columnOrder.findIndex(columnIndex => columnIndex === colDefB.id);
+    const indexItemA = columnOrder.findIndex(columnIndex => columnIndex === getColumnIdentifier(colDefA));
+    const indexItemB = columnOrder.findIndex(columnIndex => columnIndex === getColumnIdentifier(colDefB));
     return indexItemA - indexItemB;
 };
 function createColumnsSettingsOption(columnDefinition) {
     return {
-        id: columnDefinition.id,
+        id: getColumnIdentifier(columnDefinition),
         content: {
             option: columnDefinition.headerConfigLabel,
         },

package/dist/esm/helperComponents/Cells/BodyCell/BodyCell.js

@@ -24,5 +24,5 @@ export function BodyCell(_a) {
     const { setNodeRef } = useSortable({
         id: cell.column.id,
     });
-    return (_jsx(Cell, Object.assign({}, props, { ref: setNodeRef, style: style, className: cn(styles.tableBodyCell, className, columnDef.cellClassName), "data-row-auto-height": rowAutoHeight || undefined, "data-align": columnDef.align, "data-no-padding": columnDef.noBodyCellPadding || undefined, "data-column-id": cell.column.id, "data-test-id": TEST_IDS.bodyCell, children: flexRender(columnDef.cell, cell.getContext()) })));
+    return (_jsx(Cell, Object.assign({}, props, { ref: isDraggable ? setNodeRef : undefined, style: style, className: cn(styles.tableBodyCell, className, columnDef.cellClassName), "data-row-auto-height": rowAutoHeight || undefined, "data-align": columnDef.align, "data-no-padding": columnDef.noBodyCellPadding || undefined, "data-column-id": cell.column.id, "data-test-id": TEST_IDS.bodyCell, children: flexRender(columnDef.cell, cell.getContext()) })));
 }

package/dist/esm/helperComponents/Cells/HeaderCell/HeaderCell.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSortable } from '@dnd-kit/sortable';
 import { flexRender } from '@tanstack/react-table';
 import cn from 'classnames';
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { DEFAULT_COLUMNS, TEST_IDS } from '../../../constants';
 import { useCellSizes } from '../../hooks';
@@ -30,11 +30,16 @@ export function HeaderCell({ header, pinPosition, className, rowAutoHeight, isDr
             return;
         return (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
     };
-    const isAvailableForDrag = !DEFAULT_COLUMNS.includes(header.column.id);
-    const dragAttributes = isAvailableForDrag ? attributes : {};
-    const listenersAttributes = isAvailableForDrag ? listeners : {};
+    const draggableProps = useMemo(() => {
+        if (!isDraggable || DEFAULT_COLUMNS.includes(header.column.id)) {
+            return {};
+        }
+        return Object.assign(Object.assign({}, attributes), listeners);
+    }, [attributes, header.column.id, isDraggable, listeners]);
     return (_jsxs(Cell, { style: style, onClick: sortingHandler, "data-sortable": isSortable || undefined, "data-draggable": isDraggable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, "data-align": columnDef.headerAlign || undefined, "data-header-id": header.id, "data-resizing": isResizing || undefined, "data-pin-position": pinPosition || undefined, "data-row-auto-height": rowAutoHeight || undefined, role: 'columnheader', className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), ref: element => {
-            setNodeRef(element);
+            if (isDraggable) {
+                setNodeRef(element);
+            }
             return cellRef;
-        }, children: [_jsx("div", Object.assign({ className: styles.tableHeaderCellDragWrapper, "data-dragging": isDragging || undefined }, dragAttributes, listenersAttributes, { children: _jsxs("div", { className: styles.tableHeaderCellMain, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: rowAutoHeight ? (flexRender(columnDef.header, header.getContext())) : (_jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) })) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }) })), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
+        }, children: [_jsx("div", Object.assign({ className: styles.tableHeaderCellDragWrapper, "data-dragging": (isDraggable && isDragging) || undefined }, draggableProps, { children: _jsxs("div", { className: styles.tableHeaderCellMain, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: rowAutoHeight ? (flexRender(columnDef.header, header.getContext())) : (_jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) })) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }) })), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
 }

package/dist/esm/types.d.ts

@@ -42,6 +42,10 @@ type FilterableProps = {
     id: string;
     /** Название колонки в настройках таблицы */
     headerConfigLabel?: string;
+} | {
+    accessorKey: string;
+    /** Название колонки в настройках таблицы */
+    headerConfigLabel?: string;
 };
 type FilterableNormalColumnDefinition<TData> = NormalColumnDefinition<TData> & FilterableProps;
 type FilterablePinnedColumnDefinition<TData> = PinnedColumnDefinition<TData> & FilterableProps;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.34.2",
+  "version": "0.34.3",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -66,5 +66,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "0ff5d918d50523a1ac391cf4349d60e6547d58a9"
+  "gitHead": "92b00e691dc439c405ca1256c297352eeb8ba3ca"
 }

package/src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import { closestCenter, DndContext } from '@dnd-kit/core';
+import { closestCenter, DndContext, DndContextProps } from '@dnd-kit/core';
 import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
 import {
   CellContext,
@@ -57,6 +57,7 @@ import { usePageReset } from './hooks/usePageReset';
 import { useSaveTableSettings } from './hooks/useSaveTableSettings';
 import styles from './styles.module.scss';
 import {
+  getColumnIdentifier,
   getColumnStyleVars,
   getCurrentlyConfiguredHeaderWidth,
   getInitColumnSizeFromLocalStorage,
@@ -199,18 +200,21 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const manualPagination = infiniteLoading || manualPaginationProp;
 
   const [enabledColumns, setEnabledColumns] = useState<string[]>(() => prepareColumnsSettingsMap(columnDefinitions));
+  const areColumnsSettingsEnabled = Boolean(columnsSettingsProp?.enableSettingsMenu);
 
-  const filteredColumnDefinitions = useMemo(
-    () =>
-      columnDefinitions.filter(colDef => {
-        if (isFilterableColumn(colDef)) {
-          return enabledColumns.includes(colDef.id);
-        }
+  const filteredColumnDefinitions = useMemo(() => {
+    if (!areColumnsSettingsEnabled) {
+      return columnDefinitions;
+    }
 
-        return true;
-      }),
-    [columnDefinitions, enabledColumns],
-  );
+    return columnDefinitions.filter(colDef => {
+      if (isFilterableColumn(colDef)) {
+        return enabledColumns.includes(getColumnIdentifier(colDef));
+      }
+
+      return true;
+    });
+  }, [columnDefinitions, enabledColumns, areColumnsSettingsEnabled]);
 
   const tableColumns: ColumnDefinition<TData>[] = useMemo(() => {
     let cols: ColumnDefinition<TData>[] = filteredColumnDefinitions;
@@ -223,13 +227,24 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     return cols;
   }, [filteredColumnDefinitions, enableSelection, enableSelectPinned, expanding]);
 
+  const enableColumnsOrderSortByDrag = Boolean(columnsSettingsProp?.enableDrag);
   const { columnOrder, setColumnOrder, sensors, handleDragEnd } = useColumnOrderByDrag(tableColumns);
+  const dndContextProps: DndContextProps = useMemo(() => {
+    if (!enableColumnsOrderSortByDrag) {
+      return {};
+    }
+
+    return {
+      collisionDetection: closestCenter,
+      modifiers: [restrictToHorizontalAxis],
+      onDragEnd: handleDragEnd,
+      sensors: sensors,
+    };
+  }, [enableColumnsOrderSortByDrag, handleDragEnd, sensors]);
 
   const filterableColumns = useMemo(() => columnDefinitions.filter(isFilterableColumn), [columnDefinitions]);
   const areAllColumnsEnabled = filterableColumns.length === enabledColumns.length;
-
   const { t } = useLocale('Table');
-
   const columnsSettings = useMemo(
     () =>
       prepareColumnsSettings({
@@ -271,7 +286,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     columns: tableColumns,
     state: {
       columnPinning,
-      columnOrder,
+      columnOrder: enableColumnsOrderSortByDrag ? columnOrder : undefined,
       globalFilter,
       rowSelection,
       sorting,
@@ -291,7 +306,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
         return <TruncateString text={String(cell.getValue())} maxLines={1} />;
       },
     },
-    onColumnOrderChange: setColumnOrder,
+    onColumnOrderChange: enableColumnsOrderSortByDrag ? setColumnOrder : undefined,
 
     manualSorting,
     manualPagination,
@@ -471,8 +486,6 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const { updateCellMap } = useCellAutoResizeController(table);
 
   const showToolbar = !suppressToolbar;
-  const showColumnsSettings = Boolean(columnsSettingsProp?.enableSettingsMenu);
-  const enableColumnsOrderSortByDrag = Boolean(columnsSettingsProp?.enableDrag);
 
   return (
     <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)}>
@@ -498,7 +511,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
             onCheck={enableSelection ? handleOnToolbarCheck : undefined}
             outline={outline}
             after={
-              toolbarAfter || exportSettings || showColumnsSettings ? (
+              toolbarAfter || exportSettings || areColumnsSettingsEnabled ? (
                 <>
                   {toolbarAfter}
                   {exportSettings && (
@@ -510,7 +523,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                       centerRows={centerRows}
                     />
                   )}
-                  {showColumnsSettings && (
+                  {areColumnsSettingsEnabled && (
                     <ColumnsSettings
                       columnsSettings={columnsSettings}
                       enabledColumns={enabledColumns}
@@ -530,12 +543,7 @@ 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 }}>
-            <DndContext
-              collisionDetection={closestCenter}
-              modifiers={[restrictToHorizontalAxis]}
-              onDragEnd={handleDragEnd}
-              sensors={sensors}
-            >
+            <DndContext {...dndContextProps}>
               <TableContext.Provider value={{ table }}>
                 {(!infiniteLoading || !data.length) && loading ? (
                   <SkeletonContextProvider loading>

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

@@ -11,9 +11,10 @@ import { arrayMove } from '@dnd-kit/sortable';
 import { useCallback, useState } from 'react';
 
 import { ColumnDefinition } from '../../../types';
+import { getColumnIdentifier } from '../utils';
 
 function prepareInitialState<TData extends object>(tableColumns: ColumnDefinition<TData>[]) {
-  return tableColumns.filter(column => column.pinned !== 'left' && column.pinned !== 'right').map(c => c.id as string);
+  return tableColumns.filter(column => column.pinned !== 'left' && column.pinned !== 'right').map(getColumnIdentifier);
 }
 
 const draggingOptions: SensorOptions = {

package/src/components/Table/utils.ts

@@ -72,13 +72,24 @@ export function saveStateToLocalStorage({ id, columnId, size }: SaveStateToLocal
 export function isFilterableColumn<TData extends object>(
   colDef: ColumnDefinition<TData>,
 ): colDef is FilterableColumnDefinition<TData> {
-  return 'id' in colDef && 'headerConfigLabel' in colDef;
+  return ('id' in colDef || 'accessorKey' in colDef) && 'headerConfigLabel' in colDef;
+}
+
+export function getColumnIdentifier<TData extends object>(colDef: ColumnDefinition<TData>): string {
+  if ('id' in colDef && colDef.id) {
+    return colDef.id;
+  }
+
+  // Either id or accessorKey is always present
+  // eslint-disable-next-line
+  // @ts-ignore
+  return colDef.accessorKey as unknown as string;
 }
 
 export function prepareColumnsSettingsMap<TData extends object>(
   columnDefinitions: ColumnDefinition<TData>[],
 ): string[] {
-  return columnDefinitions.filter(isFilterableColumn).map(colDef => colDef.id);
+  return columnDefinitions.filter(isFilterableColumn).map(getColumnIdentifier);
 }
 
 const sortColumnDefinitions = (columnOrder: string[]) =>
@@ -86,8 +97,8 @@ const sortColumnDefinitions = (columnOrder: string[]) =>
     colDefA: FilterableColumnDefinition<TData>,
     colDefB: FilterableColumnDefinition<TData>,
   ) {
-    const indexItemA = columnOrder.findIndex(columnIndex => columnIndex === colDefA.id);
-    const indexItemB = columnOrder.findIndex(columnIndex => columnIndex === colDefB.id);
+    const indexItemA = columnOrder.findIndex(columnIndex => columnIndex === getColumnIdentifier(colDefA));
+    const indexItemB = columnOrder.findIndex(columnIndex => columnIndex === getColumnIdentifier(colDefB));
 
     return indexItemA - indexItemB;
   };
@@ -96,7 +107,7 @@ function createColumnsSettingsOption<TData extends object>(
   columnDefinition: FilterableColumnDefinition<TData>,
 ): BaseItemProps {
   return {
-    id: columnDefinition.id,
+    id: getColumnIdentifier(columnDefinition),
     content: {
       option: columnDefinition.headerConfigLabel as string,
     },

package/src/helperComponents/Cells/BodyCell/BodyCell.tsx

@@ -26,7 +26,7 @@ export function BodyCell<TData>({ cell, className, rowAutoHeight, isDraggable, .
   return (
     <Cell
       {...props}
-      ref={setNodeRef}
+      ref={isDraggable ? setNodeRef : undefined}
       style={style}
       className={cn(styles.tableBodyCell, className, columnDef.cellClassName)}
       data-row-auto-height={rowAutoHeight || undefined}

package/src/helperComponents/Cells/HeaderCell/HeaderCell.tsx

@@ -1,7 +1,7 @@
 import { useSortable } from '@dnd-kit/sortable';
 import { flexRender, Header } from '@tanstack/react-table';
 import cn from 'classnames';
-import { MouseEvent, useRef } from 'react';
+import { MouseEvent, useMemo, useRef } from 'react';
 
 import { TruncateString } from '@snack-uikit/truncate-string';
 
@@ -52,9 +52,16 @@ export function HeaderCell<TData>({
     return header.column.getToggleSortingHandler()?.(e);
   };
 
-  const isAvailableForDrag = !DEFAULT_COLUMNS.includes(header.column.id);
-  const dragAttributes = isAvailableForDrag ? attributes : {};
-  const listenersAttributes = isAvailableForDrag ? listeners : {};
+  const draggableProps = useMemo(() => {
+    if (!isDraggable || DEFAULT_COLUMNS.includes(header.column.id)) {
+      return {};
+    }
+
+    return {
+      ...attributes,
+      ...listeners,
+    };
+  }, [attributes, header.column.id, isDraggable, listeners]);
 
   return (
     <Cell
@@ -73,15 +80,16 @@ export function HeaderCell<TData>({
       role='columnheader'
       className={cn(styles.tableHeaderCell, className, columnDef.headerClassName)}
       ref={element => {
-        setNodeRef(element);
+        if (isDraggable) {
+          setNodeRef(element);
+        }
         return cellRef;
       }}
     >
       <div
         className={styles.tableHeaderCellDragWrapper}
-        data-dragging={isDragging || undefined}
-        {...dragAttributes}
-        {...listenersAttributes}
+        data-dragging={(isDraggable && isDragging) || undefined}
+        {...draggableProps}
       >
         <div className={styles.tableHeaderCellMain}>
           {columnDef.header && (

package/src/types.ts

@@ -63,11 +63,17 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
   size: number;
 };
 
-type FilterableProps = {
-  id: string;
-  /** Название колонки в настройках таблицы */
-  headerConfigLabel?: string;
-};
+type FilterableProps =
+  | {
+      id: string;
+      /** Название колонки в настройках таблицы */
+      headerConfigLabel?: string;
+    }
+  | {
+      accessorKey: string;
+      /** Название колонки в настройках таблицы */
+      headerConfigLabel?: string;
+    };
 
 type FilterableNormalColumnDefinition<TData> = NormalColumnDefinition<TData> & FilterableProps;