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

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.16.1 (2025-12-08)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-icons@16.0.1](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/icons/CHANGELOG.md)
+* [@cloud-ru/uikit-product-mobile-chips@0.8.45](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/mobile-chips/CHANGELOG.md)
+* [@cloud-ru/uikit-product-mobile-dropdown@0.9.29](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/mobile-dropdown/CHANGELOG.md)
+* [@cloud-ru/uikit-product-mobile-toolbar@0.4.12](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/mobile-toolbar/CHANGELOG.md)
+* [@cloud-ru/uikit-product-utils@8.0.2](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
+# 0.16.0 (2025-12-03)
+
+
+### Features
+
+* **FF-7473:** add disabled state and HideToggler support for row selection in mobile table ([f0f7517](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/f0f7517d45ef8f5580865951790238426b96fc16))
+
+
+
+
+
 # 0.15.0 (2025-12-03)
 
 

package/dist/cjs/components/MobileTable.js

@@ -187,7 +187,7 @@ function MobileTable(_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'),
-                        }, onRefresh: onRefresh ? handleOnRefresh : undefined, outline: true, filterRow: columnFilters, after: toolbarAfter || shouldShowSorting || (areColumnsSettingsEnabled && columnsSettings) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarAfter, shouldShowSorting && ((0, jsx_runtime_1.jsx)(helperComponents_1.TableSorting, { table: table, columnDefinitions: columnDefinitions, enabledColumns: areColumnsSettingsEnabled ? enabledColumns : undefined, areColumnsSettingsEnabled: areColumnsSettingsEnabled })), areColumnsSettingsEnabled && columnsSettings && ((0, jsx_runtime_1.jsx)(ColumnsSettings_1.ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : undefined, moreActions: moreActions, bulkActions: bulkActions, selectedCount: table.getSelectedRowModel().rows.length, selectionMode: selectionMode, onCheck: enableSelection ? handleOnToolbarCheck : undefined, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected() }) })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.table, children: loading ? ((0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => ((0, jsx_runtime_1.jsx)(helperComponents_1.TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none' }, index))) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tableRows.map((row, index) => ((0, jsx_runtime_1.jsx)(helperComponents_1.TableCard, { headlineId: headlineId, row: row, table: table, selection: enableSelection ? selectionMode : 'none' }, index))), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, { table: table })] })));
+                        }, onRefresh: onRefresh ? handleOnRefresh : undefined, outline: true, filterRow: columnFilters, after: toolbarAfter || shouldShowSorting || (areColumnsSettingsEnabled && columnsSettings) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarAfter, shouldShowSorting && ((0, jsx_runtime_1.jsx)(helperComponents_1.TableSorting, { table: table, columnDefinitions: columnDefinitions, enabledColumns: areColumnsSettingsEnabled ? enabledColumns : undefined, areColumnsSettingsEnabled: areColumnsSettingsEnabled })), areColumnsSettingsEnabled && columnsSettings && ((0, jsx_runtime_1.jsx)(ColumnsSettings_1.ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : undefined, moreActions: moreActions, bulkActions: bulkActions, selectedCount: table.getSelectedRowModel().rows.length, selectionMode: selectionMode, onCheck: enableSelection ? handleOnToolbarCheck : undefined, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected() }) })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.table, children: loading ? ((0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => ((0, jsx_runtime_1.jsx)(helperComponents_1.TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none' }, index))) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tableRows.map((row, index) => ((0, jsx_runtime_1.jsx)(helperComponents_1.TableCard, { headlineId: headlineId, row: row, table: table, selectionAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance, selection: enableSelection ? selectionMode : 'none' }, index))), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, { table: table })] })));
 }
 MobileTable.getRowActionsColumnDef = helperComponents_1.getRowActionsColumnDef;
 MobileTable.getStatusColumnDef = helperComponents_1.getStatusColumnDef;

package/dist/cjs/helperComponents/TableCard/TableCard.d.ts

@@ -1,9 +1,11 @@
 import { Row, Table } from '@tanstack/react-table';
+import { RowAppearance } from '@snack-uikit/table';
 type TableCardProps<TData extends object> = {
     headlineId?: string;
     row: Row<TData>;
     table: Table<TData>;
     selection: 'multiple' | 'single' | 'none';
+    selectionAppearance?: RowAppearance;
 };
-export declare function TableCard<TData extends object>({ headlineId, table, row, selection }: TableCardProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function TableCard<TData extends object>({ headlineId, table, row, selection, selectionAppearance, }: TableCardProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/helperComponents/TableCard/TableCard.js

@@ -7,22 +7,27 @@ exports.TableCard = TableCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = require("react");
+const table_1 = require("@snack-uikit/table");
 const toggles_1 = require("@snack-uikit/toggles");
 const constants_1 = require("../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function TableCard({ headlineId, table, row, selection }) {
+function TableCard({ headlineId, table, row, selection, selectionAppearance = table_1.RowAppearance.Disabled, }) {
     const headerGroups = table.getHeaderGroups();
     const headerCell = row._getAllCellsByColumnId()[headlineId !== null && headlineId !== void 0 ? headlineId : ''];
     const headerColumn = table.getFlatHeaders().find(header => header.id === headlineId);
     const actionsCell = row._getAllCellsByColumnId()[constants_1.ROW_ACTIONS_COLUMN_ID];
     const actionsColumn = table.getFlatHeaders().find(header => header.id === constants_1.ROW_ACTIONS_COLUMN_ID);
     const isSelected = row.getIsSelected();
+    const canSelect = row.getCanSelect();
+    const isDisabled = !canSelect;
     const handleSelection = (0, react_1.useCallback)(() => {
+        if (isDisabled)
+            return;
         if (selection === 'single')
             row.toggleSelected(true);
         if (selection === 'multiple')
             row.toggleSelected(!isSelected);
-    }, [isSelected, row, selection]);
+    }, [isDisabled, isSelected, row, selection]);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.card, "data-is-selected": isSelected !== null && isSelected !== void 0 ? isSelected : undefined, "data-selection-mode": selection, onClick: handleSelection, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [headerCell && headerColumn && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headline, children: (0, react_table_1.flexRender)(headerColumn.column.columnDef.cell, headerCell.getContext()) })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.body, children: headerGroups.map(group => group.headers.map((header, index) => {
@@ -32,5 +37,7 @@ function TableCard({ headlineId, table, row, selection }) {
                             const column = header.column.columnDef;
                             const cell = row._getAllCellsByColumnId()[header.column.id];
                             return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.cardRow, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cardRowHeader, children: (0, react_table_1.flexRender)(column.header, header.getContext()) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cardRowContent, children: (0, react_table_1.flexRender)(column.cell, cell.getContext()) })] }, header.id || index));
-                        })) })] }), selection === 'single' && (0, jsx_runtime_1.jsx)(toggles_1.Radio, { size: 'm', className: styles_module_scss_1.default.selectionController, checked: isSelected }), selection === 'multiple' && (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: 'm', className: styles_module_scss_1.default.selectionController, checked: isSelected }), actionsCell && actionsColumn && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.button, children: (0, react_table_1.flexRender)(actionsColumn.column.columnDef.cell, actionsCell.getContext()) }))] }));
+                        })) })] }), selection === 'single' &&
+                (isDisabled && selectionAppearance === table_1.RowAppearance.HideToggler ? null : ((0, jsx_runtime_1.jsx)(toggles_1.Radio, { size: 'm', className: styles_module_scss_1.default.selectionController, checked: isSelected, disabled: isDisabled }))), selection === 'multiple' &&
+                (isDisabled && selectionAppearance === table_1.RowAppearance.HideToggler ? null : ((0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: 'm', className: styles_module_scss_1.default.selectionController, checked: isSelected, disabled: isDisabled }))), actionsCell && actionsColumn && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.button, children: (0, react_table_1.flexRender)(actionsColumn.column.columnDef.cell, actionsCell.getContext()) }))] }));
 }

