@synerise/ds-table 0.53.1 → 0.54.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Bug Fixes
+
+* **table:** infinite loader - trigger loading without scrolling ([4559290](https://github.com/synerise/synerise-design/commit/455929012ab463980f0dd5de7230636a0ee058b6))
+
+
+### Features
+
+* **table:** add custom name for children column ([e5b2089](https://github.com/synerise/synerise-design/commit/e5b2089e011a28eccfdc56843c268fc861677a07))
+
+
+
+
+
+## [0.53.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.53.1...@synerise/ds-table@0.53.2) (2024-06-27)
+
+
+### Bug Fixes
+
+* **button-group:** remove margin from button-group ([cfb42ac](https://github.com/synerise/synerise-design/commit/cfb42ac433aa99ef7ac4c133a74f7ed0e913b901))
+
+
+
+
+
 ## [0.53.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.53.0...@synerise/ds-table@0.53.1) (2024-06-21)
 
 **Note:** Version bump only for package @synerise/ds-table

package/dist/DefaultTable/DefaultTable.js

@@ -20,7 +20,8 @@ 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'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { RowSelectionColumn } from '../RowSelection';
+import { getChildrenColumnName } from '../utils/getChildrenColumnName'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 function DefaultTable(props) {
   var _selection$selections;
@@ -41,6 +42,8 @@ function DefaultTable(props) {
   var _useRowStar = useRowStar((rowStar == null ? void 0 : rowStar.starredRowKeys) || []),
       getRowStarColumn = _useRowStar.getRowStarColumn;
 
+  var childrenColumnName = getChildrenColumnName(expandable == null ? void 0 : expandable.childrenColumnName);
+
   var _useRowKey = useRowKey(rowKey),
       getRowKey = _useRowKey.getRowKey;
 
@@ -111,8 +114,10 @@ function DefaultTable(props) {
           selectedRows = [].concat(selectedRows, [row]);
         }
 
-        if (row.children !== undefined && Array.isArray(row.children)) {
-          row.children.forEach(function (child) {
+        var rowChildren = row[childrenColumnName];
+
+        if (rowChildren !== undefined && Array.isArray(rowChildren)) {
+          rowChildren.forEach(function (child) {
             var childKey = getRowKey(child);
 
             if (childKey && selectedRowKeys.indexOf(childKey) >= 0) {
@@ -125,7 +130,7 @@ function DefaultTable(props) {
     }
 
     return [];
-  }, [dataSource, getRowKey, selection]);
+  }, [dataSource, getRowKey, selection, childrenColumnName]);
   var renderRowSelection = React.useCallback(function (key, record) {
     var _ref5 = selection,
         selectedRowKeys = _ref5.selectedRowKeys,
@@ -140,9 +145,10 @@ function DefaultTable(props) {
       independentSelectionExpandedRows: independentSelectionExpandedRows,
       onChange: onChange,
       selectedRecords: selectedRecords,
-      tableLocale: locale
+      tableLocale: locale,
+      childrenColumnName: childrenColumnName
     });
-  }, [locale, rowKey, selectedRecords, selection]);
+  }, [locale, rowKey, selectedRecords, selection, childrenColumnName]);
   return (
     /*#__PURE__*/
     // @ts-ignore

package/dist/FilterTrigger/FilterTrigger.styles.js

@@ -5,7 +5,7 @@ import { IconContainer } from '@synerise/ds-icon';
 export var FilterButtonGroup = styled(ButtonGroup).withConfig({
   displayName: "FilterTriggerstyles__FilterButtonGroup",
   componentId: "sc-1h4wcrp-0"
-})([".ant-btn-group{width:auto;margin:0;}"]);
+})([".ant-btn-group{width:auto;}"]);
 export var FilterButtonLabel = styled.span.withConfig({
   displayName: "FilterTriggerstyles__FilterButtonLabel",
   componentId: "sc-1h4wcrp-1"

package/dist/InfiniteScroll/ErrorItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type ErrorItemProps = {
+    onRetryClick?: () => void;
+};
+export declare const ErrorItem: ({ onRetryClick }: ErrorItemProps) => React.JSX.Element;
+export {};

package/dist/InfiniteScroll/ErrorItem.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Alert from '@synerise/ds-alert';
+import Button from '@synerise/ds-button';
+import Icon, { RefreshM } from '@synerise/ds-icon';
+import { TableLocaleContext } from '../utils/locale';
+export var ErrorItem = function ErrorItem(_ref) {
+  var onRetryClick = _ref.onRetryClick;
+  return /*#__PURE__*/React.createElement(TableLocaleContext.Consumer, null, function (tableLocale) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, /*#__PURE__*/React.createElement(Alert.InlineAlert, {
+      type: "alert",
+      message: tableLocale.infiniteScrollError
+    }), onRetryClick && /*#__PURE__*/React.createElement(Button, {
+      onClick: onRetryClick,
+      type: "ghost",
+      mode: "icon-label",
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        component: /*#__PURE__*/React.createElement(RefreshM, null)
+      }),
+      style: {
+        marginLeft: 8
+      }
+    }, tableLocale.infiniteScrollRetry));
+  });
+};

package/dist/InfiniteScroll/InfiniteLoaderItem.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { LoaderItemProps } from './InfiniteLoaderItem.types';
-declare const InfiniteLoaderItem: ({ infiniteScroll, position }: LoaderItemProps) => React.ReactElement;
+declare const InfiniteLoaderItem: ({ infiniteScroll, position }: LoaderItemProps) => React.JSX.Element;
 export default InfiniteLoaderItem;

package/dist/InfiniteScroll/InfiniteLoaderItem.js

@@ -1,67 +1,35 @@
-import * as React from 'react';
-import Alert from '@synerise/ds-alert';
-import Button from '@synerise/ds-button';
-import Icon, { RefreshM } from '@synerise/ds-icon';
-import { TableLocaleContext } from '../utils/locale';
-import { Loader } from './InfiniteLoaderItem.styles';
+import React, { useEffect } from 'react';
 import { infiniteScrollPropsToState } from './utils';
+import { ErrorItem } from './ErrorItem';
+import { LoadingItem } from './LoadingItem';
+import { NoMoreItem } from './NoMoreItem';
 
-var LoadingItem = function LoadingItem() {
-  return /*#__PURE__*/React.createElement(TableLocaleContext.Consumer, null, function (tableLocale) {
-    return /*#__PURE__*/React.createElement(Loader, {
-      size: "M",
-      label: tableLocale.infiniteScrollLoading
-    });
-  });
-};
-
-var NoMoreItem = function NoMoreItem() {
-  return /*#__PURE__*/React.createElement(TableLocaleContext.Consumer, null, function (tableLocale) {
-    return /*#__PURE__*/React.createElement(Alert.InlineAlert, {
-      // @ts-ignore
-      type: "info",
-      message: tableLocale.infiniteScrollNoMoreData
-    });
-  });
-};
-
-var ErrorItem = function ErrorItem(_ref) {
-  var onRetryClick = _ref.onRetryClick;
-  return /*#__PURE__*/React.createElement(TableLocaleContext.Consumer, null, function (tableLocale) {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex'
-      }
-    }, /*#__PURE__*/React.createElement(Alert.InlineAlert, {
-      // @ts-ignore
-      type: "alert",
-      message: tableLocale.infiniteScrollError
-    }), onRetryClick && /*#__PURE__*/React.createElement(Button, {
-      onClick: onRetryClick,
-      type: "ghost",
-      mode: "icon-label",
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(RefreshM, null)
-      }),
-      style: {
-        marginLeft: 8
-      }
-    }, tableLocale.infiniteScrollRetry));
-  });
-};
-
-var InfiniteLoaderItem = function InfiniteLoaderItem(_ref2) {
-  var infiniteScroll = _ref2.infiniteScroll,
-      position = _ref2.position;
+var InfiniteLoaderItem = function InfiniteLoaderItem(_ref) {
+  var infiniteScroll = _ref.infiniteScroll,
+      position = _ref.position;
   var hasMore = infiniteScroll.hasMore,
       isLoading = infiniteScroll.isLoading,
+      onScrollEndReach = infiniteScroll.onScrollEndReach,
       hasError = infiniteScroll.hasError,
       onRetryButtonClick = infiniteScroll.onRetryButtonClick,
       render = infiniteScroll.render;
 
   var handleRetryClick = function handleRetryClick() {
     onRetryButtonClick && onRetryButtonClick(position);
-  };
+  }; // @ts-expect-error TS7030: Not all code paths return a value
+  // eslint-disable-next-line consistent-return
+
+
+  useEffect(function () {
+    if (!isLoading && hasMore) {
+      if ((!position || position === 'BOTTOM') && typeof onScrollEndReach === 'function') {
+        var timeout = setTimeout(onScrollEndReach, 0);
+        return function () {
+          clearTimeout(timeout);
+        };
+      }
+    }
+  }, [hasMore, isLoading, onScrollEndReach, position]);
 
   if (typeof render === 'function') {
     return render(infiniteScrollPropsToState(infiniteScroll));

package/dist/InfiniteScroll/LoadingItem.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LoadingItem: () => React.JSX.Element;

package/dist/InfiniteScroll/LoadingItem.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TableLocaleContext } from '../utils/locale';
+import { Loader } from './InfiniteLoaderItem.styles';
+export var LoadingItem = function LoadingItem() {
+  return /*#__PURE__*/React.createElement(TableLocaleContext.Consumer, null, function (tableLocale) {
+    return /*#__PURE__*/React.createElement(Loader, {
+      size: "M",
+      label: tableLocale.infiniteScrollLoading
+    });
+  });
+};

package/dist/InfiniteScroll/NoMoreItem.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NoMoreItem: () => React.JSX.Element;

package/dist/InfiniteScroll/NoMoreItem.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Alert from '@synerise/ds-alert';
+import { TableLocaleContext } from '../utils/locale';
+export var NoMoreItem = function NoMoreItem() {
+  return /*#__PURE__*/React.createElement(TableLocaleContext.Consumer, null, function (tableLocale) {
+    return /*#__PURE__*/React.createElement(Alert.InlineAlert, {
+      type: "info",
+      message: tableLocale.infiniteScrollNoMoreData
+    });
+  });
+};

package/dist/RowSelection/RowSelectionColumn.d.ts

@@ -1,4 +1,4 @@
 import * as 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, }: RowSelectionProps<T>): React.ReactElement | null;
