@snack-uikit/table 0.28.7 → 0.29.0

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.29.0 (2025-02-25)
+
+
+### Features
+
+* **PDS-569:** table bulk rows multiselect with shift key ([e5802e3](https://github.com/cloud-ru-tech/snack-uikit/commit/e5802e390c0beeb0d4cae20235f3e82fccb83b24))
+
+
+
+
+
 ## 0.28.7 (2025-02-25)
 
 ### Only dependencies have been changed

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

@@ -130,12 +130,12 @@ function Table(_a) {
   }, [tableColumns]);
   const enableRowSelection = (0, react_1.useCallback)(row => {
     const parent = row.getParentRow();
-    const isParentEnable = parent ? parent.getCanSelect() : true;
-    let isCurrentRowSelectionEnable = true;
+    const isParentSelected = parent ? parent.getCanSelect() : true;
+    let isCurrentRowSelected = true;
     if ((rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable) !== undefined) {
-      isCurrentRowSelectionEnable = typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
+      isCurrentRowSelected = typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
     }
-    return isParentEnable && isCurrentRowSelectionEnable;
+    return isParentSelected && isCurrentRowSelected;
   }, [rowSelectionProp]);
   const table = (0, react_table_1.useReactTable)({
     data,
@@ -167,6 +167,7 @@ function Table(_a) {
     onGlobalFilterChange,
     getRowId,
     onRowSelectionChange,
+    enableGrouping: true,
     enableRowSelection,
     enableMultiRowSelection: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow,
     enableFilters: true,
@@ -209,7 +210,7 @@ function Table(_a) {
       return (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, table.getState().rowSelection, table.resetRowSelection);
     }
   })) : undefined, [bulkActionsProp, enableSelection, table]);