package/dist/esm/components/MobileTable.js

@@ -181,7 +181,7 @@ export function MobileTable(_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'),
-                        }, onRefresh: onRefresh ? handleOnRefresh : undefined, outline: true, filterRow: columnFilters, after: toolbarAfter || shouldShowSorting || (areColumnsSettingsEnabled && columnsSettings) ? (_jsxs(_Fragment, { children: [toolbarAfter, shouldShowSorting && (_jsx(TableSorting, { table: table, columnDefinitions: columnDefinitions, enabledColumns: areColumnsSettingsEnabled ? enabledColumns : undefined, areColumnsSettingsEnabled: areColumnsSettingsEnabled })), areColumnsSettingsEnabled && columnsSettings && (_jsx(ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : undefined, moreActions: moreActions, bulkActions: bulkActions, selectedCount: table.getSelectedRowModel().rows.length, selectionMode: selectionMode, onCheck: enableSelection ? handleOnToolbarCheck : undefined, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected() }) })), _jsx("div", { className: styles.table, children: loading ? (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none' }, index))) })) : (_jsxs(_Fragment, { children: [tableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: table, selection: enableSelection ? selectionMode : 'none' }, index))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && _jsx(TablePagination, { table: table })] })));
+                        }, onRefresh: onRefresh ? handleOnRefresh : undefined, outline: true, filterRow: columnFilters, after: toolbarAfter || shouldShowSorting || (areColumnsSettingsEnabled && columnsSettings) ? (_jsxs(_Fragment, { children: [toolbarAfter, shouldShowSorting && (_jsx(TableSorting, { table: table, columnDefinitions: columnDefinitions, enabledColumns: areColumnsSettingsEnabled ? enabledColumns : undefined, areColumnsSettingsEnabled: areColumnsSettingsEnabled })), areColumnsSettingsEnabled && columnsSettings && (_jsx(ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : undefined, moreActions: moreActions, bulkActions: bulkActions, selectedCount: table.getSelectedRowModel().rows.length, selectionMode: selectionMode, onCheck: enableSelection ? handleOnToolbarCheck : undefined, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected() }) })), _jsx("div", { className: styles.table, children: loading ? (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none' }, index))) })) : (_jsxs(_Fragment, { children: [tableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: table, selectionAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance, selection: enableSelection ? selectionMode : 'none' }, index))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && _jsx(TablePagination, { table: table })] })));
 }
 MobileTable.getRowActionsColumnDef = getRowActionsColumnDef;
 MobileTable.getStatusColumnDef = getStatusColumnDef;

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

@@ -1,9 +1,11 @@
 import { Row, Table } from '@tanstack/react-table';
+import { RowAppearance } from '@snack-uikit/table';
 type TableCardProps<TData extends object> = {
     headlineId?: string;
     row: Row<TData>;
     table: Table<TData>;
     selection: 'multiple' | 'single' | 'none';
+    selectionAppearance?: RowAppearance;
 };
-export declare function TableCard<TData extends object>({ headlineId, table, row, selection }: TableCardProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function TableCard<TData extends object>({ headlineId, table, row, selection, selectionAppearance, }: TableCardProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/helperComponents/TableCard/TableCard.js

@@ -1,22 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { flexRender } from '@tanstack/react-table';
 import { useCallback } from 'react';
+import { RowAppearance } from '@snack-uikit/table';
 import { Checkbox, Radio } from '@snack-uikit/toggles';
 import { ROW_ACTIONS_COLUMN_ID } from '../../constants';
 import styles from './styles.module.css';
-export function TableCard({ headlineId, table, row, selection }) {
+export function TableCard({ headlineId, table, row, selection, selectionAppearance = RowAppearance.Disabled, }) {
     const headerGroups = table.getHeaderGroups();
     const headerCell = row._getAllCellsByColumnId()[headlineId !== null && headlineId !== void 0 ? headlineId : ''];
     const headerColumn = table.getFlatHeaders().find(header => header.id === headlineId);
     const actionsCell = row._getAllCellsByColumnId()[ROW_ACTIONS_COLUMN_ID];
     const actionsColumn = table.getFlatHeaders().find(header => header.id === ROW_ACTIONS_COLUMN_ID);
     const isSelected = row.getIsSelected();
+    const canSelect = row.getCanSelect();
+    const isDisabled = !canSelect;
     const handleSelection = useCallback(() => {
+        if (isDisabled)
+            return;
         if (selection === 'single')
             row.toggleSelected(true);
         if (selection === 'multiple')
             row.toggleSelected(!isSelected);
-    }, [isSelected, row, selection]);
+    }, [isDisabled, isSelected, row, selection]);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     _jsxs("div", { className: styles.card, "data-is-selected": isSelected !== null && isSelected !== void 0 ? isSelected : undefined, "data-selection-mode": selection, onClick: handleSelection, children: [_jsxs("div", { className: styles.content, children: [headerCell && headerColumn && (_jsx("div", { className: styles.headline, children: flexRender(headerColumn.column.columnDef.cell, headerCell.getContext()) })), _jsx("div", { className: styles.body, children: headerGroups.map(group => group.headers.map((header, index) => {
@@ -26,5 +31,7 @@ export function TableCard({ headlineId, table, row, selection }) {
                             const column = header.column.columnDef;
                             const cell = row._getAllCellsByColumnId()[header.column.id];
                             return (_jsxs("div", { className: styles.cardRow, children: [_jsx("div", { className: styles.cardRowHeader, children: flexRender(column.header, header.getContext()) }), _jsx("div", { className: styles.cardRowContent, children: flexRender(column.cell, cell.getContext()) })] }, header.id || index));
-                        })) })] }), selection === 'single' && _jsx(Radio, { size: 'm', className: styles.selectionController, checked: isSelected }), selection === 'multiple' && _jsx(Checkbox, { size: 'm', className: styles.selectionController, checked: isSelected }), actionsCell && actionsColumn && (_jsx("div", { className: styles.button, children: flexRender(actionsColumn.column.columnDef.cell, actionsCell.getContext()) }))] }));
+                        })) })] }), selection === 'single' &&
+                (isDisabled && selectionAppearance === RowAppearance.HideToggler ? null : (_jsx(Radio, { size: 'm', className: styles.selectionController, checked: isSelected, disabled: isDisabled }))), selection === 'multiple' &&
+                (isDisabled && selectionAppearance === RowAppearance.HideToggler ? null : (_jsx(Checkbox, { size: 'm', className: styles.selectionController, checked: isSelected, disabled: isDisabled }))), actionsCell && actionsColumn && (_jsx("div", { className: styles.button, children: flexRender(actionsColumn.column.columnDef.cell, actionsCell.getContext()) }))] }));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-mobile-table",
   "title": "Mobile Table",
