@synerise/ds-table 0.54.0 → 0.55.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.55.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.54.0...@synerise/ds-table@0.55.0) (2024-07-05)
+
+
+### Bug Fixes
+
+* fixed missing dependencies ([f718fb7](https://github.com/synerise/synerise-design/commit/f718fb7e954a19857ea4b6bbd417e3fe290fd2dc))
+* **table:** fix remount virtual rows ([284e4ef](https://github.com/synerise/synerise-design/commit/284e4ef46188362b5e23c2fb2c1d18544f3c9680))
+
+
+### Features
+
+* **table:** added prop to exclude selection for rows ([2607c00](https://github.com/synerise/synerise-design/commit/2607c0048fa7abddfc249d7fc4eeb2b9142ae5c1))
+
+
+
+
+
 # [0.54.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.53.2...@synerise/ds-table@0.54.0) (2024-07-02)
 
 

package/README.md

@@ -98,6 +98,15 @@ This type of table requires a specific type of dataSource which has to contain a
 | onChange                         | Callback executed when selection changes             | (selectedRowKeys: React.ReactText[], selectedRows: T[]) => void | -       |
 | limit                            | Max length of selection rows array                   | number                                                          | -       |
 | independentSelectionExpandedRows | Allows to select parent and child rows independently | boolean                                                         | -       |
+| checkRowSelectionStatus          | Validator function record selection status           | (record: T) => SelectionStatus                                  | -       |
+
+#### SelectionStatus
+
+| Property               | Description                                            | Type                                                                       | Default |
+| ---------------        | ------------------------------------------------       | ---------------------------------------------------------------            | ------- |
+| unavailable            | Skips rendering checkbox if true                       | boolean                                                                    | -       |
+| disabled               | Renders checkbox in disabled state                     | boolean                                                                    | -       |
+
 
 #### RowStar
 

package/dist/Cell/Star/StarCell.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 declare const _default: React.ForwardRefExoticComponent<{
-    children: ((string | number | boolean | {} | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactNodeArray | React.ReactPortal | React.ReactNode[]) & (boolean | React.ReactChild | React.ReactFragment | React.ReactPortal)) | null | undefined;
+    children: ((string | number | boolean | {} | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | React.ReactNode[]) & (boolean | React.ReactChild | React.ReactFragment | React.ReactPortal)) | null | undefined;
     onClick?: (() => void) | undefined;
     active?: boolean | undefined;
     starTooltip?: React.ReactNode;

package/dist/DefaultTable/DefaultTable.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { DSTableProps, RowType } from '../Table.types';
-declare function DefaultTable<T extends object & RowType<T>>(props: DSTableProps<T>): React.ReactElement;
+declare function DefaultTable<T extends object & RowType<T>>(props: DSTableProps<T>): React.JSX.Element;
 export default DefaultTable;

package/dist/DefaultTable/DefaultTable.js

@@ -10,18 +10,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import * as React from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { compact, isEqual } from 'lodash';
 import Table from 'antd/lib/table';
 import { FormattedMessage } from 'react-intl';
 import Result from '@synerise/ds-result';
-import usePrevious from '@synerise/ds-utils/dist/usePrevious/usePrevious';
+import { usePrevious } from '@synerise/ds-utils';
 import { columnsToSortState, useSortState } from '../ColumnSortMenu/useSortState';
 import { columnWithSortButtons } from '../ColumnSortMenu/columnWithSortButtons';
 import { useRowKey } from '../hooks/useRowKey';
 import { useRowStar } from '../hooks/useRowStar/useRowStar';
 import { RowSelectionColumn } from '../RowSelection';
-import { getChildrenColumnName } from '../utils/getChildrenColumnName'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { getChildrenColumnName, isRecordSelectable } from '../utils';
 
 function DefaultTable(props) {
   var _selection$selections;
@@ -47,17 +47,17 @@ function DefaultTable(props) {
   var _useRowKey = useRowKey(rowKey),
       getRowKey = _useRowKey.getRowKey;
 
-  var starColumn = React.useMemo(function () {
+  var starColumn = useMemo(function () {
     return getRowStarColumn(_objectSpread({}, props, {
       getRowKey: getRowKey
     }));
   }, [getRowKey, getRowStarColumn, props]);
-  React.useEffect(function () {
+  useEffect(function () {
     if (!isEqual(previousColumns, columns)) {
       sortStateApi.updateColumnsData(columnsToSortState(columns));
     }
   }, [columns, previousColumns, sortStateApi]);
-  var RenderRow = React.useCallback(function (row) {
+  var RenderRow = useCallback(function (row) {
     var children = row.children,
         rowProps = _objectWithoutPropertiesLoose(row, _excluded);
 
@@ -102,15 +102,16 @@ function DefaultTable(props) {
         value = _ref2[1];
     return _objectSpread({}, acc, (_objectSpread2 = {}, _objectSpread2[key] = value, _objectSpread2));
   }, {});
-  var selectedRecords = React.useMemo(function () {
+  var selectedRecords = useMemo(function () {
     if (selection) {
       var _ref4 = selection,
-          selectedRowKeys = _ref4.selectedRowKeys;
+          selectedRowKeys = _ref4.selectedRowKeys,
+          checkRowSelectionStatus = _ref4.checkRowSelectionStatus;
       var selectedRows = [];
       dataSource && dataSource.forEach(function (row) {
         var key = getRowKey(row);
 
-        if (key && selectedRowKeys.indexOf(key) >= 0) {
+        if (key && selectedRowKeys.indexOf(key) >= 0 && isRecordSelectable(row, checkRowSelectionStatus)) {
           selectedRows = [].concat(selectedRows, [row]);
         }
 
@@ -120,7 +121,7 @@ function DefaultTable(props) {
           rowChildren.forEach(function (child) {
             var childKey = getRowKey(child);
 
-            if (childKey && selectedRowKeys.indexOf(childKey) >= 0) {
+            if (childKey && selectedRowKeys.indexOf(childKey) >= 0 && isRecordSelectable(child, checkRowSelectionStatus)) {
               selectedRows = [].concat(selectedRows, [child]);
             }
           });
@@ -130,13 +131,14 @@ function DefaultTable(props) {
     }
 
     return [];
-  }, [dataSource, getRowKey, selection, childrenColumnName]);
-  var renderRowSelection = React.useCallback(function (key, record) {
+  }, [childrenColumnName, dataSource, getRowKey, selection]);
+  var renderRowSelection = useCallback(function (key, record) {
     var _ref5 = selection,
         selectedRowKeys = _ref5.selectedRowKeys,
         limit = _ref5.limit,
         independentSelectionExpandedRows = _ref5.independentSelectionExpandedRows,
-        onChange = _ref5.onChange;
+        onChange = _ref5.onChange,
+        checkRowSelectionStatus = _ref5.checkRowSelectionStatus;
     return /*#__PURE__*/React.createElement(RowSelectionColumn, {
       rowKey: rowKey,
       record: record,
@@ -146,43 +148,40 @@ function DefaultTable(props) {
       onChange: onChange,
       selectedRecords: selectedRecords,
       tableLocale: locale,
+      checkRowSelectionStatus: checkRowSelectionStatus,
       childrenColumnName: childrenColumnName
     });
   }, [locale, rowKey, selectedRecords, selection, childrenColumnName]);
-  return (
-    /*#__PURE__*/
-    // @ts-ignore
-    React.createElement(Table, _extends({}, props, {
-      "data-popup-container": true,
-      columns: [].concat(prependedColumns, decoratedColumns),
-      expandable: _objectSpread({
-        expandIconColumnIndex: -1
-      }, expandable),
-      locale: _objectSpread({}, locale, {
-        emptyText: /*#__PURE__*/React.createElement(Result, {
-          description: (locale == null ? void 0 : locale.emptyText) || /*#__PURE__*/React.createElement(FormattedMessage, {
-            id: "DS.TABLE.EMPTY_TEXT"
-          }),
-          type: "no-results",
-          noSearchResults: true
-        })
-      }) // @ts-ignore
-      ,
-      title: title,
-      showSorterTooltip: false,
-      components: _objectSpread({
-        body: {
-          row: RenderRow
-        }
-      }, decoratedComponents) // @ts-ignore
-      ,
-      rowSelection: selection && _objectSpread({}, selection, {
-        selections: selection == null || (_selection$selections = selection.selections) == null ? void 0 : _selection$selections.filter(Boolean),
-        columnWidth: 64,
-        renderCell: renderRowSelection
+  return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
+    "data-popup-container": true,
+    columns: [].concat(prependedColumns, decoratedColumns),
+    expandable: _objectSpread({
+      expandIconColumnIndex: -1
+    }, expandable),
+    locale: _objectSpread({}, locale, {
+      emptyText: /*#__PURE__*/React.createElement(Result, {
+        description: (locale == null ? void 0 : locale.emptyText) || /*#__PURE__*/React.createElement(FormattedMessage, {
+          id: "DS.TABLE.EMPTY_TEXT"
+        }),
+        type: "no-results",
+        noSearchResults: true
       })
-    }))
-  );
+    }) // @ts-ignore
+    ,
+    title: title,
+    showSorterTooltip: false,
+    components: _objectSpread({
+      body: {
+        row: RenderRow
+      }
+    }, decoratedComponents) // @ts-ignore
+    ,
+    rowSelection: selection && _objectSpread({}, selection, {
+      selections: selection == null || (_selection$selections = selection.selections) == null ? void 0 : _selection$selections.filter(Boolean),
+      columnWidth: 64,
+      renderCell: renderRowSelection
+    })
+  }));
 }
 
 export default DefaultTable;

package/dist/RowSelection/RowSelectionColumn.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { RowSelectionProps } from './RowSelectionColumn.types';
 import { RowType } from '../Table.types';
-export declare function RowSelectionColumn<T extends object & RowType<T>>({ rowKey, record, limit, independentSelectionExpandedRows, selectedRowKeys, selectedRecords, tableLocale, onChange, childrenColumnName, }: RowSelectionProps<T>): React.ReactElement | null;
+export declare function RowSelectionColumn<T extends object & RowType<T>>({ rowKey, record, limit, independentSelectionExpandedRows, selectedRowKeys, selectedRecords, tableLocale, onChange, checkRowSelectionStatus, childrenColumnName, }: RowSelectionProps<T>): React.JSX.Element | null;

package/dist/RowSelection/RowSelectionColumn.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import Tooltip from '@synerise/ds-tooltip';
 import Button from '@synerise/ds-button';
 import { useRowKey } from '../hooks/useRowKey';
-// eslint-disable-next-line import/prefer-default-export
+import { getRecordSelectionStatus, isRecordSelectable } from '../utils';
 export function RowSelectionColumn(_ref) {
   var rowKey = _ref.rowKey,
       record = _ref.record,
@@ -12,6 +12,7 @@ export function RowSelectionColumn(_ref) {
       selectedRecords = _ref.selectedRecords,
       tableLocale = _ref.tableLocale,
       onChange = _ref.onChange,
+      checkRowSelectionStatus = _ref.checkRowSelectionStatus,
       childrenColumnName = _ref.childrenColumnName;
 
   var _useRowKey = useRowKey(rowKey),
@@ -19,44 +20,49 @@ export function RowSelectionColumn(_ref) {
 
   var recordKey = getRowKey(record);
   var rowChildren = record[childrenColumnName];
-  var checkedChildren = React.useMemo(function () {
+  var isSelectable = useCallback(function (item) {
+    return isRecordSelectable(item, checkRowSelectionStatus);
+  }, [checkRowSelectionStatus]);
+  var checkedChildren = useMemo(function () {
     return (rowChildren == null ? void 0 : rowChildren.filter(function (child) {
       var childKey = getRowKey(child);
-      return childKey && selectedRowKeys.indexOf(childKey) >= 0;
+      return childKey && selectedRowKeys.indexOf(childKey) >= 0 && isSelectable(child);
     })) || [];
-  }, [getRowKey, rowChildren, selectedRowKeys]);
-  var allChildrenSelected = React.useMemo(function () {
-    return !!(rowChildren != null && rowChildren.every(function (child) {
+  }, [isSelectable, getRowKey, rowChildren, selectedRowKeys]);
+  var allChildrenSelected = useMemo(function () {
+    return !!(rowChildren != null && rowChildren.filter(isSelectable).every(function (child) {
       var childKey = getRowKey(child);
       return childKey && selectedRowKeys.indexOf(childKey) >= 0;
     }));
-  }, [getRowKey, rowChildren, selectedRowKeys]);
-  var isIndeterminate = React.useMemo(function () {
+  }, [getRowKey, isSelectable, rowChildren, selectedRowKeys]);
+  var isIndeterminate = useMemo(function () {
     if (Array.isArray(rowChildren) && !independentSelectionExpandedRows) {
-      return checkedChildren.length > 0 && checkedChildren.length < ((rowChildren == null ? void 0 : rowChildren.length) || 0);
+      var clickableChildren = rowChildren == null ? void 0 : rowChildren.filter(isSelectable);
+      return checkedChildren.length > 0 && checkedChildren.length < (clickableChildren.length || 0);
     }
 
     return false;
-  }, [checkedChildren.length, independentSelectionExpandedRows, rowChildren]);
-  var isChecked = React.useMemo(function () {
+  }, [checkedChildren.length, independentSelectionExpandedRows, isSelectable, rowChildren]);
+  var isChecked = useMemo(function () {
     if (Array.isArray(rowChildren) && !independentSelectionExpandedRows) {
       return isChecked || allChildrenSelected;
     }
 
     return recordKey !== undefined && selectedRowKeys && selectedRowKeys.indexOf(recordKey) >= 0;
   }, [allChildrenSelected, independentSelectionExpandedRows, rowChildren, recordKey, selectedRowKeys]);
-  var handleSelectionChange = React.useCallback(function (isCheckedNext, changedRecord) {
+  var handleSelectionChange = useCallback(function (isCheckedNext, changedRecord) {
     var selectedRows = selectedRecords;
     var changedRecordChildren = changedRecord[childrenColumnName];
 
     if (isCheckedNext) {
       if (Array.isArray(changedRecordChildren) && !independentSelectionExpandedRows) {
-        selectedRows = [].concat(selectedRows, changedRecordChildren);
+        var clickableChildren = changedRecordChildren.filter(isSelectable);
+        selectedRows = [].concat(selectedRows, clickableChildren);
       } else {
         selectedRows = [].concat(selectedRows, [changedRecord]);
       }
     } else if (Array.isArray(changedRecordChildren) && !independentSelectionExpandedRows) {
-      var childrenKeys = changedRecordChildren.map(function (child) {
+      var childrenKeys = changedRecordChildren.filter(isSelectable).map(function (child) {
         return getRowKey(child);
       });
       selectedRows = selectedRows.filter(function (child) {
@@ -78,18 +84,23 @@ export function RowSelectionColumn(_ref) {
 
       return acc;
     }, []), selectedRows);
-  }, [getRowKey, independentSelectionExpandedRows, onChange, recordKey, selectedRecords, childrenColumnName]);
-  return recordKey !== undefined ? /*#__PURE__*/React.createElement(Tooltip, {
+  }, [getRowKey, independentSelectionExpandedRows, isSelectable, onChange, recordKey, selectedRecords, childrenColumnName]);
+
+  var _getRecordSelectionSt = getRecordSelectionStatus(checkRowSelectionStatus, record),
+      unavailable = _getRecordSelectionSt.unavailable,
+      disabled = _getRecordSelectionSt.disabled;
+
+  return recordKey !== undefined && !unavailable ? /*#__PURE__*/React.createElement(Tooltip, {
     title: tableLocale == null ? void 0 : tableLocale.selectRowTooltip,
     mouseLeaveDelay: 0
   }, /*#__PURE__*/React.createElement(Button.Checkbox, {
     key: "checkbox-" + recordKey,
     "data-testid": "ds-table-selection-button",
     checked: isChecked,
-    disabled: !isChecked && Boolean(limit !== undefined && limit <= selectedRowKeys.length),
+    disabled: !isChecked && Boolean(limit !== undefined && limit <= selectedRowKeys.length) || disabled,
     indeterminate: isIndeterminate,
-    onClick: function onClick(e) {
-      e.stopPropagation();
+    onClick: function onClick(event) {
+      event.stopPropagation();
     },
     onChange: function onChange(isCheckedNext) {
       return handleSelectionChange(isCheckedNext, record);

package/dist/RowSelection/RowSelectionColumn.types.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TableProps } from 'rc-table/lib/Table';
-import { DSTableProps } from '../Table.types';
+import { DSTableProps, RowSelection } from '../Table.types';
 export type RowSelectionProps<T> = {
     rowKey: TableProps<T>['rowKey'];
     independentSelectionExpandedRows?: boolean;
@@ -9,6 +9,7 @@ export type RowSelectionProps<T> = {
     limit?: number;
     record: T;
     tableLocale: DSTableProps<T>['locale'];
-    onChange: (selectedRowKeys: React.ReactText[], selectedRecords: T[]) => void;
+    onChange: RowSelection<T>['onChange'];
+    checkRowSelectionStatus?: RowSelection<T>['checkRowSelectionStatus'];
     childrenColumnName: string;
 };

package/dist/Table.types.d.ts

@@ -20,6 +20,10 @@ export type RowSelection<T> = Omit<TableRowSelection<T>, 'selections'> & {
     onChange: (selectedRowKeys: React.ReactText[], selectedRows: T[]) => void;
     limit?: number;
     independentSelectionExpandedRows?: boolean;
+    checkRowSelectionStatus?: (record: T) => {
+        disabled?: boolean;
+        unavailable?: boolean;
+    };
 };
 export interface Filter {
     tooltips: {

package/dist/TableHeader/TableSelection.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import type { ReactElement, ReactText } from 'react';
 import { Props } from './TableSelection.types';
 declare function TableSelection<T extends {
-    key: React.ReactText;
+    key: ReactText;
     children?: T[];
-}>({ dataSource, dataSourceFull, selection, rowKey, locale, childrenColumnName, }: Props<T>): React.ReactElement | null;
+}>({ dataSource, dataSourceFull, selection, rowKey, locale, childrenColumnName, }: Props<T>): ReactElement | null;
 export default TableSelection;

package/dist/TableHeader/TableSelection.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import Dropdown from '@synerise/ds-dropdown';
 import Menu from '@synerise/ds-menu';
 import Button from '@synerise/ds-button';
@@ -6,7 +6,8 @@ import Tooltip from '@synerise/ds-tooltip';
 import Icon, { OptionVerticalM } from '@synerise/ds-icon';
 import * as S from '../Table.styles';
 import { SELECTION_ALL, SELECTION_INVERT } from '../Table';
-import { useRowKey } from '../hooks/useRowKey'; // @ts-ignore
+import { useRowKey } from '../hooks/useRowKey';
+import { isRecordSelectable } from '../utils'; // @ts-ignore
 
 function TableSelection(_ref) {
   var dataSource = _ref.dataSource,
@@ -21,7 +22,7 @@ function TableSelection(_ref) {
 
   var allData = dataSourceFull || dataSource;
   var isShowingSubset = dataSourceFull && dataSourceFull.length !== dataSource.length;
-  var getRowsForKeys = React.useCallback(function (keys) {
+  var getRowsForKeys = useCallback(function (keys) {
     if (selection) {
       var rows = [];
       allData.forEach(function (record) {
@@ -50,9 +51,10 @@ function TableSelection(_ref) {
 
     return [];
   }, [allData, getRowKey, selection, childrenColumnName]);
-  var selectAll = React.useCallback(function () {
+  var selectAll = useCallback(function () {
     if (dataSource && selection) {
-      var selectedRowKeys = selection.selectedRowKeys;
+      var selectedRowKeys = selection.selectedRowKeys,
+          checkRowSelectionStatus = selection.checkRowSelectionStatus;
       var keys = isShowingSubset ? [].concat(selectedRowKeys) : [];
       dataSource.forEach(function (record) {
         var rowChildren = record[childrenColumnName];
@@ -60,21 +62,21 @@ function TableSelection(_ref) {
         if (Array.isArray(rowChildren)) {
           keys = [].concat(keys, rowChildren.reduce(function (acc, child) {
             var key = getRowKey(child);
-            return key ? [].concat(acc, [key]) : acc;
+            return key && isRecordSelectable(child, checkRowSelectionStatus) ? [].concat(acc, [key]) : acc;
           }, []));
         }
 
         if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
           var key = getRowKey(record);
-          keys = key !== undefined ? [].concat(keys, [key]) : [].concat(keys);
+          keys = key !== undefined && isRecordSelectable(record, checkRowSelectionStatus) ? [].concat(keys, [key]) : [].concat(keys);
         }
       });
       var uniqueKeys = Array.from(new Set(keys));
       var rows = getRowsForKeys(uniqueKeys);
       selection.onChange(uniqueKeys, rows);
     }
-  }, [dataSource, selection, isShowingSubset, getRowsForKeys, getRowKey, childrenColumnName]);
-  var unselectAll = React.useCallback(function () {
+  }, [childrenColumnName, dataSource, selection, isShowingSubset, getRowsForKeys, getRowKey]);
+  var unselectAll = useCallback(function () {
     if (selection) {
       if (isShowingSubset) {
         var selectedRowKeys = selection.selectedRowKeys;
@@ -104,14 +106,17 @@ function TableSelection(_ref) {
       }
     }
   }, [dataSource, getRowKey, getRowsForKeys, isShowingSubset, selection, childrenColumnName]);
-  var getSelectableChildren = React.useCallback(function (children) {
+  var getSelectableChildren = useCallback(function (children) {
+    var selectionStatusValidator = selection && 'checkRowSelectionStatus' in selection ? selection.checkRowSelectionStatus : undefined;
     return children ? children.filter(function (child) {
-      return getRowKey(child) !== undefined;
+      return isRecordSelectable(child, selectionStatusValidator) && getRowKey(child) !== undefined;
     }) : [];
-  }, [getRowKey]);
-  var selectInvert = React.useCallback(function () {
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [getRowKey, selection == null ? void 0 : selection.checkRowSelectionStatus]);
+  var selectInvert = useCallback(function () {
     if (dataSource && selection) {
-      var selectedRowKeys = selection.selectedRowKeys;
+      var selectedRowKeys = selection.selectedRowKeys,
+          checkRowSelectionStatus = selection.checkRowSelectionStatus;
       var keys = isShowingSubset ? [].concat(selectedRowKeys) : [];
       dataSource.forEach(function (record) {
         var rowChildren = record[childrenColumnName];
@@ -135,7 +140,7 @@ function TableSelection(_ref) {
 
           if (selectedRowKeys.includes(key)) {
             if (isShowingSubset) keys.splice(keys.indexOf(key), 1);
-          } else {
+          } else if (isRecordSelectable(record, checkRowSelectionStatus)) {
             keys = [].concat(keys, [key]);
           }
         }
@@ -143,23 +148,28 @@ function TableSelection(_ref) {
       var rows = getRowsForKeys(keys);
       selection.onChange(keys, rows);
     }
-  }, [dataSource, selection, isShowingSubset, getRowsForKeys, getSelectableChildren, getRowKey, childrenColumnName]);
-  var isEmpty = React.useMemo(function () {
+  }, [childrenColumnName, dataSource, selection, isShowingSubset, getRowsForKeys, getSelectableChildren, getRowKey]);
+  var isEmpty = useMemo(function () {
     return dataSource.length === 0;
   }, [dataSource]);
-  var allSelected = React.useMemo(function () {
-    if (isEmpty || !selection) return false;
-    var selectedRowKeys = selection.selectedRowKeys,
-        independentSelectionExpandedRows = selection.independentSelectionExpandedRows;
-    var allRecordsCount = dataSource.reduce(function (count, record) {
+  var allSelectableRecordsCount = useMemo(function () {
+    if (isEmpty || !selection) return 0;
+    var independentSelectionExpandedRows = selection.independentSelectionExpandedRows,
+        checkRowSelectionStatus = selection.checkRowSelectionStatus;
+    return dataSource.reduce(function (count, record) {
+      var isSelectable = +isRecordSelectable(record, checkRowSelectionStatus);
       var rowChildren = record[childrenColumnName];
 
       if (independentSelectionExpandedRows) {
-        return Array.isArray(rowChildren) ? count + getSelectableChildren(rowChildren).length + 1 : count + 1;
+        return Array.isArray(rowChildren) ? count + getSelectableChildren(rowChildren).length + isSelectable : count + isSelectable;
       }
 
-      return Array.isArray(rowChildren) ? count + getSelectableChildren(rowChildren).length : count + 1;
+      return Array.isArray(rowChildren) ? count + getSelectableChildren(rowChildren).length : count + isSelectable;
     }, 0);
+  }, [childrenColumnName, dataSource, getSelectableChildren, isEmpty, selection]);
+  var allSelected = useMemo(function () {
+    if (isEmpty || !selection) return false;
+    var selectedRowKeys = selection.selectedRowKeys;
     var selectedKeysInDataSourceCount = isShowingSubset ? dataSource.reduce(function (count, record) {
       var rowChildren = record[childrenColumnName];
 
@@ -177,17 +187,17 @@ function TableSelection(_ref) {
 
       return count;
     }, 0) : selectedRowKeys.length;
-    return allRecordsCount === selectedKeysInDataSourceCount;
-  }, [isEmpty, selection, dataSource, isShowingSubset, getSelectableChildren, getRowKey, childrenColumnName]);
+    return allSelectableRecordsCount === selectedKeysInDataSourceCount;
+  }, [isEmpty, selection, isShowingSubset, dataSource, allSelectableRecordsCount, childrenColumnName, getRowKey]);
   var selectionTooltipTitle = !allSelected ? locale == null ? void 0 : locale.selectAllTooltip : locale == null ? void 0 : locale.unselectAll;
   return selection != null && selection.selectedRowKeys ? /*#__PURE__*/React.createElement(S.Selection, {
     "data-popup-container": true
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: selectionTooltipTitle
   }, /*#__PURE__*/React.createElement(Button.Checkbox, {
-    disabled: isEmpty,
+    disabled: isEmpty || allSelectableRecordsCount === 0,
     "data-testid": "ds-table-batch-selection-button",
-    checked: allSelected,
+    checked: allSelected && allSelectableRecordsCount > 0,
     onChange: function onChange(isChecked) {
       if (isChecked) {
         selectAll();
@@ -197,7 +207,7 @@ function TableSelection(_ref) {
     },
     indeterminate: (selection == null ? void 0 : selection.selectedRowKeys.length) > 0 && !allSelected
   })), (selection == null ? void 0 : selection.selections) && /*#__PURE__*/React.createElement(Dropdown, {
-    disabled: isEmpty,
+    disabled: isEmpty || allSelectableRecordsCount === 0,
     trigger: ['click'],
     overlay: /*#__PURE__*/React.createElement(S.SelectionMenu, null, selection == null ? void 0 : selection.selections.filter(Boolean).map(function (selectionMenuElement) {
       switch (selectionMenuElement) {

package/dist/VirtualTable/VirtualTable.js

@@ -197,9 +197,7 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
   });
 
   var rowStarColumn = getRowStarColumn(propsForRowStar);
-  var selectedRecords = getSelectedRecords();
-
-  function getSelectedRecords() {
+  var selectedRecords = useMemo(function () {
     if (selection) {
       var _ref2 = selection,
           selectedRowKeys = _ref2.selectedRowKeys;
@@ -226,14 +224,14 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
     }
 
     return [];
-  }
-
+  }, [allData, childrenColumnName, getRowKey, selection]);
   var renderRowSelection = useCallback(function (key, record) {
     var _ref3 = selection,
         selectedRowKeys = _ref3.selectedRowKeys,
         limit = _ref3.limit,
         independentSelectionExpandedRows = _ref3.independentSelectionExpandedRows,
-        onChange = _ref3.onChange;
+        onChange = _ref3.onChange,
+        checkRowSelectionStatus = _ref3.checkRowSelectionStatus;
 
     var handleChange = function handleChange(keys, records) {
       if (isSticky && listScrollTopRef.current) {
@@ -252,6 +250,7 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
       onChange: handleChange,
       selectedRecords: selectedRecords,
       tableLocale: locale,
+      checkRowSelectionStatus: checkRowSelectionStatus,
       childrenColumnName: childrenColumnName
     });
   }, [isSticky, locale, rowKey, selectedRecords, selection, childrenColumnName]);
@@ -335,17 +334,19 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
 
     return infiniteLoaderItemHeight;
   }, [isSticky, infiniteScroll == null || (_infiniteScroll$prevP4 = infiniteScroll.prevPage) == null ? void 0 : _infiniteScroll$prevP4.hasMore]);
-  var listInnerElementType = forwardRef(function (_ref4, innerElementRef) {
-    var style = _ref4.style,
-        rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
-
-    return /*#__PURE__*/React.createElement(S.InnerListElement, _extends({
-      ref: innerElementRef,
-      style: _objectSpread({}, style, {
-        height: Number(style == null ? void 0 : style.height) + infiniteLoaderOffset + "px"
-      })
-    }, rest));
-  });
+  var listInnerElementType = useMemo(function () {
+    return forwardRef(function (_ref4, innerElementRef) {
+      var style = _ref4.style,
+          rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
+
+      return /*#__PURE__*/React.createElement(S.InnerListElement, _extends({
+        ref: innerElementRef,
+        style: _objectSpread({}, style, {
+          height: Number(style == null ? void 0 : style.height) + infiniteLoaderOffset + "px"
+        })
+      }, rest));
+    });
+  }, [infiniteLoaderOffset]);
   var scrollTo = useCallback(function (top) {
     if (!listRef.current) {
       return;

package/dist/utils/getRecordSelectionStatus.d.ts

@@ -0,0 +1,8 @@
+import { RowSelection } from '../Table.types';
+export declare const getRecordSelectionStatus: <T>(checkRowSelectionStatus: ((record: T) => {
+    disabled?: boolean | undefined;
+    unavailable?: boolean | undefined;
+}) | undefined, record: T) => {
+    unavailable: boolean | undefined;
+    disabled: boolean | undefined;
+};

package/dist/utils/getRecordSelectionStatus.js

@@ -0,0 +1,10 @@
+export var getRecordSelectionStatus = function getRecordSelectionStatus(checkRowSelectionStatus, record) {
+  var _ref = checkRowSelectionStatus && checkRowSelectionStatus(record) || {},
+      unavailable = _ref.unavailable,
+      disabled = _ref.disabled;
+
+  return {
+    unavailable: unavailable,
+    disabled: disabled
+  };
+};

package/dist/utils/index.d.ts

@@ -1,4 +1,8 @@
 export * from './getValueFromPath';
 export * from './locale';
+export * from './locale';
 export * from './calculatePixels';
+export * from './getRecordSelectionStatus';
 export * from './calculateColumnWidths';
+export * from './getChildrenColumnName';
+export * from './isRecordSelectable';

package/dist/utils/index.js

@@ -1,4 +1,8 @@
 export * from './getValueFromPath';
 export * from './locale';
+export * from './locale';
 export * from './calculatePixels';
-export * from './calculateColumnWidths';
+export * from './getRecordSelectionStatus';
+export * from './calculateColumnWidths';
+export * from './getChildrenColumnName';
+export * from './isRecordSelectable';

package/dist/utils/isRecordSelectable.d.ts

@@ -0,0 +1,5 @@
+import type { RowSelection } from '../Table.types';
+export declare const isRecordSelectable: <T>(record: T, checkRowSelectionStatus?: ((record: T) => {
+    disabled?: boolean | undefined;
+    unavailable?: boolean | undefined;
+}) | undefined) => boolean;

package/dist/utils/isRecordSelectable.js

@@ -0,0 +1,12 @@
+import { getRecordSelectionStatus } from './getRecordSelectionStatus';
+export var isRecordSelectable = function isRecordSelectable(record, checkRowSelectionStatus) {
+  if (!checkRowSelectionStatus) {
+    return true;
+  }
+
+  var _getRecordSelectionSt = getRecordSelectionStatus(checkRowSelectionStatus, record),
+      unavailable = _getRecordSelectionSt.unavailable,
+      disabled = _getRecordSelectionSt.disabled;
+
+  return !(unavailable || disabled);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table",
-  "version": "0.54.0",
+  "version": "0.55.0",
   "description": "Table UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -33,31 +33,31 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^0.8.17",
-    "@synerise/ds-badge": "^0.7.1",
-    "@synerise/ds-button": "^0.21.1",
-    "@synerise/ds-button-group": "^0.7.3",
-    "@synerise/ds-checkbox": "^0.12.1",
-    "@synerise/ds-column-manager": "^0.11.61",
-    "@synerise/ds-data-format": "^0.5.0",
-    "@synerise/ds-dropdown": "^0.18.3",
-    "@synerise/ds-flag": "^0.5.0",
-    "@synerise/ds-icon": "^0.63.0",
-    "@synerise/ds-input": "^0.23.0",
-    "@synerise/ds-loader": "^0.3.9",
-    "@synerise/ds-menu": "^0.19.3",
-    "@synerise/ds-modal": "^0.17.32",
-    "@synerise/ds-pagination": "^0.7.53",
-    "@synerise/ds-result": "^0.6.58",
-    "@synerise/ds-scrollbar": "^0.11.2",
-    "@synerise/ds-search": "^0.8.95",
-    "@synerise/ds-select": "^0.16.5",
-    "@synerise/ds-skeleton": "^0.6.1",
-    "@synerise/ds-status": "^0.6.11",
-    "@synerise/ds-tags": "^0.9.3",
-    "@synerise/ds-tooltip": "^0.14.31",
-    "@synerise/ds-typography": "^0.15.0",
-    "@synerise/ds-utils": "^0.27.0",
+    "@synerise/ds-alert": "^0.8.18",
+    "@synerise/ds-badge": "^0.8.0",
+    "@synerise/ds-button": "^0.21.2",
+    "@synerise/ds-button-group": "^0.7.4",
+    "@synerise/ds-checkbox": "^0.12.2",
+    "@synerise/ds-column-manager": "^0.11.62",
+    "@synerise/ds-data-format": "^0.5.1",
+    "@synerise/ds-dropdown": "^0.18.4",
+    "@synerise/ds-flag": "^0.5.1",
+    "@synerise/ds-icon": "^0.64.0",
+    "@synerise/ds-input": "^0.23.1",
+    "@synerise/ds-loader": "^0.3.10",
+    "@synerise/ds-menu": "^0.19.4",
+    "@synerise/ds-modal": "^0.17.33",
+    "@synerise/ds-pagination": "^0.7.54",
+    "@synerise/ds-result": "^0.6.59",
+    "@synerise/ds-scrollbar": "^0.11.3",
+    "@synerise/ds-search": "^0.9.0",
+    "@synerise/ds-select": "^0.16.6",
+    "@synerise/ds-skeleton": "^0.6.2",
+    "@synerise/ds-status": "^0.6.12",
+    "@synerise/ds-tags": "^0.9.4",
+    "@synerise/ds-tooltip": "^0.14.32",
+    "@synerise/ds-typography": "^0.15.1",
+    "@synerise/ds-utils": "^0.28.0",
     "@types/react-window": "^1.8.5",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -73,11 +73,9 @@
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "antd": "4.7.0",
-    "react": ">=16.9.0 < 17.0.0",
+    "react": ">=16.9.0 <= 17.0.2",
+    "react-dom": "^16.14.0",
     "styled-components": "5.0.1"
   },
-  "devDependencies": {
-    "@testing-library/react": "10.0.1"
-  },
-  "gitHead": "0692552b018dc9c8042f18c773f88890c9ad3270"
+  "gitHead": "6e5e5202d6c6f1c2caf6bfef799009813b437b3d"
 }