-  const handleOnCheck = (0, react_1.useCallback)(() => {
+  const handleOnToolbarCheck = (0, react_1.useCallback)(() => {
     if (!loading && !enableSelectPinned && table.getTopRows().length) {
       const centerRows = table.getCenterRows();
       const isSomeRowsSelected = table.getIsSomePageRowsSelected();
@@ -349,7 +350,7 @@ function Table(_a) {
           selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single',
           checked: table.getIsAllPageRowsSelected(),
           indeterminate: table.getIsSomePageRowsSelected(),
-          onCheck: enableSelection ? handleOnCheck : undefined,
+          onCheck: enableSelection ? handleOnToolbarCheck : undefined,
           outline: outline,
           after: toolbarAfter || exportSettings ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
             children: [toolbarAfter, exportSettings && (0, jsx_runtime_1.jsx)(helperComponents_1.ExportButton, {

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

@@ -1,13 +1,5 @@
 "use strict";
 
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
 var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
   return mod && mod.__esModule ? mod : {
     "default": mod
@@ -21,31 +13,32 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const toggles_1 = require("@snack-uikit/toggles");
 const constants_1 = require("../../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function SelectionCell(_a) {
-  var {
-      isMulti,
-      onChange
-    } = _a,
-    props = __rest(_a, ["isMulti", "onChange"]);
-  const handleCellClick = e => {
-    e.stopPropagation();
-    onChange(props.checked);
+function getRowsToToggle(rows, clickedRowId, previousClickedRowId) {
+  const rowsToToggle = [];
+  const processedRowsMap = {
+    [clickedRowId]: false,
+    [previousClickedRowId]: false
   };
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, jsx_runtime_1.jsx)("div", {
-      onClick: handleCellClick,
-      className: styles_module_scss_1.default.selectionCell,
-      "data-test-id": constants_1.TEST_IDS.rowSelect,
-      children: isMulti ? (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, Object.assign({}, props, {
-        size: 's'
-      })) : (0, jsx_runtime_1.jsx)(toggles_1.Radio, Object.assign({}, props, {
-        size: 's'
-      }))
-    })
-  );
+  const engagedRows = [clickedRowId, previousClickedRowId];
+  for (const row of rows) {
+    if (engagedRows.includes(row.id)) {
+      if (previousClickedRowId === '') {
+        rowsToToggle.push(row);
+        break;
+      }
+      processedRowsMap[row.id] = true;
+    }
+    if ((processedRowsMap[clickedRowId] || processedRowsMap[previousClickedRowId]) && !row.getIsGrouped()) {
+      rowsToToggle.push(row);
+    }
+    if (processedRowsMap[clickedRowId] && processedRowsMap[previousClickedRowId]) {
+      break;
+    }
+  }
+  return rowsToToggle;
 }
 function getSelectionCellColumnDef(enableSelectPinned) {
+  let previousClickedRowId = '';
   return {
     id: 'selectionCell',
     pinned: constants_1.COLUMN_PIN_POSITION.Left,
@@ -64,11 +57,39 @@ function getSelectionCellColumnDef(enableSelectPinned) {
         enableMultiRowSelection
       } = table.options;
       const isMulti = typeof enableMultiRowSelection === 'boolean' ? enableMultiRowSelection : true;
-      return (0, jsx_runtime_1.jsx)(SelectionCell, {
-        isMulti: isMulti,
-        checked: row.getIsSelected(),
-        onChange: row.getToggleSelectedHandler()
-      });
+      const checked = row.getIsSelected();
+      const handleCellClick = e => {
+        var _a, _b;
+        e.stopPropagation();
+        (_a = globalThis.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+        if (e.shiftKey) {
+          const {
+            rows,
+            rowsById
+          } = table.getRowModel();
+          const rowsToToggle = getRowsToToggle(rows, row.id, rows.map(r => r.id).includes(previousClickedRowId) ? previousClickedRowId : '');
+          const isSelected = !((_b = rowsById[row.id]) === null || _b === void 0 ? void 0 : _b.getIsSelected()) || false;
+          rowsToToggle.forEach(row => row.toggleSelected(isSelected));
+        } else {
+          row.toggleSelected(!checked);
+        }
+        previousClickedRowId = row.id;
+      };
+      return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        (0, jsx_runtime_1.jsx)("div", {
+          onClick: handleCellClick,
+          className: styles_module_scss_1.default.selectionCell,
+          "data-test-id": constants_1.TEST_IDS.rowSelect,
+          children: isMulti ? (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, {
+            size: 's',
+            checked: checked
+          }) : (0, jsx_runtime_1.jsx)(toggles_1.Radio, {
+            size: 's',
+            checked: checked
+          })
+        })
+      );
     },
     meta: {
       skipOnExport: true

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

@@ -65,13 +65,13 @@ export function Table(_a) {
     }, [tableColumns]);
     const enableRowSelection = useCallback((row) => {
         const parent = row.getParentRow();
-        const isParentEnable = parent ? parent.getCanSelect() : true;
-        let isCurrentRowSelectionEnable = true;
+        const isParentSelected = parent ? parent.getCanSelect() : true;
+        let isCurrentRowSelected = true;
         if ((rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable) !== undefined) {
-            isCurrentRowSelectionEnable =
+            isCurrentRowSelected =
                 typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
         }
-        return isParentEnable && isCurrentRowSelectionEnable;
+        return isParentSelected && isCurrentRowSelected;
     }, [rowSelectionProp]);
     const table = useReactTable({
         data,
@@ -98,6 +98,7 @@ export function Table(_a) {
         onGlobalFilterChange,
         getRowId,
         onRowSelectionChange,
+        enableGrouping: true,
         enableRowSelection,
         enableMultiRowSelection: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow,
         enableFilters: true,
@@ -135,7 +136,7 @@ export function Table(_a) {
     const bulkActions = useMemo(() => enableSelection
         ? bulkActionsProp === null || bulkActionsProp === void 0 ? void 0 : bulkActionsProp.map(action => (Object.assign(Object.assign({}, action), { onClick: () => { var _a; return (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, table.getState().rowSelection, table.resetRowSelection); } })))
         : undefined, [bulkActionsProp, enableSelection, table]);
-    const handleOnCheck = useCallback(() => {
+    const handleOnToolbarCheck = useCallback(() => {
         if (!loading && !enableSelectPinned && table.getTopRows().length) {
             const centerRows = table.getCenterRows();
             const isSomeRowsSelected = table.getIsSomePageRowsSelected();
@@ -244,7 +245,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 ? handleOnCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, 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 })] }) }), !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 ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, 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 })] }) }), !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/helperComponents/Cells/SelectionCell/SelectionCell.js

@@ -1,29 +1,33 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox, Radio } from '@snack-uikit/toggles';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import styles from './styles.module.css';
-function SelectionCell(_a) {
-    var { isMulti, onChange } = _a, props = __rest(_a, ["isMulti", "onChange"]);
-    const handleCellClick = (e) => {
-        e.stopPropagation();
-        onChange(props.checked);
+function getRowsToToggle(rows, clickedRowId, previousClickedRowId) {
+    const rowsToToggle = [];
+    const processedRowsMap = {
+        [clickedRowId]: false,
+        [previousClickedRowId]: false,
     };
-    return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    _jsx("div", { onClick: handleCellClick, className: styles.selectionCell, "data-test-id": TEST_IDS.rowSelect, children: isMulti ? _jsx(Checkbox, Object.assign({}, props, { size: 's' })) : _jsx(Radio, Object.assign({}, props, { size: 's' })) }));
+    const engagedRows = [clickedRowId, previousClickedRowId];
+    for (const row of rows) {
+        if (engagedRows.includes(row.id)) {
+            if (previousClickedRowId === '') {
+                rowsToToggle.push(row);
+                break;
+            }
+            processedRowsMap[row.id] = true;
+        }
+        if ((processedRowsMap[clickedRowId] || processedRowsMap[previousClickedRowId]) && !row.getIsGrouped()) {
+            rowsToToggle.push(row);
+        }
+        if (processedRowsMap[clickedRowId] && processedRowsMap[previousClickedRowId]) {
+            break;
+        }
+    }
+    return rowsToToggle;
 }
 export function getSelectionCellColumnDef(enableSelectPinned) {
+    let previousClickedRowId = '';
     return {
         id: 'selectionCell',
         pinned: COLUMN_PIN_POSITION.Left,
@@ -37,7 +41,25 @@ export function getSelectionCellColumnDef(enableSelectPinned) {
                 return null;
             const { enableMultiRowSelection } = table.options;
             const isMulti = typeof enableMultiRowSelection === 'boolean' ? enableMultiRowSelection : true;
-            return (_jsx(SelectionCell, { isMulti: isMulti, checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler() }));
+            const checked = row.getIsSelected();
+            const handleCellClick = (e) => {
+                var _a, _b;
+                e.stopPropagation();
+                (_a = globalThis.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+                if (e.shiftKey) {
+                    const { rows, rowsById } = table.getRowModel();
+                    const rowsToToggle = getRowsToToggle(rows, row.id, rows.map(r => r.id).includes(previousClickedRowId) ? previousClickedRowId : '');
+                    const isSelected = !((_b = rowsById[row.id]) === null || _b === void 0 ? void 0 : _b.getIsSelected()) || false;
+                    rowsToToggle.forEach(row => row.toggleSelected(isSelected));
+                }
+                else {
+                    row.toggleSelected(!checked);
+                }
+                previousClickedRowId = row.id;
+            };
+            return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            _jsx("div", { onClick: handleCellClick, className: styles.selectionCell, "data-test-id": TEST_IDS.rowSelect, children: isMulti ? _jsx(Checkbox, { size: 's', checked: checked }) : _jsx(Radio, { size: 's', checked: checked }) }));
         },
         meta: {
             skipOnExport: true,

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.28.7",
+  "version": "0.29.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -61,5 +61,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "ad5274413320bf7880ba3c2d1124610281d0de81"
+  "gitHead": "59426d0dd21ec9b22909d8350ca1d988665b4215"
 }

package/src/components/Table/Table.tsx

@@ -144,13 +144,13 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const enableRowSelection = useCallback(
     (row: Row<TData>) => {
       const parent = row.getParentRow();
-      const isParentEnable = parent ? parent.getCanSelect() : true;
-      let isCurrentRowSelectionEnable = true;
+      const isParentSelected = parent ? parent.getCanSelect() : true;
+      let isCurrentRowSelected = true;
       if (rowSelectionProp?.enable !== undefined) {
-        isCurrentRowSelectionEnable =
+        isCurrentRowSelected =
           typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
       }
-      return isParentEnable && isCurrentRowSelectionEnable;
+      return isParentSelected && isCurrentRowSelected;
     },
     [rowSelectionProp],
   );
@@ -182,6 +182,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
 
     getRowId,
     onRowSelectionChange,
+    enableGrouping: true,
     enableRowSelection,
     enableMultiRowSelection: rowSelectionProp?.multiRow,
     enableFilters: true,
@@ -231,7 +232,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     [bulkActionsProp, enableSelection, table],
   );
 
-  const handleOnCheck = useCallback(() => {
+  const handleOnToolbarCheck = useCallback(() => {
     if (!loading && !enableSelectPinned && table.getTopRows().length) {
       const centerRows = table.getCenterRows();
       const isSomeRowsSelected = table.getIsSomePageRowsSelected();
@@ -385,7 +386,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
               selectionMode={rowSelectionProp?.multiRow ? 'multiple' : 'single'}
               checked={table.getIsAllPageRowsSelected()}
               indeterminate={table.getIsSomePageRowsSelected()}
-              onCheck={enableSelection ? handleOnCheck : undefined}
+              onCheck={enableSelection ? handleOnToolbarCheck : undefined}
               outline={outline}
               after={
                 toolbarAfter || exportSettings ? (

package/src/helperComponents/Cells/SelectionCell/SelectionCell.tsx

@@ -1,3 +1,4 @@
+import { Row } from '@tanstack/react-table';
 import { MouseEvent } from 'react';
 
 import { Checkbox, Radio } from '@snack-uikit/toggles';
@@ -6,28 +7,40 @@ import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import { ColumnDefinition } from '../../../types';
 import styles from './styles.module.scss';
 
-type SelectionCellProps = {
-  checked: boolean;
-  onChange(checked: boolean): void;
-  isMulti?: boolean;
-};
+function getRowsToToggle<TData>(rows: Row<TData>[], clickedRowId: string, previousClickedRowId: string) {
+  const rowsToToggle: Row<TData>[] = [];
+  const processedRowsMap: Record<string, boolean> = {
+    [clickedRowId]: false,
+    [previousClickedRowId]: false,
+  };
 
-function SelectionCell({ isMulti, onChange, ...props }: SelectionCellProps) {
-  const handleCellClick = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
+  const engagedRows = [clickedRowId, previousClickedRowId];
 
-    onChange(props.checked);
-  };
+  for (const row of rows) {
+    if (engagedRows.includes(row.id)) {
+      if (previousClickedRowId === '') {
+        rowsToToggle.push(row);
+        break;
+      }
+
+      processedRowsMap[row.id] = true;
+    }
 
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div onClick={handleCellClick} className={styles.selectionCell} data-test-id={TEST_IDS.rowSelect}>
-      {isMulti ? <Checkbox {...props} size='s' /> : <Radio {...props} size='s' />}
-    </div>
-  );
+    if ((processedRowsMap[clickedRowId] || processedRowsMap[previousClickedRowId]) && !row.getIsGrouped()) {
+      rowsToToggle.push(row);
+    }
+
+    if (processedRowsMap[clickedRowId] && processedRowsMap[previousClickedRowId]) {
+      break;
+    }
+  }
+
+  return rowsToToggle;
 }
 
 export function getSelectionCellColumnDef<TData>(enableSelectPinned: boolean): ColumnDefinition<TData> {
+  let previousClickedRowId = '';
+
   return {
     id: 'selectionCell',
     pinned: COLUMN_PIN_POSITION.Left,
@@ -44,8 +57,34 @@ export function getSelectionCellColumnDef<TData>(enableSelectPinned: boolean): C
 
       const isMulti = typeof enableMultiRowSelection === 'boolean' ? enableMultiRowSelection : true;
 
+      const checked = row.getIsSelected();
+
+      const handleCellClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+
+        globalThis.getSelection()?.removeAllRanges();
+
+        if (e.shiftKey) {
+          const { rows, rowsById } = table.getRowModel();
+          const rowsToToggle = getRowsToToggle(
+            rows,
+            row.id,
+            rows.map(r => r.id).includes(previousClickedRowId) ? previousClickedRowId : '',
+          );
+          const isSelected = !rowsById[row.id]?.getIsSelected() || false;
+          rowsToToggle.forEach(row => row.toggleSelected(isSelected));
+        } else {
+          row.toggleSelected(!checked);
+        }
+
+        previousClickedRowId = row.id;
+      };
+
       return (
-        <SelectionCell isMulti={isMulti} checked={row.getIsSelected()} onChange={row.getToggleSelectedHandler()} />
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        <div onClick={handleCellClick} className={styles.selectionCell} data-test-id={TEST_IDS.rowSelect}>
+          {isMulti ? <Checkbox size='s' checked={checked} /> : <Radio size='s' checked={checked} />}
+        </div>
       );
     },
     meta: {