-  "version": "0.15.0",
+  "version": "0.16.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,11 +36,11 @@
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-icons": "16.0.0",
-    "@cloud-ru/uikit-product-mobile-chips": "0.8.44",
-    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.28",
-    "@cloud-ru/uikit-product-mobile-toolbar": "0.4.11",
-    "@cloud-ru/uikit-product-utils": "8.0.1",
+    "@cloud-ru/uikit-product-icons": "16.0.1",
+    "@cloud-ru/uikit-product-mobile-chips": "0.8.45",
+    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.29",
+    "@cloud-ru/uikit-product-mobile-toolbar": "0.4.12",
+    "@cloud-ru/uikit-product-utils": "8.0.2",
     "@snack-uikit/button": "0.19.16",
     "@snack-uikit/figma-tokens": "18.0.1",
     "@snack-uikit/icons": "0.27.4",
@@ -63,5 +63,5 @@
   "devDependencies": {
     "@types/lodash.debounce": "4.0.9"
   },
-  "gitHead": "765bcc332ea9c28ea21abac518944d95e4bfc6fe"
+  "gitHead": "ab61e93fe6f723c522e95a7c5540b3080de6b2de"
 }

package/src/components/MobileTable.tsx

@@ -385,6 +385,7 @@ export function MobileTable<TData extends object, TFilters extends FiltersState
                 headlineId={headlineId}
                 row={row}
                 table={table}
+                selectionAppearance={rowSelectionProp?.appearance}
                 selection={enableSelection ? selectionMode : 'none'}
               />
             ))}

package/src/helperComponents/TableCard/TableCard.tsx

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