+export declare function RowSelectionColumn<T extends object & RowType<T>>({ rowKey, record, limit, independentSelectionExpandedRows, selectedRowKeys, selectedRecords, tableLocale, onChange, childrenColumnName, }: RowSelectionProps<T>): React.ReactElement | null;

package/dist/RowSelection/RowSelectionColumn.js

@@ -11,55 +11,52 @@ export function RowSelectionColumn(_ref) {
       selectedRowKeys = _ref.selectedRowKeys,
       selectedRecords = _ref.selectedRecords,
       tableLocale = _ref.tableLocale,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      childrenColumnName = _ref.childrenColumnName;
 
   var _useRowKey = useRowKey(rowKey),
       getRowKey = _useRowKey.getRowKey;
 
   var recordKey = getRowKey(record);
+  var rowChildren = record[childrenColumnName];
   var checkedChildren = React.useMemo(function () {
-    var _record$children;
-
-    return ((_record$children = record.children) == null ? void 0 : _record$children.filter(function (child) {
+    return (rowChildren == null ? void 0 : rowChildren.filter(function (child) {
       var childKey = getRowKey(child);
       return childKey && selectedRowKeys.indexOf(childKey) >= 0;
     })) || [];
-  }, [getRowKey, record.children, selectedRowKeys]);
+  }, [getRowKey, rowChildren, selectedRowKeys]);
   var allChildrenSelected = React.useMemo(function () {
-    var _record$children2;
-
-    return !!((_record$children2 = record.children) != null && _record$children2.every(function (child) {
+    return !!(rowChildren != null && rowChildren.every(function (child) {
       var childKey = getRowKey(child);
       return childKey && selectedRowKeys.indexOf(childKey) >= 0;
     }));
-  }, [getRowKey, record.children, selectedRowKeys]);
+  }, [getRowKey, rowChildren, selectedRowKeys]);
   var isIndeterminate = React.useMemo(function () {
-    if (Array.isArray(record.children) && !independentSelectionExpandedRows) {
-      var _record$children3;
-
-      return checkedChildren.length > 0 && checkedChildren.length < (((_record$children3 = record.children) == null ? void 0 : _record$children3.length) || 0);
+    if (Array.isArray(rowChildren) && !independentSelectionExpandedRows) {
+      return checkedChildren.length > 0 && checkedChildren.length < ((rowChildren == null ? void 0 : rowChildren.length) || 0);
     }
 
     return false;
-  }, [checkedChildren.length, independentSelectionExpandedRows, record.children]);
+  }, [checkedChildren.length, independentSelectionExpandedRows, rowChildren]);
   var isChecked = React.useMemo(function () {
-    if (Array.isArray(record.children) && !independentSelectionExpandedRows) {
+    if (Array.isArray(rowChildren) && !independentSelectionExpandedRows) {
       return isChecked || allChildrenSelected;
     }
 
     return recordKey !== undefined && selectedRowKeys && selectedRowKeys.indexOf(recordKey) >= 0;
-  }, [allChildrenSelected, independentSelectionExpandedRows, record.children, recordKey, selectedRowKeys]);
+  }, [allChildrenSelected, independentSelectionExpandedRows, rowChildren, recordKey, selectedRowKeys]);
   var handleSelectionChange = React.useCallback(function (isCheckedNext, changedRecord) {
     var selectedRows = selectedRecords;
+    var changedRecordChildren = changedRecord[childrenColumnName];
 
     if (isCheckedNext) {
-      if (Array.isArray(changedRecord.children) && !independentSelectionExpandedRows) {
-        selectedRows = [].concat(selectedRows, changedRecord.children);
+      if (Array.isArray(changedRecordChildren) && !independentSelectionExpandedRows) {
+        selectedRows = [].concat(selectedRows, changedRecordChildren);
       } else {
         selectedRows = [].concat(selectedRows, [changedRecord]);
       }
-    } else if (Array.isArray(changedRecord.children) && !independentSelectionExpandedRows) {
-      var childrenKeys = changedRecord.children.map(function (child) {
+    } else if (Array.isArray(changedRecordChildren) && !independentSelectionExpandedRows) {
+      var childrenKeys = changedRecordChildren.map(function (child) {
         return getRowKey(child);
       });
       selectedRows = selectedRows.filter(function (child) {
@@ -81,7 +78,7 @@ export function RowSelectionColumn(_ref) {
 
       return acc;
     }, []), selectedRows);
-  }, [getRowKey, independentSelectionExpandedRows, onChange, recordKey, selectedRecords]);
+  }, [getRowKey, independentSelectionExpandedRows, onChange, recordKey, selectedRecords, childrenColumnName]);
   return recordKey !== undefined ? /*#__PURE__*/React.createElement(Tooltip, {
     title: tableLocale == null ? void 0 : tableLocale.selectRowTooltip,
     mouseLeaveDelay: 0

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

@@ -10,4 +10,5 @@ export type RowSelectionProps<T> = {
     record: T;
     tableLocale: DSTableProps<T>['locale'];
     onChange: (selectedRowKeys: React.ReactText[], selectedRecords: T[]) => void;
+    childrenColumnName: string;
 };

package/dist/Table.js

@@ -19,6 +19,7 @@ import TableHeader from './TableHeader/TableHeader';
 import DefaultTable from './DefaultTable/DefaultTable';
 import GroupTable from './GroupTable/GroupTable';
 import { useTableLocale, TableLocaleContext } from './utils/locale';
+import { getChildrenColumnName } from './utils/getChildrenColumnName';
 export var SELECTION_ALL = 'SELECTION_ALL';
 export var SELECTION_INVERT = 'SELECTION_INVERT';
 var ITEM_RENDER_TYPE = {
@@ -50,7 +51,8 @@ function DSTable(props) {
       hideColumnNames = props.hideColumnNames,
       renderSelectionTitle = props.renderSelectionTitle,
       hideTitlePart = props.hideTitlePart,
-      disableColumnNamesLineBreak = props.disableColumnNamesLineBreak;
+      disableColumnNamesLineBreak = props.disableColumnNamesLineBreak,
+      expandable = props.expandable;
   var tableLocale = useTableLocale(intl, locale);
 
   var _useDataFormat = useDataFormat(),
@@ -83,9 +85,10 @@ function DSTable(props) {
       rowKey: rowKey,
       locale: tableLocale,
       renderSelectionTitle: renderSelectionTitle,
-      hideTitlePart: hideTitlePart
+      hideTitlePart: hideTitlePart,
+      childrenColumnName: getChildrenColumnName(expandable == null ? void 0 : expandable.childrenColumnName)
     });
-  }, [selection, grouped, dataSource, dataSourceTotalCount, hideTitleBar, headerWithBorderTop, title, filters, itemsMenu, dataSourceFull, searchComponent, filterComponent, headerButton, rowKey, tableLocale, renderSelectionTitle, hideTitlePart]);
+  }, [selection, grouped, dataSource, dataSourceTotalCount, hideTitleBar, headerWithBorderTop, title, filters, itemsMenu, dataSourceFull, searchComponent, filterComponent, headerButton, rowKey, tableLocale, renderSelectionTitle, hideTitlePart, expandable == null ? void 0 : expandable.childrenColumnName]);
   var footerPagination = React.useMemo(function () {
     return _objectSpread({
       showTotal: function showTotal(total, range) {

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

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

package/dist/TableHeader/TableSelection.js

@@ -13,7 +13,8 @@ function TableSelection(_ref) {
       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;
@@ -24,17 +25,19 @@ function TableSelection(_ref) {
     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,20 +49,22 @@ function TableSelection(_ref) {
     }
 
     return [];
-  }, [allData, getRowKey, selection]);
+  }, [allData, getRowKey, selection, childrenColumnName]);
   var selectAll = React.useCallback(function () {
     if (dataSource && selection) {
       var selectedRowKeys = selection.selectedRowKeys;
       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;
           }, []));
         }
 
-        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);
         }
@@ -68,21 +73,23 @@ function TableSelection(_ref) {
       var rows = getRowsForKeys(uniqueKeys);
       selection.onChange(uniqueKeys, rows);
     }
-  }, [dataSource, selection, isShowingSubset, getRowsForKeys, getRowKey]);
+  }, [dataSource, selection, isShowingSubset, getRowsForKeys, getRowKey, childrenColumnName]);
   var unselectAll = React.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,7 +103,7 @@ function TableSelection(_ref) {
         selection.onChange([], []);
       }
     }
