@synerise/ds-table 0.43.7 → 0.44.1

package/dist/RowSelection/RowSelectionColumn.js

@@ -0,0 +1,100 @@
+import * as React 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
+export function RowSelectionColumn(_ref) {
+  var rowKey = _ref.rowKey,
+      record = _ref.record,
+      limit = _ref.limit,
+      independentSelectionExpandedRows = _ref.independentSelectionExpandedRows,
+      selectedRowKeys = _ref.selectedRowKeys,
+      selectedRecords = _ref.selectedRecords,
+      tableLocale = _ref.tableLocale,
+      onChange = _ref.onChange;
+
+  var _useRowKey = useRowKey(rowKey),
+      getRowKey = _useRowKey.getRowKey;
+
+  var recordKey = getRowKey(record);
+  var checkedChildren = React.useMemo(function () {
+    var _record$children;
+
+    return ((_record$children = record.children) == null ? void 0 : _record$children.filter(function (child) {
+      var childKey = getRowKey(child);
+      return childKey && selectedRowKeys.indexOf(childKey) >= 0;
+    })) || [];
+  }, [getRowKey, record.children, selectedRowKeys]);
+  var allChildrenSelected = React.useMemo(function () {
+    var _record$children2;
+
+    return !!((_record$children2 = record.children) != null && _record$children2.every(function (child) {
+      var childKey = getRowKey(child);
+      return childKey && selectedRowKeys.indexOf(childKey) >= 0;
+    }));
+  }, [getRowKey, record.children, 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);
+    }
+
+    return false;
+  }, [checkedChildren.length, independentSelectionExpandedRows, record.children]);
+  var isChecked = React.useMemo(function () {
+    if (Array.isArray(record.children) && !independentSelectionExpandedRows) {
+      return isChecked || allChildrenSelected;
+    }
+
+    return recordKey !== undefined && selectedRowKeys && selectedRowKeys.indexOf(recordKey) >= 0;
+  }, [allChildrenSelected, independentSelectionExpandedRows, record.children, recordKey, selectedRowKeys]);
+  var handleSelectionChange = React.useCallback(function (isCheckedNext, changedRecord) {
+    var selectedRows = selectedRecords;
+
+    if (isCheckedNext) {
+      if (Array.isArray(changedRecord.children) && !independentSelectionExpandedRows) {
+        selectedRows = [].concat(selectedRows, changedRecord.children);
+      } else {
+        selectedRows = [].concat(selectedRows, [changedRecord]);
+      }
+    } else if (Array.isArray(changedRecord.children) && !independentSelectionExpandedRows) {
+      var childrenKeys = changedRecord.children.map(function (child) {
+        return getRowKey(child);
+      });
+      selectedRows = selectedRows.filter(function (child) {
+        return childrenKeys.indexOf(getRowKey(child)) < 0;
+      });
+    } else {
+      selectedRows = selectedRows.filter(function (row) {
+        return getRowKey(row) !== recordKey;
+      });
+    }
+
+    selectedRows = Array.from(new Set(selectedRows));
+    onChange && onChange(selectedRows.reduce(function (acc, current) {
+      var key = getRowKey(current);
+
+      if (key !== undefined) {
+        return [].concat(acc, [key]);
+      }
+
+      return acc;
+    }, []), selectedRows);
+  }, [getRowKey, independentSelectionExpandedRows, onChange, recordKey, selectedRecords]);
+  return recordKey !== undefined ? /*#__PURE__*/React.createElement(Tooltip, {
+    title: tableLocale == null ? void 0 : tableLocale.selectRowTooltip,
+    mouseLeaveDelay: 0
+  }, /*#__PURE__*/React.createElement(Button.Checkbox, {
+    key: "checkbox-" + recordKey,
+    checked: isChecked,
+    disabled: !isChecked && Boolean(limit !== undefined && limit <= selectedRowKeys.length),
+    indeterminate: isIndeterminate,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    onChange: function onChange(isCheckedNext) {
+      return handleSelectionChange(isCheckedNext, record);
+    }
+  })) : null;
+}

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

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

package/dist/RowSelection/index.d.ts

@@ -0,0 +1 @@
+export * from './RowSelectionColumn';

package/dist/RowSelection/index.js

