@snack-uikit/table 0.36.23 → 0.36.24

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.36.24 (2025-07-24)
+
+
+### Bug Fixes
+
+* **FF-6453:** cell render for TreeCell, fix click on tree cell when selection is disabled ([d26c1ba](https://github.com/cloud-ru-tech/snack-uikit/commit/d26c1ba66819c80fd545539fc63e2a46477a0c0f))
+
+
+
+
+
 ## 0.36.23 (2025-07-23)
 
 ### Only dependencies have been changed

package/README.md

@@ -179,6 +179,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | onChangePage* | `(offset: number, limit: number) => void` | - |  |
 | columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
+| loading | `boolean` | - | Состояние загрузки |
 | className | `string` | - | CSS-класс |
 | onRefresh | `() => void` | - | Колбек обновления данных |
 | moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
@@ -193,7 +194,6 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
 | rowAutoHeight | `boolean` | - |  |
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
-| loading | `boolean` | - | Состояние загрузки |
 | outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
 | columnFilters | `Omit<ChipChoiceRowProps<TFilters>, "size" \| "data-test-id"> & { open?: boolean; onOpenChange?(isOpen: boolean): void; } & { initialOpen?: boolean; }` | - | Фильтры |
 | dataFiltered | `boolean` | - | Флаг, показывающий что данные были отфильтрованы при пустых данных |

package/dist/cjs/components/ServerTable/ServerTable.d.ts

@@ -3,6 +3,17 @@ import { ServerTableProps } from '../types';
 export declare function ServerTable<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ items, total, limit, offset, onChangePage, search: searchProp, pagination, columnFilters, manualSorting, manualPagination, manualFiltering, ...rest }: ServerTableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ServerTable {
     var getRowActionsColumnDef: typeof import("../../helperComponents").getRowActionsColumnDef;
-    var statusAppearances: Record<string, string>;
+    var statusAppearances: {
+        readonly Primary: "primary";
+        readonly Neutral: "neutral";
+        readonly Red: "red";
+        readonly Orange: "orange";
+        readonly Yellow: "yellow";
+        readonly Green: "green";
+        readonly Blue: "blue";
+        readonly Violet: "violet";
+        readonly Pink: "pink";
+        readonly Loading: "loading";
+    };
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
 }

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

@@ -4,6 +4,17 @@ import { TableProps } from '../types';
 export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, infiniteLoading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination: manualPaginationProp, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, rowAutoHeight, columnsSettings: columnsSettingsProp, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
-    var statusAppearances: Record<string, string>;
+    var statusAppearances: {
+        readonly Primary: "primary";
+        readonly Neutral: "neutral";
+        readonly Red: "red";
+        readonly Orange: "orange";
+        readonly Yellow: "yellow";
+        readonly Green: "green";
+        readonly Blue: "blue";
+        readonly Violet: "violet";
+        readonly Pink: "pink";
+        readonly Loading: "loading";
+    };
     var getRowActionsColumnDef: typeof import("../../helperComponents").getRowActionsColumnDef;
 }

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

@@ -227,7 +227,7 @@ function Table(_a) {
     onRowSelectionChange,
     enableGrouping: true,
     enableRowSelection,
-    enableMultiRowSelection: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow,
+    enableMultiRowSelection: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable) && (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow),
     enableFilters: true,
     getSubRows: expanding === null || expanding === void 0 ? void 0 : expanding.getSubRows,
     filterFromLeafRows: Boolean(expanding),

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

@@ -17,7 +17,9 @@ function getTableColumnsDefinitions(_ref) {
     cols = [(0, helperComponents_1.getSelectionCellColumnDef)(enableSelectPinned), ...cols];
   }
   if (expanding) {
-    cols = [(0, helperComponents_1.getTreeColumnDef)(expanding.expandingColumnDefinition), ...cols];
+    cols = [(0, helperComponents_1.getTreeColumnDef)(Object.assign(Object.assign({}, expanding.expandingColumnDefinition), {
+      enableSelection
+    })), ...cols];
   }
   return cols;
 }

package/dist/cjs/helperComponents/Cells/StatusCell/constants.d.ts

@@ -1,2 +1,13 @@
-export declare const STATUS_APPEARANCE: Record<string, string>;
+export declare const STATUS_APPEARANCE: {
+    readonly Primary: "primary";
+    readonly Neutral: "neutral";
+    readonly Red: "red";
+    readonly Orange: "orange";
+    readonly Yellow: "yellow";
+    readonly Green: "green";
+    readonly Blue: "blue";
+    readonly Violet: "violet";
+    readonly Pink: "pink";
+    readonly Loading: "loading";
+};
 export declare const MIN_STATUS_CELL_SIZE = 16;

package/dist/cjs/helperComponents/Cells/TreeCell/TreeCell.d.ts

@@ -1,3 +1,4 @@
+import { CellContext } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 import { ColumnDefinition } from '../../../types';
 type BaseTreeColumnDef = {
@@ -14,15 +15,18 @@ type BaseTreeColumnDef = {
 };
 type TreeColumnDef = BaseTreeColumnDef & {
     header?: never;
-    renderDescription?: never;
+    cell?: never;
 };
 type TreeColumnDefWithDescription<TData> = BaseTreeColumnDef & {
     /** Заголовок колонки */
-    renderDescription?(cellValue: string, row: TData): string;
+    cell?(ctx: CellContext<TData, unknown>): ReactNode;
     /** Рендер функция заголовка колонки */
     header?: ColumnDefinition<TData>['header'];
 };
 export type TreeColumnDefinitionProps<TData> = TreeColumnDef | TreeColumnDefWithDescription<TData>;
+type TreeColDefProps<TData> = TreeColumnDefinitionProps<TData> & {
+    enableSelection?: boolean;
+};
 /** Вспомогательная функция для создания ячейки со статусом */
-export declare function getTreeColumnDef<TData>({ showToggle, icon, expandedIcon, collapsedIcon, header, accessorKey, }: TreeColumnDefinitionProps<TData>): ColumnDefinition<TData>;
+export declare function getTreeColumnDef<TData>({ showToggle, icon, expandedIcon, collapsedIcon, header, accessorKey, cell: renderCell, enableSelection, }: TreeColDefProps<TData>): ColumnDefinition<TData>;
 export {};

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

@@ -34,80 +34,69 @@ function getTreeColumnDef(_ref) {
       size: 24
     }),
     header,
