@synerise/ds-table 0.53.2 → 0.55.0

package/dist/TableHeader/TableHeader.js

@@ -27,7 +27,8 @@ var TableHeader = function TableHeader(_ref) {
       headerButton = _ref.headerButton,
       locale = _ref.locale,
       renderSelectionTitle = _ref.renderSelectionTitle,
-      hideTitlePart = _ref.hideTitlePart;
+      hideTitlePart = _ref.hideTitlePart,
+      childrenColumnName = _ref.childrenColumnName;
 
   var _useDataFormat = useDataFormat(),
       formatValue = _useDataFormat.formatValue;
@@ -59,7 +60,8 @@ var TableHeader = function TableHeader(_ref) {
       dataSource: dataSource,
       dataSourceFull: dataSourceFull,
       selection: selection,
-      locale: locale
+      locale: locale,
+      childrenColumnName: childrenColumnName
     }), renderSelectionTitle ? renderSelectionTitle(selection, filters) : /*#__PURE__*/React.createElement(S.TitleContainer, null, /*#__PURE__*/React.createElement(S.TitlePart, null, /*#__PURE__*/React.createElement("strong", null, formatValue(selectedRows)), " ", /*#__PURE__*/React.createElement("span", null, locale.selected))), itemsMenu) : /*#__PURE__*/React.createElement(S.Left, {
       "data-testid": "ds-table-title"
     }, selection && /*#__PURE__*/React.createElement(TableSelection, {
@@ -67,7 +69,8 @@ var TableHeader = function TableHeader(_ref) {
       dataSource: dataSource,
       dataSourceFull: dataSourceFull,
       selection: selection,
-      locale: locale
+      locale: locale,
+      childrenColumnName: childrenColumnName
     }), /*#__PURE__*/React.createElement(S.TitleContainer, null, title && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.TitlePartEllipsis, null, isTitleTruncated ? /*#__PURE__*/React.createElement(Tooltip, {
       type: "largeSimple",
       description: title,
@@ -78,7 +81,7 @@ var TableHeader = function TableHeader(_ref) {
     }, title)) : /*#__PURE__*/React.createElement("strong", {
       ref: titleRef
     }, title)), !hideTitlePart && /*#__PURE__*/React.createElement(S.TitleSeparator, null)), !hideTitlePart && /*#__PURE__*/React.createElement(S.TitlePart, null, /*#__PURE__*/React.createElement("strong", null, formatValue(dataSourceTotalCount)), " ", /*#__PURE__*/React.createElement("span", null, locale.pagination.items))));