-  }, [dataSource, getRowKey, getRowsForKeys, isShowingSubset, selection]);
+  }, [dataSource, getRowKey, getRowsForKeys, isShowingSubset, selection, childrenColumnName]);
   var getSelectableChildren = React.useCallback(function (children) {
     return children ? children.filter(function (child) {
       return getRowKey(child) !== undefined;
@@ -107,8 +114,9 @@ function TableSelection(_ref) {
       var selectedRowKeys = selection.selectedRowKeys;
       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) {
@@ -135,7 +143,7 @@ function TableSelection(_ref) {
       var rows = getRowsForKeys(keys);
       selection.onChange(keys, rows);
     }
-  }, [dataSource, selection, isShowingSubset, getRowsForKeys, getSelectableChildren, getRowKey]);
+  }, [dataSource, selection, isShowingSubset, getRowsForKeys, getSelectableChildren, getRowKey, childrenColumnName]);
   var isEmpty = React.useMemo(function () {
     return dataSource.length === 0;
   }, [dataSource]);
@@ -144,21 +152,25 @@ function TableSelection(_ref) {
     var selectedRowKeys = selection.selectedRowKeys,
         independentSelectionExpandedRows = selection.independentSelectionExpandedRows;
     var allRecordsCount = dataSource.reduce(function (count, record) {
+      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 + 1 : count + 1;
       }
 
-      return Array.isArray(record.children) ? count + getSelectableChildren(record.children).length : count + 1;
+      return Array.isArray(rowChildren) ? count + getSelectableChildren(rowChildren).length : count + 1;
     }, 0);
     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;
       }