-    accessorKey
-  } = _ref;
-  return {
-    id: constants_2.TREE_CELL_ID,
-    pinned: constants_1.COLUMN_PIN_POSITION.Left,
     accessorKey,
-    noBodyCellPadding: true,
-    noHeaderCellPadding: false,
-    enableResizing: true,
-    size: 150,
-    maxSize: Number.MAX_SAFE_INTEGER,
-    meta: {
-      skipOnExport: false
-    },
-    enableSorting: false,
-    header,
-    cell: function TreeCell(_ref2) {
-      let {
-        row,
-        cell
-      } = _ref2;
+    cell: renderCell,
+    enableSelection
+  } = _ref;
+  const cell = function TreeCell(ctx) {
+    var _a;
+    const {
+      row,
+      cell
+    } = ctx;
+    const isExpanded = row.getIsExpanded();
+    const isExpandable = row.getCanExpand();
+    const isMultiSelect = row.getCanMultiSelect();
+    const parent = row.getParentRow();
+    const isRowsSelectionEnabled = row.getCanSelect();
+    const isAllSubRowsSelected = row.getIsAllSubRowsSelected();
+    const isSomeSubRowSelected = row.getIsSomeSelected();
+    const isRowSelected = row.getIsSelected();
+    const isLastChildRow = ((_a = parent === null || parent === void 0 ? void 0 : parent.subRows.at(-1)) === null || _a === void 0 ? void 0 : _a.id) === row.id;
+    const depth = row.depth;
+    const {
+      ref
+    } = (0, contexts_1.useCellResize)(constants_2.TREE_CELL_ID, cell);
+    const linesVisibilityByIndex = (0, react_1.useMemo)(() => {
       var _a;
-      const isExpanded = row.getIsExpanded();
-      const isExpandable = row.getCanExpand();
-      const isMultiSelect = row.getCanMultiSelect();
-      const parent = row.getParentRow();
-      const isRowsSelectionEnabled = row.getCanSelect();
-      const isAllSubRowsSelected = row.getIsAllSubRowsSelected();
-      const isSomeSubRowSelected = row.getIsSomeSelected();
-      const isRowSelected = row.getIsSelected();
-      const isLastChildRow = ((_a = parent === null || parent === void 0 ? void 0 : parent.subRows.at(-1)) === null || _a === void 0 ? void 0 : _a.id) === row.id;
-      const depth = row.depth;
-      const {
-        ref
-      } = (0, contexts_1.useCellResize)(constants_2.TREE_CELL_ID, cell);
-      const linesVisibilityByIndex = (0, react_1.useMemo)(() => {
+      const parents = [];
+      for (let i = depth; i >= 0; i--) {
+        parents[i] = i === depth ? row : (_a = parents.at(i + 1)) === null || _a === void 0 ? void 0 : _a.getParentRow();
+      }
+      return parents.map((parent, index) => {
         var _a;
-        const parents = [];
-        for (let i = depth; i >= 0; i--) {
-          parents[i] = i === depth ? row : (_a = parents.at(i + 1)) === null || _a === void 0 ? void 0 : _a.getParentRow();
-        }
-        return parents.map((parent, index) => {
-          var _a;
-          if (!parent || parents.length === index + 1) return true;
-          const child = parents[index + 1];
-          return (child === null || child === void 0 ? void 0 : child.id) !== ((_a = parent.subRows.at(-1)) === null || _a === void 0 ? void 0 : _a.id) || (row === null || row === void 0 ? void 0 : row.id) === (child === null || child === void 0 ? void 0 : child.id);
+        if (!parent || parents.length === index + 1) return true;
+        const child = parents[index + 1];
+        return (child === null || child === void 0 ? void 0 : child.id) !== ((_a = parent.subRows.at(-1)) === null || _a === void 0 ? void 0 : _a.id) || (row === null || row === void 0 ? void 0 : row.id) === (child === null || child === void 0 ? void 0 : child.id);
+      });
+    }, [row, depth]);
+    const lines = (0, react_1.useMemo)(() => Array.from({
+      length: depth
+    }, (_, index) => (0, jsx_runtime_1.jsx)(TreeLine_1.TreeLine, {
+      visible: linesVisibilityByIndex.at(index),
+      className: index !== 0 ? styles_module_scss_1.default.line : styles_module_scss_1.default.firstLine,
+      halfHeight: index === depth - 1 && isLastChildRow
+    }, index)), [depth, linesVisibilityByIndex, isLastChildRow]);
+    (0, react_1.useEffect)(() => {
+      if (!isMultiSelect || !isExpandable || !isRowsSelectionEnabled) {
+        return;
+      }
+      if (isAllSubRowsSelected && !isRowSelected) {
+        row.toggleSelected(true, {
+          selectChildren: false
         });
-      }, [row, depth]);
-      const lines = (0, react_1.useMemo)(() => Array.from({
-        length: depth
-      }, (_, index) => (0, jsx_runtime_1.jsx)(TreeLine_1.TreeLine, {
-        visible: linesVisibilityByIndex.at(index),
-        className: index !== 0 ? styles_module_scss_1.default.line : styles_module_scss_1.default.firstLine,
-        halfHeight: index === depth - 1 && isLastChildRow
-      }, index)), [depth, linesVisibilityByIndex, isLastChildRow]);
-      (0, react_1.useEffect)(() => {
-        if (!isMultiSelect || !isExpandable || !isRowsSelectionEnabled) {
-          return;
-        }
-        if (isAllSubRowsSelected && !isRowSelected) {
-          row.toggleSelected(true, {
-            selectChildren: false
-          });
-          return;
-        }
-        if (isRowSelected && !isAllSubRowsSelected && isSomeSubRowSelected) {
-          row.toggleSelected(false, {
-            selectChildren: false
-          });
-          return;
-        }
-      }, [isAllSubRowsSelected, isSomeSubRowSelected, row, isRowSelected, isMultiSelect, isExpandable, isRowsSelectionEnabled]);
-      const toggleClickHandler = (0, react_1.useCallback)(event => {
-        event.stopPropagation();
+        return;
+      }
+      if (isRowSelected && !isAllSubRowsSelected && isSomeSubRowSelected) {
+        row.toggleSelected(false, {
+          selectChildren: false
+        });
+        return;
+      }
+    }, [isAllSubRowsSelected, isSomeSubRowSelected, row, isRowSelected, isMultiSelect, isExpandable, isRowsSelectionEnabled]);
+    const toggleClickHandler = (0, react_1.useCallback)(event => {
+      event.stopPropagation();
+      if (enableSelection) {
         if (isMultiSelect) {
           const shouldToggleOn = !isAllSubRowsSelected && !isRowSelected;
           const selectChildren = isAllSubRowsSelected || isSomeSubRowSelected || shouldToggleOn;
@@ -119,68 +108,84 @@ function getTreeColumnDef(_ref) {
         row.toggleSelected(!isRowSelected, {
           selectChildren: false
         });
-      }, [isMultiSelect, row, isAllSubRowsSelected, isSomeSubRowSelected, isRowSelected]);
-      const chevronClickHandler = (0, react_1.useCallback)(event => {
-        event.stopPropagation();
-        row.toggleExpanded();
-      }, [row]);
-      const value = typeof cell.row.original === 'object' && Object.hasOwn(cell.row.original, accessorKey) ?
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      cell.row.original[accessorKey] : cell.getValue();
-      return (0, jsx_runtime_1.jsx)("div", {
-        role: 'presentation',
-        "data-test-id": constants_1.TEST_IDS.tree.node,
-        className: styles_module_scss_1.default.treeCellContainer,
-        onClick: toggleClickHandler,
-        children: (0, jsx_runtime_1.jsxs)("div", {
-          className: styles_module_scss_1.default.treeCell,
-          ref: ref,
-          children: [lines, Boolean(parent) && (0, jsx_runtime_1.jsx)(TreeLine_1.TreeLine, {
-            horizontal: true,
-            visible: true
-          }), isExpandable && (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-            size: 'xs',
-            "data-test-id": constants_1.TEST_IDS.tree.chevron,
-            icon: (0, jsx_runtime_1.jsx)(icons_1.ChevronRightSVG, {}),
+      }
+    }, [isMultiSelect, row, isAllSubRowsSelected, isSomeSubRowSelected, isRowSelected]);
+    const chevronClickHandler = (0, react_1.useCallback)(event => {
+      event.stopPropagation();
+      row.toggleExpanded();
+    }, [row]);
+    const value = typeof cell.row.original === 'object' && Object.hasOwn(cell.row.original, accessorKey) ?
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    cell.row.original[accessorKey] : cell.getValue();
+    return (0, jsx_runtime_1.jsx)("div", {
+      role: 'presentation',
+      "data-test-id": constants_1.TEST_IDS.tree.node,
+      className: styles_module_scss_1.default.treeCellContainer,
+      onClick: toggleClickHandler,
+      children: (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.treeCell,
+        ref: ref,
+        children: [lines, Boolean(parent) && (0, jsx_runtime_1.jsx)(TreeLine_1.TreeLine, {
+          horizontal: true,
+          visible: true
+        }), isExpandable && (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+          size: 'xs',
+          "data-test-id": constants_1.TEST_IDS.tree.chevron,
+          icon: (0, jsx_runtime_1.jsx)(icons_1.ChevronRightSVG, {}),
+          onClick: chevronClickHandler,
+          className: styles_module_scss_1.default.cellExpandButton,
+          "data-expanded": isExpanded || undefined
+        }), (0, jsx_runtime_1.jsxs)("div", {
+          className: styles_module_scss_1.default.treeNodeContent,
+          "data-disabled": !isRowsSelectionEnabled || undefined,
+          "data-selected": isRowSelected || undefined,
+          "data-multiselect": isMultiSelect || undefined,
+          children: [showToggle && (0, jsx_runtime_1.jsx)("div", {
+            tabIndex: -1,
+            className: styles_module_scss_1.default.treeCheckboxWrap,
+            children: isMultiSelect ? (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, {
+              size: 's',
+              disabled: !isRowsSelectionEnabled,
+              checked: isRowSelected,
+              "data-test-id": constants_1.TEST_IDS.tree.checkbox,
+              indeterminate: isSomeSubRowSelected && !isAllSubRowsSelected
+            }) : (0, jsx_runtime_1.jsx)(toggles_1.Radio, {
+              size: 's',
+              disabled: !isRowsSelectionEnabled,
+              "data-test-id": constants_1.TEST_IDS.tree.radio,
+              checked: isRowSelected
+            })
+          }), (0, jsx_runtime_1.jsxs)("div", {
+            role: 'presentation',
             onClick: chevronClickHandler,
-            className: styles_module_scss_1.default.cellExpandButton,
-            "data-expanded": isExpanded || undefined
+            className: styles_module_scss_1.default.cellUserToggleIcon,
+            children: [isExpandable && isExpanded && expandedIcon, isExpandable && !isExpanded && collapsedIcon]
           }), (0, jsx_runtime_1.jsxs)("div", {
-            className: styles_module_scss_1.default.treeNodeContent,
-            "data-disabled": !isRowsSelectionEnabled || undefined,
-            "data-selected": isRowSelected || undefined,
-            "data-multiselect": isMultiSelect || undefined,
-            children: [showToggle && (0, jsx_runtime_1.jsx)("div", {
-              tabIndex: -1,
-              className: styles_module_scss_1.default.treeCheckboxWrap,
-              children: isMultiSelect ? (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, {
-                size: 's',
-                disabled: !isRowsSelectionEnabled,
-                checked: isRowSelected,
-                "data-test-id": constants_1.TEST_IDS.tree.checkbox,
-                indeterminate: isSomeSubRowSelected && !isAllSubRowsSelected
-              }) : (0, jsx_runtime_1.jsx)(toggles_1.Radio, {
-                size: 's',
-                disabled: !isRowsSelectionEnabled,
-                "data-test-id": constants_1.TEST_IDS.tree.radio,
-                checked: isRowSelected
-              })
-            }), (0, jsx_runtime_1.jsxs)("div", {
-              role: 'presentation',
-              onClick: chevronClickHandler,
-              className: styles_module_scss_1.default.cellUserToggleIcon,
-              children: [isExpandable && isExpanded && expandedIcon, isExpandable && !isExpanded && collapsedIcon]
-            }), (0, jsx_runtime_1.jsxs)("div", {
-              role: 'presentation',
-              className: styles_module_scss_1.default.userContent,
-              children: [!isExpandable && icon, (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
-                text: value
-              })]
+            role: 'presentation',
+            className: styles_module_scss_1.default.userContent,
+            children: [!isExpandable && icon, renderCell ? renderCell(ctx) : (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+              text: value
             })]
           })]
-        })
-      });
-    }
+        })]
+      })
+    });
+  };
+  return {
+    id: constants_2.TREE_CELL_ID,
+    pinned: constants_1.COLUMN_PIN_POSITION.Left,
+    accessorKey,
+    noBodyCellPadding: true,
+    noHeaderCellPadding: false,
+    enableResizing: true,
+    size: 150,
+    maxSize: Number.MAX_SAFE_INTEGER,
+    meta: {
+      skipOnExport: false
+    },
+    enableSorting: false,
+    header,
+    cell
   };
 }

package/dist/cjs/helperComponents/Cells/TreeCell/styles.module.css

@@ -20,6 +20,7 @@
 }
 
 .cellUserToggleIcon{
+  cursor:pointer;
   display:flex;
   align-items:center;
   box-sizing:border-box;

package/dist/esm/components/ServerTable/ServerTable.d.ts

@@ -3,6 +3,17 @@ import { ServerTableProps } from '../types';
 export declare function ServerTable<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ items, total, limit, offset, onChangePage, search: searchProp, pagination, columnFilters, manualSorting, manualPagination, manualFiltering, ...rest }: ServerTableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ServerTable {
     var getRowActionsColumnDef: typeof import("../../helperComponents").getRowActionsColumnDef;
-    var statusAppearances: Record<string, string>;
+    var statusAppearances: {
+        readonly Primary: "primary";
+        readonly Neutral: "neutral";
+        readonly Red: "red";
+        readonly Orange: "orange";
+        readonly Yellow: "yellow";
+        readonly Green: "green";
+        readonly Blue: "blue";
+        readonly Violet: "violet";
+        readonly Pink: "pink";
+        readonly Loading: "loading";
+    };
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
 }

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

@@ -4,6 +4,17 @@ import { TableProps } from '../types';
 export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, infiniteLoading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination: manualPaginationProp, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, rowAutoHeight, columnsSettings: columnsSettingsProp, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
-    var statusAppearances: Record<string, string>;
+    var statusAppearances: {
+        readonly Primary: "primary";
+        readonly Neutral: "neutral";
+        readonly Red: "red";
+        readonly Orange: "orange";
+        readonly Yellow: "yellow";
+        readonly Green: "green";
+        readonly Blue: "blue";
+        readonly Violet: "violet";
+        readonly Pink: "pink";
+        readonly Loading: "loading";
+    };
     var getRowActionsColumnDef: typeof import("../../helperComponents").getRowActionsColumnDef;
 }

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

@@ -141,7 +141,7 @@ export function Table(_a) {
         onRowSelectionChange,
         enableGrouping: true,
         enableRowSelection,
-        enableMultiRowSelection: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow,
+        enableMultiRowSelection: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable) && (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow),
         enableFilters: true,
         getSubRows: expanding === null || expanding === void 0 ? void 0 : expanding.getSubRows,
         filterFromLeafRows: Boolean(expanding),

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

@@ -5,7 +5,7 @@ export function getTableColumnsDefinitions({ columnDefinitions, enableSelection,
         cols = [getSelectionCellColumnDef(enableSelectPinned), ...cols];
     }
     if (expanding) {
-        cols = [getTreeColumnDef(expanding.expandingColumnDefinition), ...cols];
+        cols = [getTreeColumnDef(Object.assign(Object.assign({}, expanding.expandingColumnDefinition), { enableSelection })), ...cols];
     }
     return cols;
 }

package/dist/esm/helperComponents/Cells/StatusCell/constants.d.ts

@@ -1,2 +1,13 @@
-export declare const STATUS_APPEARANCE: Record<string, string>;
+export declare const STATUS_APPEARANCE: {
+    readonly Primary: "primary";
+    readonly Neutral: "neutral";
+    readonly Red: "red";
+    readonly Orange: "orange";
+    readonly Yellow: "yellow";
+    readonly Green: "green";
+    readonly Blue: "blue";
+    readonly Violet: "violet";
+    readonly Pink: "pink";
+    readonly Loading: "loading";
+};
 export declare const MIN_STATUS_CELL_SIZE = 16;

package/dist/esm/helperComponents/Cells/TreeCell/TreeCell.d.ts

@@ -1,3 +1,4 @@
+import { CellContext } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 import { ColumnDefinition } from '../../../types';
 type BaseTreeColumnDef = {
@@ -14,15 +15,18 @@ type BaseTreeColumnDef = {
 };
 type TreeColumnDef = BaseTreeColumnDef & {
     header?: never;
-    renderDescription?: never;
+    cell?: never;
 };
 type TreeColumnDefWithDescription<TData> = BaseTreeColumnDef & {
     /** Заголовок колонки */
-    renderDescription?(cellValue: string, row: TData): string;
+    cell?(ctx: CellContext<TData, unknown>): ReactNode;
     /** Рендер функция заголовка колонки */
     header?: ColumnDefinition<TData>['header'];
 };
 export type TreeColumnDefinitionProps<TData> = TreeColumnDef | TreeColumnDefWithDescription<TData>;
+type TreeColDefProps<TData> = TreeColumnDefinitionProps<TData> & {
+    enableSelection?: boolean;
+};
 /** Вспомогательная функция для создания ячейки со статусом */
-export declare function getTreeColumnDef<TData>({ showToggle, icon, expandedIcon, collapsedIcon, header, accessorKey, }: TreeColumnDefinitionProps<TData>): ColumnDefinition<TData>;
+export declare function getTreeColumnDef<TData>({ showToggle, icon, expandedIcon, collapsedIcon, header, accessorKey, cell: renderCell, enableSelection, }: TreeColDefProps<TData>): ColumnDefinition<TData>;
 export {};

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

@@ -10,7 +10,80 @@ import { TREE_CELL_ID } from './constants';
 import styles from './styles.module.css';
 import { TreeLine } from './TreeLine';
 /** Вспомогательная функция для создания ячейки со статусом */
-export function getTreeColumnDef({ showToggle = false, icon = _jsx(FileSVG, { size: 24 }), expandedIcon = _jsx(FolderOpenSVG, { size: 24 }), collapsedIcon = _jsx(FolderSVG, { size: 24 }), header, accessorKey, }) {
+export function getTreeColumnDef({ showToggle = false, icon = _jsx(FileSVG, { size: 24 }), expandedIcon = _jsx(FolderOpenSVG, { size: 24 }), collapsedIcon = _jsx(FolderSVG, { size: 24 }), header, accessorKey, cell: renderCell, enableSelection, }) {
+    const cell = function TreeCell(ctx) {
+        var _a;
+        const { row, cell } = ctx;
+        const isExpanded = row.getIsExpanded();
+        const isExpandable = row.getCanExpand();
+        const isMultiSelect = row.getCanMultiSelect();
+        const parent = row.getParentRow();
+        const isRowsSelectionEnabled = row.getCanSelect();
+        const isAllSubRowsSelected = row.getIsAllSubRowsSelected();
+        const isSomeSubRowSelected = row.getIsSomeSelected();
+        const isRowSelected = row.getIsSelected();
+        const isLastChildRow = ((_a = parent === null || parent === void 0 ? void 0 : parent.subRows.at(-1)) === null || _a === void 0 ? void 0 : _a.id) === row.id;
+        const depth = row.depth;
+        const { ref } = useCellResize(TREE_CELL_ID, cell);
+        const linesVisibilityByIndex = useMemo(() => {
+            var _a;
+            const parents = [];
+            for (let i = depth; i >= 0; i--) {
+                parents[i] = i === depth ? row : (_a = parents.at(i + 1)) === null || _a === void 0 ? void 0 : _a.getParentRow();
+            }
+            return parents.map((parent, index) => {
+                var _a;
+                if (!parent || parents.length === index + 1)
+                    return true;
+                const child = parents[index + 1];
+                return (child === null || child === void 0 ? void 0 : child.id) !== ((_a = parent.subRows.at(-1)) === null || _a === void 0 ? void 0 : _a.id) || (row === null || row === void 0 ? void 0 : row.id) === (child === null || child === void 0 ? void 0 : child.id);
+            });
+        }, [row, depth]);
+        const lines = useMemo(() => Array.from({ length: depth }, (_, index) => (_jsx(TreeLine, { visible: linesVisibilityByIndex.at(index), className: index !== 0 ? styles.line : styles.firstLine, halfHeight: index === depth - 1 && isLastChildRow }, index))), [depth, linesVisibilityByIndex, isLastChildRow]);
+        useEffect(() => {
+            if (!isMultiSelect || !isExpandable || !isRowsSelectionEnabled) {
+                return;
+            }
+            if (isAllSubRowsSelected && !isRowSelected) {
+                row.toggleSelected(true, { selectChildren: false });
+                return;
+            }
+            if (isRowSelected && !isAllSubRowsSelected && isSomeSubRowSelected) {
+                row.toggleSelected(false, { selectChildren: false });
+                return;
+            }
+        }, [
+            isAllSubRowsSelected,
+            isSomeSubRowSelected,
+            row,
+            isRowSelected,
+            isMultiSelect,
+            isExpandable,
+            isRowsSelectionEnabled,
+        ]);
+        const toggleClickHandler = useCallback(event => {
+            event.stopPropagation();
+            if (enableSelection) {
+                if (isMultiSelect) {
+                    const shouldToggleOn = !isAllSubRowsSelected && !isRowSelected;
+                    const selectChildren = isAllSubRowsSelected || isSomeSubRowSelected || shouldToggleOn;
+                    row.toggleSelected(shouldToggleOn, { selectChildren });
+                    return;
+                }
+                row.toggleSelected(!isRowSelected, { selectChildren: false });
+            }
+        }, [isMultiSelect, row, isAllSubRowsSelected, isSomeSubRowSelected, isRowSelected]);
+        const chevronClickHandler = useCallback(event => {
+            event.stopPropagation();
+            row.toggleExpanded();
+        }, [row]);
+        const value = typeof cell.row.original === 'object' && Object.hasOwn(cell.row.original, accessorKey)
+            ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                cell.row.original[accessorKey]
+            : cell.getValue();
+        return (_jsx("div", { role: 'presentation', "data-test-id": TEST_IDS.tree.node, className: styles.treeCellContainer, onClick: toggleClickHandler, children: _jsxs("div", { className: styles.treeCell, ref: ref, children: [lines, Boolean(parent) && _jsx(TreeLine, { horizontal: true, visible: true }), isExpandable && (_jsx(ButtonFunction, { size: 'xs', "data-test-id": TEST_IDS.tree.chevron, icon: _jsx(ChevronRightSVG, {}), onClick: chevronClickHandler, className: styles.cellExpandButton, "data-expanded": isExpanded || undefined })), _jsxs("div", { className: styles.treeNodeContent, "data-disabled": !isRowsSelectionEnabled || undefined, "data-selected": isRowSelected || undefined, "data-multiselect": isMultiSelect || undefined, children: [showToggle && (_jsx("div", { tabIndex: -1, className: styles.treeCheckboxWrap, children: isMultiSelect ? (_jsx(Checkbox, { size: 's', disabled: !isRowsSelectionEnabled, checked: isRowSelected, "data-test-id": TEST_IDS.tree.checkbox, indeterminate: isSomeSubRowSelected && !isAllSubRowsSelected })) : (_jsx(Radio, { size: 's', disabled: !isRowsSelectionEnabled, "data-test-id": TEST_IDS.tree.radio, checked: isRowSelected })) })), _jsxs("div", { role: 'presentation', onClick: chevronClickHandler, className: styles.cellUserToggleIcon, children: [isExpandable && isExpanded && expandedIcon, isExpandable && !isExpanded && collapsedIcon] }), _jsxs("div", { role: 'presentation', className: styles.userContent, children: [!isExpandable && icon, renderCell ? renderCell(ctx) : _jsx(TruncateString, { text: value })] })] })] }) }));
+    };
     return {
         id: TREE_CELL_ID,
         pinned: COLUMN_PIN_POSITION.Left,
@@ -25,75 +98,6 @@ export function getTreeColumnDef({ showToggle = false, icon = _jsx(FileSVG, { si
         },
         enableSorting: false,
         header,
-        cell: function TreeCell({ row, cell }) {
-            var _a;
-            const isExpanded = row.getIsExpanded();
-            const isExpandable = row.getCanExpand();
-            const isMultiSelect = row.getCanMultiSelect();
-            const parent = row.getParentRow();
-            const isRowsSelectionEnabled = row.getCanSelect();
-            const isAllSubRowsSelected = row.getIsAllSubRowsSelected();
-            const isSomeSubRowSelected = row.getIsSomeSelected();
-            const isRowSelected = row.getIsSelected();
-            const isLastChildRow = ((_a = parent === null || parent === void 0 ? void 0 : parent.subRows.at(-1)) === null || _a === void 0 ? void 0 : _a.id) === row.id;
-            const depth = row.depth;
-            const { ref } = useCellResize(TREE_CELL_ID, cell);
-            const linesVisibilityByIndex = useMemo(() => {
-                var _a;
-                const parents = [];
-                for (let i = depth; i >= 0; i--) {
-                    parents[i] = i === depth ? row : (_a = parents.at(i + 1)) === null || _a === void 0 ? void 0 : _a.getParentRow();
-                }
-                return parents.map((parent, index) => {
-                    var _a;
-                    if (!parent || parents.length === index + 1)
-                        return true;
-                    const child = parents[index + 1];
-                    return (child === null || child === void 0 ? void 0 : child.id) !== ((_a = parent.subRows.at(-1)) === null || _a === void 0 ? void 0 : _a.id) || (row === null || row === void 0 ? void 0 : row.id) === (child === null || child === void 0 ? void 0 : child.id);
-                });
-            }, [row, depth]);
-            const lines = useMemo(() => Array.from({ length: depth }, (_, index) => (_jsx(TreeLine, { visible: linesVisibilityByIndex.at(index), className: index !== 0 ? styles.line : styles.firstLine, halfHeight: index === depth - 1 && isLastChildRow }, index))), [depth, linesVisibilityByIndex, isLastChildRow]);
-            useEffect(() => {
-                if (!isMultiSelect || !isExpandable || !isRowsSelectionEnabled) {
-                    return;
-                }
-                if (isAllSubRowsSelected && !isRowSelected) {
-                    row.toggleSelected(true, { selectChildren: false });
-                    return;
-                }
-                if (isRowSelected && !isAllSubRowsSelected && isSomeSubRowSelected) {
-                    row.toggleSelected(false, { selectChildren: false });
-                    return;
-                }
-            }, [
-                isAllSubRowsSelected,
-                isSomeSubRowSelected,
-                row,
-                isRowSelected,
-                isMultiSelect,
-                isExpandable,
-                isRowsSelectionEnabled,
-            ]);
-            const toggleClickHandler = useCallback(event => {
-                event.stopPropagation();
-                if (isMultiSelect) {
-                    const shouldToggleOn = !isAllSubRowsSelected && !isRowSelected;
-                    const selectChildren = isAllSubRowsSelected || isSomeSubRowSelected || shouldToggleOn;
-                    row.toggleSelected(shouldToggleOn, { selectChildren });
-                    return;
-                }
-                row.toggleSelected(!isRowSelected, { selectChildren: false });
-            }, [isMultiSelect, row, isAllSubRowsSelected, isSomeSubRowSelected, isRowSelected]);
-            const chevronClickHandler = useCallback(event => {
-                event.stopPropagation();
-                row.toggleExpanded();
-            }, [row]);
-            const value = typeof cell.row.original === 'object' && Object.hasOwn(cell.row.original, accessorKey)
-                ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore
-                    cell.row.original[accessorKey]
-                : cell.getValue();
-            return (_jsx("div", { role: 'presentation', "data-test-id": TEST_IDS.tree.node, className: styles.treeCellContainer, onClick: toggleClickHandler, children: _jsxs("div", { className: styles.treeCell, ref: ref, children: [lines, Boolean(parent) && _jsx(TreeLine, { horizontal: true, visible: true }), isExpandable && (_jsx(ButtonFunction, { size: 'xs', "data-test-id": TEST_IDS.tree.chevron, icon: _jsx(ChevronRightSVG, {}), onClick: chevronClickHandler, className: styles.cellExpandButton, "data-expanded": isExpanded || undefined })), _jsxs("div", { className: styles.treeNodeContent, "data-disabled": !isRowsSelectionEnabled || undefined, "data-selected": isRowSelected || undefined, "data-multiselect": isMultiSelect || undefined, children: [showToggle && (_jsx("div", { tabIndex: -1, className: styles.treeCheckboxWrap, children: isMultiSelect ? (_jsx(Checkbox, { size: 's', disabled: !isRowsSelectionEnabled, checked: isRowSelected, "data-test-id": TEST_IDS.tree.checkbox, indeterminate: isSomeSubRowSelected && !isAllSubRowsSelected })) : (_jsx(Radio, { size: 's', disabled: !isRowsSelectionEnabled, "data-test-id": TEST_IDS.tree.radio, checked: isRowSelected })) })), _jsxs("div", { role: 'presentation', onClick: chevronClickHandler, className: styles.cellUserToggleIcon, children: [isExpandable && isExpanded && expandedIcon, isExpandable && !isExpanded && collapsedIcon] }), _jsxs("div", { role: 'presentation', className: styles.userContent, children: [!isExpandable && icon, _jsx(TruncateString, { text: value })] })] })] }) }));
-        },
+        cell,
     };
 }

package/dist/esm/helperComponents/Cells/TreeCell/styles.module.css

@@ -20,6 +20,7 @@
 }
 
 .cellUserToggleIcon{
+  cursor:pointer;
   display:flex;
   align-items:center;
   box-sizing:border-box;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.36.23",
+  "version": "0.36.24",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -66,5 +66,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "f40ab395048226e33e85848bbc5ad7e5964b4b5d"
+  "gitHead": "bb2179dfa0dd290a2942170857c5b190630a2ee0"
 }

package/src/components/Table/Table.tsx

@@ -260,7 +260,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     onRowSelectionChange,
     enableGrouping: true,
     enableRowSelection,
-    enableMultiRowSelection: rowSelectionProp?.multiRow,
+    enableMultiRowSelection: rowSelectionProp?.enable && rowSelectionProp?.multiRow,
     enableFilters: true,
     getSubRows: expanding?.getSubRows,
     filterFromLeafRows: Boolean(expanding),

package/src/components/Table/utils/getTableColumnsDefinitions.ts

@@ -20,7 +20,7 @@ export function getTableColumnsDefinitions<TData extends object>({
     cols = [getSelectionCellColumnDef(enableSelectPinned), ...cols];
   }
   if (expanding) {
-    cols = [getTreeColumnDef(expanding.expandingColumnDefinition), ...cols];
+    cols = [getTreeColumnDef({ ...expanding.expandingColumnDefinition, enableSelection }), ...cols];
   }
   return cols;
 }

package/src/helperComponents/Cells/StatusCell/constants.ts

@@ -1,4 +1,4 @@
-export const STATUS_APPEARANCE: Record<string, string> = {
+export const STATUS_APPEARANCE = {
   Primary: 'primary',
   Neutral: 'neutral',
   Red: 'red',

package/src/helperComponents/Cells/TreeCell/TreeCell.tsx

@@ -28,18 +28,22 @@ type BaseTreeColumnDef = {
 
 type TreeColumnDef = BaseTreeColumnDef & {
   header?: never;
-  renderDescription?: never;
+  cell?: never;
 };
 
 type TreeColumnDefWithDescription<TData> = BaseTreeColumnDef & {
   /** Заголовок колонки */
-  renderDescription?(cellValue: string, row: TData): string;
+  cell?(ctx: CellContext<TData, unknown>): ReactNode;
   /** Рендер функция заголовка колонки */
   header?: ColumnDefinition<TData>['header'];
 };
 
 export type TreeColumnDefinitionProps<TData> = TreeColumnDef | TreeColumnDefWithDescription<TData>;
 
+type TreeColDefProps<TData> = TreeColumnDefinitionProps<TData> & {
+  enableSelection?: boolean;
+};
+
 /** Вспомогательная функция для создания ячейки со статусом */
 export function getTreeColumnDef<TData>({
   showToggle = false,
@@ -48,89 +52,79 @@ export function getTreeColumnDef<TData>({
   collapsedIcon = <FolderSVG size={24} />,
   header,
   accessorKey,
-}: TreeColumnDefinitionProps<TData>): ColumnDefinition<TData> {
-  return {
-    id: TREE_CELL_ID,
-    pinned: COLUMN_PIN_POSITION.Left,
-    accessorKey,
-    noBodyCellPadding: true,
-    noHeaderCellPadding: false,
-    enableResizing: true,
-    size: 150,
-    maxSize: Number.MAX_SAFE_INTEGER,
-    meta: {
-      skipOnExport: false,
-    },
-    enableSorting: false,
-    header,
-    cell: function TreeCell<TData>({ row, cell }: CellContext<TData, unknown>) {
-      const isExpanded = row.getIsExpanded();
-      const isExpandable = row.getCanExpand();
-      const isMultiSelect = row.getCanMultiSelect();
-      const parent = row.getParentRow();
-      const isRowsSelectionEnabled = row.getCanSelect();
-      const isAllSubRowsSelected = row.getIsAllSubRowsSelected();
-      const isSomeSubRowSelected = row.getIsSomeSelected();
-      const isRowSelected = row.getIsSelected();
-      const isLastChildRow = parent?.subRows.at(-1)?.id === row.id;
-      const depth = row.depth;
-      const { ref } = useCellResize(TREE_CELL_ID, cell);
-
-      const linesVisibilityByIndex = useMemo(() => {
-        const parents: (Row<TData> | undefined)[] = [];
-        for (let i = depth; i >= 0; i--) {
-          parents[i] = i === depth ? row : parents.at(i + 1)?.getParentRow();
-        }
-
-        return parents.map((parent, index) => {
-          if (!parent || parents.length === index + 1) return true;
-          const child = parents[index + 1];
-
-          return child?.id !== parent.subRows.at(-1)?.id || row?.id === child?.id;
-        });
-      }, [row, depth]);
-
-      const lines = useMemo(
-        () =>
-          Array.from({ length: depth }, (_, index) => (
-            <TreeLine
-              key={index}
-              visible={linesVisibilityByIndex.at(index)}
-              className={index !== 0 ? styles.line : styles.firstLine}
-              halfHeight={index === depth - 1 && isLastChildRow}
-            />
-          )),
-        [depth, linesVisibilityByIndex, isLastChildRow],
-      );
-
-      useEffect(() => {
-        if (!isMultiSelect || !isExpandable || !isRowsSelectionEnabled) {
-          return;
-        }
-
-        if (isAllSubRowsSelected && !isRowSelected) {
-          row.toggleSelected(true, { selectChildren: false });
-          return;
-        }
-
-        if (isRowSelected && !isAllSubRowsSelected && isSomeSubRowSelected) {
-          row.toggleSelected(false, { selectChildren: false });
-          return;
-        }
-      }, [
-        isAllSubRowsSelected,
-        isSomeSubRowSelected,
-        row,
-        isRowSelected,
-        isMultiSelect,
-        isExpandable,
-        isRowsSelectionEnabled,
-      ]);
-
-      const toggleClickHandler: MouseEventHandler<HTMLElement> = useCallback(
-        event => {
-          event.stopPropagation();
-
+  cell: renderCell,
+  enableSelection,
+}: TreeColDefProps<TData>): ColumnDefinition<TData> {
+  const cell: ColumnDefinition<TData>['cell'] = function TreeCell(ctx) {
+    const { row, cell } = ctx;
+    const isExpanded = row.getIsExpanded();
+    const isExpandable = row.getCanExpand();
+    const isMultiSelect = row.getCanMultiSelect();
+    const parent = row.getParentRow();
+    const isRowsSelectionEnabled = row.getCanSelect();
+    const isAllSubRowsSelected = row.getIsAllSubRowsSelected();
+    const isSomeSubRowSelected = row.getIsSomeSelected();
+    const isRowSelected = row.getIsSelected();
+    const isLastChildRow = parent?.subRows.at(-1)?.id === row.id;
+    const depth = row.depth;
+    const { ref } = useCellResize(TREE_CELL_ID, cell);
+
+    const linesVisibilityByIndex = useMemo(() => {
+      const parents: (Row<TData> | undefined)[] = [];
+      for (let i = depth; i >= 0; i--) {
+        parents[i] = i === depth ? row : parents.at(i + 1)?.getParentRow();
+      }
+
+      return parents.map((parent, index) => {
+        if (!parent || parents.length === index + 1) return true;
+        const child = parents[index + 1];
+
+        return child?.id !== parent.subRows.at(-1)?.id || row?.id === child?.id;
+      });
+    }, [row, depth]);
+
+    const lines = useMemo(
+      () =>
+        Array.from({ length: depth }, (_, index) => (
+          <TreeLine
+            key={index}
+            visible={linesVisibilityByIndex.at(index)}
+            className={index !== 0 ? styles.line : styles.firstLine}
+            halfHeight={index === depth - 1 && isLastChildRow}
+          />
+        )),
+      [depth, linesVisibilityByIndex, isLastChildRow],
+    );
+
+    useEffect(() => {
+      if (!isMultiSelect || !isExpandable || !isRowsSelectionEnabled) {
+        return;
+      }
+
+      if (isAllSubRowsSelected && !isRowSelected) {
+        row.toggleSelected(true, { selectChildren: false });
+        return;
+      }
+
+      if (isRowSelected && !isAllSubRowsSelected && isSomeSubRowSelected) {
+        row.toggleSelected(false, { selectChildren: false });
+        return;
+      }
+    }, [
+      isAllSubRowsSelected,
+      isSomeSubRowSelected,
+      row,
+      isRowSelected,
+      isMultiSelect,
+      isExpandable,
+      isRowsSelectionEnabled,
+    ]);
+
+    const toggleClickHandler: MouseEventHandler<HTMLElement> = useCallback(
+      event => {
+        event.stopPropagation();
+
+        if (enableSelection) {
           if (isMultiSelect) {
             const shouldToggleOn = !isAllSubRowsSelected && !isRowSelected;
             const selectChildren = isAllSubRowsSelected || isSomeSubRowSelected || shouldToggleOn;
@@ -141,83 +135,101 @@ export function getTreeColumnDef<TData>({
           }
 
           row.toggleSelected(!isRowSelected, { selectChildren: false });
-        },
-        [isMultiSelect, row, isAllSubRowsSelected, isSomeSubRowSelected, isRowSelected],
-      );
-
-      const chevronClickHandler: MouseEventHandler<HTMLElement> = useCallback(
-        event => {
-          event.stopPropagation();
-          row.toggleExpanded();
-        },
-        [row],
-      );
-
-      const value =
-        typeof cell.row.original === 'object' && Object.hasOwn(cell.row.original as object, accessorKey)
-          ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            cell.row.original[accessorKey]
-          : cell.getValue<string>();
-
-      return (
-        <div
-          role={'presentation'}
-          data-test-id={TEST_IDS.tree.node}
-          className={styles.treeCellContainer}
-          onClick={toggleClickHandler}
-        >
-          <div className={styles.treeCell} ref={ref}>
-            {lines}
-            {Boolean(parent) && <TreeLine horizontal visible />}
-            {isExpandable && (
-              <ButtonFunction
-                size='xs'
-                data-test-id={TEST_IDS.tree.chevron}
-                icon={<ChevronRightSVG />}
-                onClick={chevronClickHandler}
-                className={styles.cellExpandButton}
-                data-expanded={isExpanded || undefined}
-              />
-            )}
-            <div
-              className={styles.treeNodeContent}
-              data-disabled={!isRowsSelectionEnabled || undefined}
-              data-selected={isRowSelected || undefined}
-              data-multiselect={isMultiSelect || undefined}
-            >
-              {showToggle && (
-                <div tabIndex={-1} className={styles.treeCheckboxWrap}>
-                  {isMultiSelect ? (
-                    <Checkbox
-                      size='s'
-                      disabled={!isRowsSelectionEnabled}
-                      checked={isRowSelected}
-                      data-test-id={TEST_IDS.tree.checkbox}
-                      indeterminate={isSomeSubRowSelected && !isAllSubRowsSelected}
-                    />
-                  ) : (
-                    <Radio
-                      size='s'
-                      disabled={!isRowsSelectionEnabled}
-                      data-test-id={TEST_IDS.tree.radio}
-                      checked={isRowSelected}
-                    />
-                  )}
-                </div>
-              )}
-              <div role='presentation' onClick={chevronClickHandler} className={styles.cellUserToggleIcon}>
-                {isExpandable && isExpanded && expandedIcon}
-                {isExpandable && !isExpanded && collapsedIcon}
-              </div>
-              <div role='presentation' className={styles.userContent}>
-                {!isExpandable && icon}
-                <TruncateString text={value} />
+        }
+      },
+      [isMultiSelect, row, isAllSubRowsSelected, isSomeSubRowSelected, isRowSelected],
+    );
+
+    const chevronClickHandler: MouseEventHandler<HTMLElement> = useCallback(
+      event => {
+        event.stopPropagation();
+        row.toggleExpanded();
+      },
+      [row],
+    );
+
+    const value =
+      typeof cell.row.original === 'object' && Object.hasOwn(cell.row.original as object, accessorKey)
+        ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          cell.row.original[accessorKey]
+        : cell.getValue<string>();
+
+    return (
+      <div
+        role={'presentation'}
+        data-test-id={TEST_IDS.tree.node}
+        className={styles.treeCellContainer}
+        onClick={toggleClickHandler}
+      >
+        <div className={styles.treeCell} ref={ref}>
+          {lines}
+          {Boolean(parent) && <TreeLine horizontal visible />}
+          {isExpandable && (
+            <ButtonFunction
+              size='xs'
+              data-test-id={TEST_IDS.tree.chevron}
+              icon={<ChevronRightSVG />}
+              onClick={chevronClickHandler}
+              className={styles.cellExpandButton}
+              data-expanded={isExpanded || undefined}
+            />
+          )}
+          <div
+            className={styles.treeNodeContent}
+            data-disabled={!isRowsSelectionEnabled || undefined}
+            data-selected={isRowSelected || undefined}
+            data-multiselect={isMultiSelect || undefined}
+          >
+            {showToggle && (
+              <div tabIndex={-1} className={styles.treeCheckboxWrap}>
+                {isMultiSelect ? (
+                  <Checkbox
+                    size='s'
+                    disabled={!isRowsSelectionEnabled}
+                    checked={isRowSelected}
+                    data-test-id={TEST_IDS.tree.checkbox}
+                    indeterminate={isSomeSubRowSelected && !isAllSubRowsSelected}
+                  />
+                ) : (
+                  <Radio
+                    size='s'
+                    disabled={!isRowsSelectionEnabled}
+                    data-test-id={TEST_IDS.tree.radio}
+                    checked={isRowSelected}
+                  />
+                )}
               </div>
+            )}
+            <div role='presentation' onClick={chevronClickHandler} className={styles.cellUserToggleIcon}>
+              {isExpandable && isExpanded && expandedIcon}
+              {isExpandable && !isExpanded && collapsedIcon}
+            </div>
+            <div role='presentation' className={styles.userContent}>
+              {!isExpandable && icon}
+
+              {renderCell ? renderCell(ctx) : <TruncateString text={value} />}
             </div>
           </div>
         </div>
-      );
+      </div>
+    );
+  };
+
+  return {
+    id: TREE_CELL_ID,
+    pinned: COLUMN_PIN_POSITION.Left,
+    accessorKey,
+    noBodyCellPadding: true,
+    noHeaderCellPadding: false,
+    enableResizing: true,
+    size: 150,
+    maxSize: Number.MAX_SAFE_INTEGER,
+    meta: {
+      skipOnExport: false,
     },
+    enableSorting: false,
+    header,
+    cell,
   };
 }

package/src/helperComponents/Cells/TreeCell/styles.module.scss

@@ -20,6 +20,7 @@
 }
 
 .cellUserToggleIcon {
+  cursor: pointer;
   display: flex;
   align-items: center;
   box-sizing: border-box;