-  }, [selection, dataSource, itemsMenu, locale, selectedRows, rowKey, dataSourceFull, renderSelectionTitle, filters, formatValue, title, isTitleTruncated, hideTitlePart, dataSourceTotalCount]);
+  }, [selection, dataSource, itemsMenu, locale, selectedRows, rowKey, dataSourceFull, renderSelectionTitle, filters, formatValue, title, isTitleTruncated, hideTitlePart, dataSourceTotalCount, childrenColumnName]);
   return /*#__PURE__*/React.createElement(S.Header, {
     withBorderTop: withBorderTop
   }, renderLeftSide, /*#__PURE__*/React.createElement(S.Right, null, headerButton, filters == null ? void 0 : filters.map(function (filter) {

package/dist/TableHeader/TableHeader.types.d.ts

@@ -19,4 +19,5 @@ export type Props<T extends {
     renderSelectionTitle?: (selection?: RowSelection<T>, filters?: Filter[]) => ReactNode;
     hideTitlePart?: boolean;
     dataSourceTotalCount?: number;
+    childrenColumnName: string;
 };

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, }: 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,35 +6,39 @@ 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,
       dataSourceFull = _ref.dataSourceFull,
       selection = _ref.selection,
       rowKey = _ref.rowKey,
-      locale = _ref.locale;
+      locale = _ref.locale,
+      childrenColumnName = _ref.childrenColumnName;
 
   var _useRowKey = useRowKey(rowKey),
       getRowKey = _useRowKey.getRowKey;
 
   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) {
-        if (Array.isArray(record.children)) {
-          record.children.forEach(function (child) {
+        var rowChildren = record[childrenColumnName];
+
+        if (Array.isArray(rowChildren)) {
+          rowChildren.forEach(function (child) {
             var key = getRowKey(child);
 
-            if (record.children && key && keys.includes(key)) {
+            if (rowChildren && key && keys.includes(key)) {
               rows = [].concat(rows, [record]);
             }
           });
         }
 
-        if (!Array.isArray(record.children) || selection.independentSelectionExpandedRows) {
+        if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
           var key = getRowKey(record);
 
           if (key && keys.includes(key)) {
@@ -46,43 +50,48 @@ function TableSelection(_ref) {
     }
 
     return [];
-  }, [allData, getRowKey, selection]);
-  var selectAll = React.useCallback(function () {
+  }, [allData, getRowKey, selection, childrenColumnName]);
+  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) {
-        if (Array.isArray(record.children)) {
-          keys = [].concat(keys, record.children.reduce(function (acc, child) {
+        var rowChildren = record[childrenColumnName];
+
+        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(record.children) || selection.independentSelectionExpandedRows) {
+        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]);
-  var unselectAll = React.useCallback(function () {
+  }, [childrenColumnName, dataSource, selection, isShowingSubset, getRowsForKeys, getRowKey]);
+  var unselectAll = useCallback(function () {
     if (selection) {
       if (isShowingSubset) {
         var selectedRowKeys = selection.selectedRowKeys;
         var keysToUnselect = [];
         dataSource.forEach(function (record) {
-          if (Array.isArray(record.children)) {
-            keysToUnselect = [].concat(keysToUnselect, record.children.reduce(function (acc, child) {
+          var rowChildren = record[childrenColumnName];
+
+          if (Array.isArray(rowChildren)) {
+            keysToUnselect = [].concat(keysToUnselect, rowChildren.reduce(function (acc, child) {
               var key = getRowKey(child);
               return key ? [].concat(acc, [key]) : acc;
             }, []));
           }
 
-          if (!Array.isArray(record.children) || selection.independentSelectionExpandedRows) {
+          if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
             var key = getRowKey(record);
             keysToUnselect = key !== undefined ? [].concat(keysToUnselect, [key]) : [].concat(keysToUnselect);
           }
@@ -96,19 +105,23 @@ function TableSelection(_ref) {
         selection.onChange([], []);
       }
     }
-  }, [dataSource, getRowKey, getRowsForKeys, isShowingSubset, selection]);
-  var getSelectableChildren = React.useCallback(function (children) {
+  }, [dataSource, getRowKey, getRowsForKeys, isShowingSubset, selection, childrenColumnName]);
+  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 hasChildren = Array.isArray(record.children);
-        var selectableChildren = hasChildren ? getSelectableChildren(record.children) : false;
+        var rowChildren = record[childrenColumnName];
+        var hasChildren = Array.isArray(rowChildren);
+        var selectableChildren = hasChildren ? getSelectableChildren(rowChildren) : false;
 
         if (selectableChildren) {
           selectableChildren.forEach(function (child) {
@@ -127,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]);
           }
         }
@@ -135,47 +148,56 @@ function TableSelection(_ref) {
       var rows = getRowsForKeys(keys);
       selection.onChange(keys, rows);
     }
-  }, [dataSource, selection, isShowingSubset, getRowsForKeys, getSelectableChildren, getRowKey]);
-  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(record.children) ? count + getSelectableChildren(record.children).length + 1 : count + 1;
+        return Array.isArray(rowChildren) ? count + getSelectableChildren(rowChildren).length + isSelectable : count + isSelectable;
       }
 
-      return Array.isArray(record.children) ? count + getSelectableChildren(record.children).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) {
-      if (Array.isArray(record.children)) {
-        return record.children.reduce(function (childCount, child) {
+      var rowChildren = record[childrenColumnName];
+
+      if (Array.isArray(rowChildren)) {
+        return rowChildren.reduce(function (childCount, child) {
           var key = getRowKey(child);
           return selectedRowKeys.includes(key) ? childCount + 1 : childCount;
         }, 0);
       }
 
-      if (!Array.isArray(record.children) || selection.independentSelectionExpandedRows) {
+      if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
         var key = getRowKey(record);
         return selectedRowKeys.includes(key) ? count + 1 : count;
       }
 
       return count;
     }, 0) : selectedRowKeys.length;
-    return allRecordsCount === selectedKeysInDataSourceCount;
-  }, [isEmpty, selection, dataSource, isShowingSubset, getSelectableChildren, getRowKey]);
+    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();
@@ -185,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/TableHeader/TableSelection.types.d.ts

@@ -8,4 +8,5 @@ export interface Props<T extends {
     dataSourceFull?: T[];
     locale?: Locale;
     rowKey?: Function | string;
+    childrenColumnName: string;
 }

package/dist/VirtualTable/VirtualTable.js

@@ -26,6 +26,7 @@ import { useRowKey } from '../hooks/useRowKey';
 import { useRowStar } from '../hooks/useRowStar';
 import { RowSelectionColumn } from '../RowSelection';
 import { EXPANDED_ROW_PROPERTY, HEADER_ROW_HEIGHT, LOAD_DATA_OFFSET } from './constants';
+import { getChildrenColumnName } from '../utils/getChildrenColumnName';
 var relativeInlineStyle = {
   position: 'relative'
 };
@@ -74,6 +75,7 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
       firstItem = _useState2[0],
       setFirstItem = _useState2[1];
 
+  var childrenColumnName = getChildrenColumnName(expandable == null ? void 0 : expandable.childrenColumnName);
   var hasInfiniteScroll = Boolean(infiniteScroll);
   var isSticky = Boolean(sticky);
   var stickyScrollThreshold = sticky && sticky.scrollThreshold;
@@ -195,22 +197,21 @@ 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;
       var selectedRows = [];
       allData.forEach(function (row) {
         var key = getRowKey(row);
+        var rowChildren = row[childrenColumnName];
 
         if (key && selectedRowKeys.indexOf(key) >= 0) {
           selectedRows = [].concat(selectedRows, [row]);
         }
 
-        if (row.children !== undefined && Array.isArray(row.children)) {
-          row.children.forEach(function (child) {
+        if (rowChildren !== undefined && Array.isArray(rowChildren)) {
+          rowChildren.forEach(function (child) {
             var childKey = getRowKey(child);
 
             if (childKey && selectedRowKeys.indexOf(childKey) >= 0) {
@@ -223,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) {
@@ -248,9 +249,11 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
       independentSelectionExpandedRows: independentSelectionExpandedRows,
       onChange: handleChange,
       selectedRecords: selectedRecords,
-      tableLocale: locale
+      tableLocale: locale,
+      checkRowSelectionStatus: checkRowSelectionStatus,
+      childrenColumnName: childrenColumnName
     });
-  }, [isSticky, locale, rowKey, selectedRecords, selection]);
+  }, [isSticky, locale, rowKey, selectedRecords, selection, childrenColumnName]);
   var virtualColumns = useMemo(function () {
     return compact([!!selection && {
       width: 64,
@@ -331,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;
@@ -349,9 +354,11 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
 
     listRef.current.scrollTo(top);
   }, []);
-  var scrollToTop = useCallback(function () {
+
+  var scrollToTop = function scrollToTop() {
     scrollTo(0);
-  }, [scrollTo]);
+  };
+
   var outerElement = useMemo(function () {
     return OuterListElement(containerRef, isSticky);
   }, [isSticky]);
@@ -417,16 +424,19 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
       var _infiniteScroll$nextP, _infiniteScroll$prevP5;
 
       var listHeight = data.length * cellHeight - scroll.y + infiniteLoaderOffset;
-      var listMaxScroll = stickyScrollThreshold && infiniteScroll != null && infiniteScroll.maxScroll ? (infiniteScroll == null ? void 0 : infiniteScroll.maxScroll) - stickyScrollThreshold : listHeight;
+      var listMaxScroll = stickyScrollThreshold && infiniteScroll != null && infiniteScroll.maxScroll ? infiniteScroll.maxScroll - stickyScrollThreshold : listHeight;
 
       var handleListScroll = function handleListScroll(_ref5) {
         var scrollOffset = _ref5.scrollOffset,
             scrollDirection = _ref5.scrollDirection;
 
-        if (loading || listMaxScroll <= 0) {
+        if (!infiniteScroll || loading || listMaxScroll <= 0) {
           return;
         }
 
+        var onScrollTopReach = infiniteScroll.onScrollTopReach,
+            isLoading = infiniteScroll.isLoading,
+            onScrollEndReach = infiniteScroll.onScrollEndReach;
         var roundedOffset = Math.ceil(scrollOffset);
         listScrollTopRef.current = roundedOffset;
 
@@ -438,12 +448,14 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
           setIsHeaderVisible(roundedOffset > 0);
         }
 
-        if (scrollDirection === 'forward' && roundedOffset >= listMaxScroll - LOAD_DATA_OFFSET && typeof (infiniteScroll == null ? void 0 : infiniteScroll.onScrollEndReach) === 'function') {
-          infiniteScroll.onScrollEndReach();
+        if (isLoading) {
+          return;
         }
 
-        if (scrollDirection === 'backward' && (offsetScroll && roundedOffset <= offsetScroll + LOAD_DATA_OFFSET || roundedOffset < LOAD_DATA_OFFSET) && typeof (infiniteScroll == null ? void 0 : infiniteScroll.onScrollTopReach) === 'function') {
-          infiniteScroll.onScrollTopReach();
+        if (scrollDirection === 'forward' && roundedOffset >= listMaxScroll - LOAD_DATA_OFFSET && typeof onScrollEndReach === 'function') {
+          onScrollEndReach();
+        } else if (scrollDirection === 'backward' && (offsetScroll && roundedOffset <= offsetScroll + LOAD_DATA_OFFSET || roundedOffset < LOAD_DATA_OFFSET) && typeof onScrollTopReach === 'function') {
+          onScrollTopReach();
         }
       };
 
@@ -509,9 +521,10 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
         var _expandable$expandedR2;
 
         var key = getRowKey(currentRow);
+        var rowChildren = currentRow[childrenColumnName];
 
-        if (key !== undefined && expandable != null && (_expandable$expandedR2 = expandable.expandedRowKeys) != null && _expandable$expandedR2.includes(key) && Array.isArray(currentRow.children) && currentRow.children.length) {
-          return [].concat(result, [currentRow], currentRow.children.map(function (child, index) {
+        if (key !== undefined && expandable != null && (_expandable$expandedR2 = expandable.expandedRowKeys) != null && _expandable$expandedR2.includes(key) && Array.isArray(rowChildren) && rowChildren.length) {
+          return [].concat(result, [currentRow], rowChildren.map(function (child, index) {
             var _objectSpread2;
 
             return _objectSpread({}, child, (_objectSpread2 = {}, _objectSpread2[EXPANDED_ROW_PROPERTY] = true, _objectSpread2.index = index, _objectSpread2));
@@ -524,7 +537,7 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
     }
 
     return renderVirtualList(rawData);
-  }, [connectObject, expandable == null ? void 0 : expandable.expandedRowKeys, cellHeight, scroll.y, isSticky, stickyScrollThreshold, infiniteScroll, createItemData, tableWidth, scrollWidth, onItemsRendered, outerElement, listInnerElementType, loading, offsetScroll, getRowKey, infiniteLoaderOffset]);
+  }, [connectObject, expandable == null ? void 0 : expandable.expandedRowKeys, cellHeight, scroll.y, isSticky, stickyScrollThreshold, infiniteScroll, createItemData, tableWidth, scrollWidth, onItemsRendered, outerElement, listInnerElementType, loading, offsetScroll, getRowKey, infiniteLoaderOffset, childrenColumnName]);
   var columnsSliceStartIndex = Number(!!selection) + Number(!!rowStar);
   var scrollValue = !dataSource || (dataSource == null ? void 0 : dataSource.length) === 0 ? undefined : scroll;
   var classNames = React.useMemo(function () {

package/dist/utils/getChildrenColumnName.d.ts

@@ -0,0 +1 @@
+export declare const getChildrenColumnName: (childrenColumnName?: string) => string;

package/dist/utils/getChildrenColumnName.js

@@ -0,0 +1,4 @@
+var DEFAULT_CHILDREN_COLUMN_NAME = 'children';
+export var getChildrenColumnName = function getChildrenColumnName(childrenColumnName) {
+  return childrenColumnName || DEFAULT_CHILDREN_COLUMN_NAME;
+};

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.53.2",
+  "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.16",
-    "@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.60",
-    "@synerise/ds-data-format": "^0.5.0",
-    "@synerise/ds-dropdown": "^0.18.2",
-    "@synerise/ds-flag": "^0.5.0",
-    "@synerise/ds-icon": "^0.63.0",
-    "@synerise/ds-input": "^0.22.1",
-    "@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.4",
-    "@synerise/ds-skeleton": "^0.6.1",
-    "@synerise/ds-status": "^0.6.10",
-    "@synerise/ds-tags": "^0.9.2",
-    "@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": "587eb113074985ae21e4f0c25ec33c3e3e2e072b"
+  "gitHead": "6e5e5202d6c6f1c2caf6bfef799009813b437b3d"
 }