@@ -0,0 +1 @@
+export * from './RowSelectionColumn';

package/dist/Table.d.ts

@@ -4,7 +4,7 @@ import './style/index.less';
 import { DSTableProps } from './Table.types';
 export declare const SELECTION_ALL = "SELECTION_ALL";
 export declare const SELECTION_INVERT = "SELECTION_INVERT";
-declare function DSTable<T extends any>(props: DSTableProps<T>): React.ReactElement;
+declare function DSTable<T extends object>(props: DSTableProps<T>): React.ReactElement;
 declare namespace DSTable {
     var SELECTION_ALL: string;
     var SELECTION_INVERT: string;

package/dist/Table.types.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { TableLocale, TableRowSelection } from 'antd/lib/table/interface';
 import DSTable from './Table';
 import { GroupType } from './GroupTable/GroupTable.types';
-import { RowStar } from './hooks/useRowStar.types';
+import { RowStar } from './hooks/useRowStar';
 import { SortRender } from './ColumnSortMenu/TitleWithSort';
 import { ColumnSortOrder, ColumnsSortState } from './ColumnSortMenu/useSortState';
 export declare type AntTableProps<T> = Omit<TableProps<T>, 'title' | 'subTitle' | 'onSearch' | 'itemsMenu' | 'search' | 'locale' | 'columns'>;
@@ -19,6 +19,7 @@ export declare type RowSelection<T> = Omit<TableRowSelection<T>, 'selections'> &
     selections?: SelectionItem[];
     onChange: (selectedRowKeys: React.ReactText[], selectedRows: T[]) => void;
     limit?: number;
+    independentSelectionExpandedRows?: boolean;
 };
 export interface Filter {
     tooltips: {
@@ -39,6 +40,7 @@ export interface Filter {
     disabled?: boolean;
 }
 export declare type RowType<T> = {
+    key?: string | number;
     children?: T[];
 };
 export declare type Locale = TableLocale & {
@@ -65,8 +67,9 @@ export declare type Locale = TableLocale & {
     infiniteScrollBackToTop?: string;
 };
 export declare type DSColumnType<T> = Omit<ColumnType<T>, 'fixed'> & {
-    fixed?: 'left' | 'right' | string;
+    fixed?: 'left' | 'right';
     sortRender?: SortRender<T>;
+    childRender?: (value: unknown, row: T, index: number) => React.ReactNode;
 };
 declare type AntTableComponentsType<T> = AntTableProps<T>['components'];
 declare type DSTableComponentsType<T> = AntTableComponentsType<T> & {

package/dist/TableHeader/TableSelection.js

@@ -6,30 +6,32 @@ 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';
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+import { useRowKey } from '../hooks/useRowKey'; // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
+
 function TableSelection(_ref) {
   var dataSource = _ref.dataSource,
       selection = _ref.selection,
       rowKey = _ref.rowKey,
       locale = _ref.locale;
-  var getRowKey = React.useCallback(function (row) {
-    if (typeof rowKey === 'function') return rowKey(row);
-    if (typeof rowKey === 'string') return row[rowKey];
-    return undefined;
-  }, [rowKey]);
+
+  var _useRowKey = useRowKey(rowKey),
+      getRowKey = _useRowKey.getRowKey;
+
   var selectAll = React.useCallback(function () {
     if (dataSource && selection) {
       var keys = [];
       var rows = [];
       dataSource.forEach(function (record) {
-        if (record.children !== undefined && Array.isArray(record.children)) {
-          keys = [].concat(keys, record.children.map(function (child) {
-            return getRowKey(child);
-          }));
+        if (Array.isArray(record.children)) {
+          keys = [].concat(keys, record.children.reduce(function (acc, child) {
+            var key = getRowKey(child);
+            return key ? [].concat(acc, [key]) : acc;
+          }, []));
           rows = [].concat(rows, record.children);
-        } else {
+        }
+
+        if (!Array.isArray(record.children) || selection.independentSelectionExpandedRows) {
           var key = getRowKey(record);
           keys = key !== undefined ? [].concat(keys, [key]) : [].concat(keys);
           rows = [].concat(rows, [record]);
@@ -41,19 +43,27 @@ function TableSelection(_ref) {
   var unselectAll = React.useCallback(function () {
     if (selection) selection.onChange([], []);
   }, [selection]);
+  var getSelectableChildren = React.useCallback(function (children) {
+    return children ? children.filter(function (child) {
+      return getRowKey(child) !== undefined;
+    }) : [];
+  }, [getRowKey]);
   var selectInvert = React.useCallback(function () {
     if (dataSource && selection) {
       var selected = [];
       dataSource.forEach(function (record) {
-        var hasChilds = record.children !== undefined && Array.isArray(record.children);
+        var hasChildren = Array.isArray(record.children);
+        var selectableChildren = hasChildren ? getSelectableChildren(record.children) : false;
 
-        if (hasChilds) {
-          record.children && record.children.forEach(function (child) {
+        if (selectableChildren) {
+          selectableChildren.forEach(function (child) {
             if ((selection == null ? void 0 : selection.selectedRowKeys.indexOf(getRowKey(child))) < 0) {
               selected = [].concat(selected, [child]);
             }
           });
-        } else if ((selection == null ? void 0 : selection.selectedRowKeys.indexOf(getRowKey(record))) < 0) {
+        }
+
+        if ((selection == null ? void 0 : selection.selectedRowKeys.indexOf(getRowKey(record))) < 0 && (!selectableChildren || selection.independentSelectionExpandedRows)) {
           selected = [].concat(selected, [record]);
         }
       });
@@ -61,17 +71,21 @@ function TableSelection(_ref) {
         return getRowKey(record);
       }), selected);
     }
-  }, [dataSource, selection, getRowKey]);
+  }, [dataSource, selection, getRowKey, getSelectableChildren]);
   var isEmpty = React.useMemo(function () {
     return dataSource.length === 0;
   }, [dataSource]);
   var allSelected = React.useMemo(function () {
     if (isEmpty) return false;
     var allRecords = dataSource.reduce(function (count, record) {
-      return record.children !== undefined ? count + record.children.length : count + 1;
+      if (selection != null && selection.independentSelectionExpandedRows) {
+        return Array.isArray(record.children) ? count + getSelectableChildren(record.children).length + 1 : count + 1;
+      }
+
+      return Array.isArray(record.children) ? count + getSelectableChildren(record.children).length : count + 1;
     }, 0);
     return (selection == null ? void 0 : selection.selectedRowKeys) && allRecords === selection.selectedRowKeys.length;
-  }, [dataSource, selection, isEmpty]);
+  }, [isEmpty, dataSource, selection, getSelectableChildren]);
   return selection != null && selection.selectedRowKeys ? /*#__PURE__*/React.createElement(S.Selection, {
     "data-popup-container": true
   }, /*#__PURE__*/React.createElement(Tooltip, {

package/dist/VirtualTable/VirtualTable.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { RowType } from '../Table.types';
 import { Props } from './VirtualTable.types';
 export declare const EXPANDED_ROW_PROPERTY = "expandedChild";
-declare function VirtualTable<T extends any & RowType<T> & {
+declare function VirtualTable<T extends object & RowType<T> & {
     [EXPANDED_ROW_PROPERTY]?: boolean;
 }>(props: Props<T>): React.ReactElement;
 export default VirtualTable;

package/dist/VirtualTable/VirtualTable.js

@@ -16,17 +16,16 @@ import ResizeObserver from 'rc-resize-observer';
 import classNames from 'classnames';
 import { compact } from 'lodash';
 import { useIntl } from 'react-intl';
-import Button from '@synerise/ds-button';
-import Tooltip from '@synerise/ds-tooltip';
 import Scrollbar from '@synerise/ds-scrollbar';
 import { infiniteLoaderItemHeight } from '../InfiniteScroll/constants';
 import BackToTopButton from '../InfiniteScroll/BackToTopButton';
 import DSTable from '../Table';
 import VirtualTableRow from './VirtualTableRow';
 import { RelativeContainer } from './VirtualTable.styles';
-import useRowStar from '../hooks/useRowStar';
-import { useTableLocale } from '../utils/locale';
-import { calculatePixels } from '../utils/calculatePixels';
+import { useTableLocale, calculatePixels } from '../utils';
+import { useRowKey } from '../hooks/useRowKey';
+import { useRowStar } from '../hooks/useRowStar/useRowStar';
+import { RowSelectionColumn } from '../RowSelection';
 export var EXPANDED_ROW_PROPERTY = 'expandedChild';
 var relativeInlineStyle = {
   position: 'relative'
@@ -64,8 +63,7 @@ var CustomScrollbar = function CustomScrollbar(containerRef) {
       maxHeight: style == null ? void 0 : style.height
     }, children);
   });
-}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+};
 
 function VirtualTable(props) {
   var _props$columns = props.columns,
@@ -102,6 +100,9 @@ function VirtualTable(props) {
     onListRefChange && onListRefChange(listRef);
   }, [listRef, onListRefChange]);
 
+  var _useRowKey = useRowKey(rowKey),
+      getRowKey = _useRowKey.getRowKey;
+
   var propsForRowStar = _objectSpread({}, props, {
     rowStar: _objectSpread({}, rowStar, {
       onClick: function onClick(e) {
@@ -112,119 +113,74 @@ function VirtualTable(props) {
         }
       }
     }),
+    getRowKey: getRowKey,
     locale: tableLocale
   });
 
   var rowStarColumn = getRowStarColumn(propsForRowStar);
-  var getRowKey = React.useCallback(function (row) {
-    if (typeof rowKey === 'function') return rowKey(row);
-    if (typeof rowKey === 'string') return row[rowKey];
-    return undefined;
-  }, [rowKey]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var selectedRecords = React.useMemo(function () {
+    if (selection) {
+      var _ref2 = selection,
+          selectedRowKeys = _ref2.selectedRowKeys;
+      var selectedRows = [];
+      dataSource && dataSource.forEach(function (row) {
+        var key = getRowKey(row);
+
+        if (key && selectedRowKeys.indexOf(key) >= 0) {
+          selectedRows = [].concat(selectedRows, [row]);
+        }
+
+        if (row.children !== undefined && Array.isArray(row.children)) {
+          row.children.forEach(function (child) {
+            var childKey = getRowKey(child);
+
+            if (childKey && selectedRowKeys.indexOf(childKey) >= 0) {
+              selectedRows = [].concat(selectedRows, [child]);
+            }
+          });
+        }
+      });
+      return selectedRows;
+    }
+
+    return [];
+  }, [dataSource, getRowKey, selection]);
+  var renderRowSelection = React.useCallback(function (key, record) {
+    var _ref3 = selection,
+        selectedRowKeys = _ref3.selectedRowKeys,
+        limit = _ref3.limit,
+        independentSelectionExpandedRows = _ref3.independentSelectionExpandedRows,
+        onChange = _ref3.onChange;
+    return /*#__PURE__*/React.createElement(RowSelectionColumn, {
+      rowKey: rowKey,
+      record: record,
+      limit: limit,
+      selectedRowKeys: selectedRowKeys,
+      independentSelectionExpandedRows: independentSelectionExpandedRows,
+      onChange: onChange,
+      selectedRecords: selectedRecords,
+      tableLocale: locale
+    });
+  }, [locale, rowKey, selectedRecords, selection]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   var virtualColumns = React.useMemo(function () {
     return compact([!!selection && {
       width: 64,
       key: 'key',
       dataIndex: 'key',
-      render: function render(key, record) {
-        var _record$children, _record$children2, _record$children3;
-
-        var recordKey = getRowKey(record);
-        var allChildsChecked = // @ts-expect-error: Property 'children' does not exist on type 'T'.ts(2339)
-        Array.isArray(record.children) && // @ts-expect-error: Property 'children' does not exist on type 'T'.ts(2339)
-        ((_record$children = record.children) == null ? void 0 : _record$children.filter(function (child) {
-          var childKey = getRowKey(child);
-          return childKey && (selection == null ? void 0 : selection.selectedRowKeys.indexOf(childKey)) < 0;
-        }).length) === 0;
-        var checkedChilds = // @ts-expect-error: Property 'children' does not exist on type 'T'.ts(2339)
-        ((_record$children2 = record.children) == null ? void 0 : _record$children2.filter(function (child) {
-          var childKey = getRowKey(child);
-          return childKey && (selection == null ? void 0 : selection.selectedRowKeys.indexOf(childKey)) >= 0;
-        })) || [];
-        var isIndeterminate = // @ts-expect-error: Property 'children' does not exist on type 'T'.ts(2339)
-        Array.isArray(record.children) && checkedChilds.length > 0 && // @ts-expect-error: Property 'children' does not exist on type 'T'.ts(2339)
-        checkedChilds.length < (((_record$children3 = record.children) == null ? void 0 : _record$children3.length) || 0);
-        var checked = recordKey !== undefined && selection.selectedRowKeys && selection.selectedRowKeys.indexOf(recordKey) >= 0 || allChildsChecked;
-        return recordKey !== undefined && /*#__PURE__*/React.createElement(Tooltip, {
-          title: tableLocale == null ? void 0 : tableLocale.selectRowTooltip,
-          mouseLeaveDelay: 0
-        }, /*#__PURE__*/React.createElement(Button.Checkbox, {
-          key: "checkbox-" + recordKey,
-          checked: checked,
-          disabled: !checked && Boolean(selection.limit && selection.limit <= selection.selectedRowKeys.length),
-          indeterminate: isIndeterminate,
-          onClick: function onClick(e) {
-            e.stopPropagation();
-          },
-          onChange: function onChange(isChecked) {
-            var selectedRowKeys = selection.selectedRowKeys,
-                onChange = selection.onChange;
-            var selectedRows = [];
-            dataSource && dataSource.forEach(function (row) {
-              // @ts-expect-error: Property 'children' does not exist on type 'T'.ts(2339)
-              if (row.children !== undefined && Array.isArray(row.children)) {
-                // @ts-expect-error: Property 'children' does not exist on type 'T'.ts(2339)
-                row.children.forEach(function (child) {
-                  var k = getRowKey(child);
-
-                  if (k && selectedRowKeys.indexOf(k) >= 0) {
-                    selectedRows = [].concat(selectedRows, [child]);
-                  }
-                });
-              } else {
-                var k = getRowKey(row);
-
-                if (k && selectedRowKeys.indexOf(k) >= 0) {
-                  selectedRows = [].concat(selectedRows, [row]);
-                }
-              }
-            });
-
-            if (isChecked) {
-              // @ts-expect-error: Property 'children' does not exist on type 'T'.ts(2339)
-              if (Array.isArray(record.children)) {
-                // @ts-expect-error: Property 'children' does not exist on type 'T'.ts(2339)
-                selectedRows = [].concat(selectedRows, record.children);
-              } else {
-                selectedRows = [].concat(selectedRows, [record]);
-              } // @ts-expect-error: Property 'children' does not exist on type 'T'.ts(2339)
-
-            } else if (Array.isArray(record.children)) {
-              // @ts-expect-error: Property 'children' does not exist on type 'T'.ts(2339)
-              var childsKeys = record.children.map(function (child) {
-                return getRowKey(child);
-              });
-              selectedRows = selectedRows.filter(function (child) {
-                return childsKeys.indexOf(getRowKey(child)) < 0;
-              });
-            } else {
-              selectedRows = selectedRows.filter(function (row) {
-                return getRowKey(row) !== recordKey;
-              });
-            }
-
-            selectedRows = Array.from(new Set(selectedRows));
-            onChange && onChange(selectedRows.map(function (selected) {
-              return getRowKey(selected);
-            }), selectedRows);
-          }
-        }));
-      }
+      render: renderRowSelection
     }, !!rowStar && rowStarColumn].concat(columns));
-  }, [columns, selection, rowStar, rowStarColumn, getRowKey, dataSource, tableLocale]);
+  }, [selection, renderRowSelection, rowStar, rowStarColumn, columns]);
   var mergedColumns = React.useMemo(function () {
-    var widthColumnCount = virtualColumns.filter(function (_ref2) {
-      var width = _ref2.width;
+    var widthColumnCount = virtualColumns.filter(function (_ref4) {
+      var width = _ref4.width;
       return !width;
     }).length;
     var rowWidth = tableWidth || initialWidth;
-    var definedWidth = virtualColumns.filter(function (_ref3) {
-      var width = _ref3.width;
-      return width;
-    }).reduce(function (total, _ref4) {
-      var width = _ref4.width;
-      return total + width;
+    var definedWidth = virtualColumns.reduce(function (total, _ref5) {
+      var width = _ref5.width;
+      var widthInPx = calculatePixels(width) || 0;
+      return total + widthInPx;
     }, 0);
     return virtualColumns == null ? void 0 : virtualColumns.map(function (column) {
       if (column.width) {
@@ -238,9 +194,9 @@ function VirtualTable(props) {
       });
     });
   }, [virtualColumns, tableWidth, initialWidth]);
-  var listInnerElementType = React.forwardRef(function (_ref5, ref) {
-    var style = _ref5.style,
-        rest = _objectWithoutPropertiesLoose(_ref5, _excluded);
+  var listInnerElementType = React.forwardRef(function (_ref6, ref) {
+    var style = _ref6.style,
+        rest = _objectWithoutPropertiesLoose(_ref6, _excluded);
 
     return /*#__PURE__*/React.createElement("div", _extends({
       ref: ref,
@@ -261,16 +217,27 @@ function VirtualTable(props) {
   var outerElement = React.useMemo(function () {
     return CustomScrollbar(containerRef);
   }, [containerRef]);
-
-  var renderBody = function renderBody(rawData, meta, defaultTableProps) {
+  var createItemData = React.useCallback(function (data, defaultTableProps) {
+    return {
+      mergedColumns: mergedColumns,
+      selection: selection,
+      rowStar: rowStar,
+      onRowClick: onRowClick,
+      dataSource: data,
+      infiniteScroll: infiniteScroll,
+      cellHeight: cellHeight,
+      defaultTableProps: defaultTableProps
+    };
+  }, [cellHeight, infiniteScroll, mergedColumns, onRowClick, rowStar, selection]);
+  var renderBody = React.useCallback(function (rawData, meta, defaultTableProps) {
     var _expandable$expandedR;
 
     var renderVirtualList = function renderVirtualList(data) {
       var listHeight = data.length * cellHeight - scroll.y + infiniteLoaderItemHeight;
 
-      var handleListScroll = function handleListScroll(_ref6) {
-        var scrollOffset = _ref6.scrollOffset,
-            scrollDirection = _ref6.scrollDirection;
+      var handleListScroll = function handleListScroll(_ref7) {
+        var scrollOffset = _ref7.scrollOffset,
+            scrollDirection = _ref7.scrollDirection;
 
         if (scrollDirection === 'forward' && scrollOffset >= listHeight && typeof (infiniteScroll == null ? void 0 : infiniteScroll.onScrollEndReach) === 'function') {
           infiniteScroll.onScrollEndReach();
@@ -281,23 +248,17 @@ function VirtualTable(props) {
         }
       };
 
+      var itemData = createItemData(data, defaultTableProps);
       return /*#__PURE__*/React.createElement(List, {
         ref: listRef,
+        key: "virtual-list",
         onScroll: handleListScroll,
         className: "virtual-grid",
         height: scroll.y,
         itemCount: data.length,
         itemSize: cellHeight,
         width: "100%",
-        itemData: {
-          mergedColumns: mergedColumns,
-          selection: selection,
-          onRowClick: onRowClick,
-          dataSource: data,
-          infiniteScroll: infiniteScroll,
-          cellHeight: cellHeight,
-          defaultTableProps: defaultTableProps
-        },
+        itemData: itemData,
         itemKey: function itemKey(index) {
           return String(getRowKey(data[index]));
         },
@@ -313,13 +274,11 @@ function VirtualTable(props) {
 
         var key = getRowKey(currentRow);
 
-        if (key !== undefined && expandable != null && (_expandable$expandedR2 = expandable.expandedRowKeys) != null && _expandable$expandedR2.includes(key) && // @ts-expect-error: Property 'children' does not exist on type 'T'.ts(2339)
-        Array.isArray(currentRow.children) && // @ts-expect-error: Property 'children' does not exist on type 'T'.ts(2339)
-        currentRow.children.length) {
-          return [].concat(result, [currentRow], currentRow.children.map(function (child) {
+        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) {
             var _objectSpread2;
 
-            return _objectSpread({}, child, (_objectSpread2 = {}, _objectSpread2[EXPANDED_ROW_PROPERTY] = true, _objectSpread2));
+            return _objectSpread({}, child, (_objectSpread2 = {}, _objectSpread2[EXPANDED_ROW_PROPERTY] = true, _objectSpread2.index = index, _objectSpread2));
           }));
         }
 
@@ -329,8 +288,7 @@ function VirtualTable(props) {
     }
 
     return renderVirtualList(rawData);
-  };
-
+  }, [cellHeight, createItemData, expandable, getRowKey, infiniteScroll, listInnerElementType, outerElement, scroll.y]);
   var columnsSliceStartIndex = Number(!!selection) + Number(!!rowStar);
   var scrollValue = !dataSource || (dataSource == null ? void 0 : dataSource.length) === 0 ? undefined : props == null ? void 0 : props.scroll;
   return /*#__PURE__*/React.createElement(RelativeContainer, {
@@ -338,13 +296,15 @@ function VirtualTable(props) {
     ref: containerRef,
     style: relativeInlineStyle
   }, /*#__PURE__*/React.createElement(ResizeObserver, {
-    onResize: function onResize(_ref7) {
-      var offsetWidth = _ref7.offsetWidth;
+    onResize: function onResize(_ref8) {
+      var offsetWidth = _ref8.offsetWidth;
       setTableWidth(offsetWidth);
     }
   }, /*#__PURE__*/React.createElement(DSTable, _extends({}, props, {
     scroll: scrollValue,
     className: classNames(className, 'virtual-table', !!infiniteScroll && 'virtual-table-infinite-scroll') // Remove columns which cause header columns indent
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
     ,
     columns: mergedColumns.slice(columnsSliceStartIndex),
     pagination: false,

package/dist/VirtualTable/VirtualTable.styles.js

@@ -27,7 +27,7 @@ export var RowWrapper = styled.div.withConfig({
 export var ColWrapper = styled.div.withConfig({
   displayName: "VirtualTablestyles__ColWrapper",
   componentId: "aehkhc-1"
-})(["display:table-cell;vertical-align:middle;min-width:", ";max-width:", ";padding:0 24px;&.virtual-table-cell.ant-table-selection-column{padding:0 8px 0 24px;}&.virtual-table-cell.ds-table-star-column{padding:0 8px 0 24px;& > button{display:flex;}}&.virtual-table-cell.ant-table-selection-column + .virtual-table-cell.ds-table-star-column{padding-left:0;}"], function (props) {
+})(["display:table-cell;vertical-align:middle;width:inherit;min-width:", ";max-width:", ";padding:0 24px;&.virtual-table-cell.ant-table-selection-column{padding:0 8px 0 24px;width:auto;}&.virtual-table-cell.ds-table-star-column{padding:0 8px 0 24px;width:auto;& > button{display:flex;}}&.virtual-table-cell.ant-table-selection-column + .virtual-table-cell.ds-table-star-column{padding-left:0;}"], function (props) {
   return getColumnMinWidth(props);
 }, function (props) {
   return getColumnMaxWidth(props);

package/dist/VirtualTable/VirtualTableRow.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { InfiniteScrollProps } from '../InfiniteScroll/constants';
 import { RowSelection, DSTableProps } from '../Table.types';
+import { RowStar } from '../hooks/useRowStar';
 interface Props<T> {
     data: {
         dataSource: T[];
@@ -8,13 +9,13 @@ interface Props<T> {
         infiniteScroll: InfiniteScrollProps;
         mergedColumns: any[];
         selection?: RowSelection<T>;
+        rowStar?: RowStar<T>;
         onRowClick?: (row: T) => void;
         defaultTableProps?: DSTableProps<T>;
     };
     index: number;
     style: React.CSSProperties;
 }
-declare class VirtualTableRow<T> extends React.PureComponent<Props<T>> {
-    render(): React.ReactNode;
-}
-export default VirtualTableRow;
+declare function VirtualTableRow<T extends object>({ index, style, data: { mergedColumns, onRowClick, selection, rowStar, dataSource, cellHeight, infiniteScroll, defaultTableProps }, }: Props<T>): React.ReactElement;
+declare const _default: React.MemoExoticComponent<typeof VirtualTableRow>;
+export default _default;