@@ -166,7 +178,7 @@ function TableSelection(_ref) {
       return count;
     }, 0) : selectedRowKeys.length;
     return allRecordsCount === selectedKeysInDataSourceCount;
-  }, [isEmpty, selection, dataSource, isShowingSubset, getSelectableChildren, getRowKey]);
+  }, [isEmpty, selection, dataSource, isShowingSubset, getSelectableChildren, getRowKey, childrenColumnName]);
   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

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;
@@ -204,13 +206,14 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
       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) {
@@ -248,9 +251,10 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
       independentSelectionExpandedRows: independentSelectionExpandedRows,
       onChange: handleChange,
       selectedRecords: selectedRecords,
-      tableLocale: locale
+      tableLocale: locale,
+      childrenColumnName: childrenColumnName
     });
-  }, [isSticky, locale, rowKey, selectedRecords, selection]);
+  }, [isSticky, locale, rowKey, selectedRecords, selection, childrenColumnName]);
   var virtualColumns = useMemo(function () {
     return compact([!!selection && {
       width: 64,
@@ -349,9 +353,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 +423,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 +447,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 +520,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 +536,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table",
-  "version": "0.53.1",
+  "version": "0.54.0",
   "description": "Table UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -33,29 +33,29 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^0.8.15",
+    "@synerise/ds-alert": "^0.8.17",
     "@synerise/ds-badge": "^0.7.1",
-    "@synerise/ds-button": "^0.21.0",
-    "@synerise/ds-button-group": "^0.7.2",
+    "@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.59",
+    "@synerise/ds-column-manager": "^0.11.61",
     "@synerise/ds-data-format": "^0.5.0",
-    "@synerise/ds-dropdown": "^0.18.1",
+    "@synerise/ds-dropdown": "^0.18.3",
     "@synerise/ds-flag": "^0.5.0",
-    "@synerise/ds-icon": "^0.62.1",
-    "@synerise/ds-input": "^0.22.0",
+    "@synerise/ds-icon": "^0.63.0",
+    "@synerise/ds-input": "^0.23.0",
     "@synerise/ds-loader": "^0.3.9",
-    "@synerise/ds-menu": "^0.19.2",
-    "@synerise/ds-modal": "^0.17.31",
-    "@synerise/ds-pagination": "^0.7.52",
-    "@synerise/ds-result": "^0.6.57",
-    "@synerise/ds-scrollbar": "^0.11.1",
-    "@synerise/ds-search": "^0.8.94",
-    "@synerise/ds-select": "^0.16.3",
+    "@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.9",
-    "@synerise/ds-tags": "^0.9.1",
-    "@synerise/ds-tooltip": "^0.14.30",
+    "@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",
     "@types/react-window": "^1.8.5",
@@ -79,5 +79,5 @@
   "devDependencies": {
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "ef835e848d4f02cca258130baa6c9f44dfa15dd0"
+  "gitHead": "0692552b018dc9c8042f18c773f88890c9ad3270"
 }