@semcore/data-table 17.0.0-prerelease.31 → 17.0.0-prerelease.34

package/lib/es6/components/Body/style.shadow.css

@@ -66,46 +66,20 @@ SCollapseRow > SCellWrapper > SCell {
   display: block;
 }
 
-/* DEFAULT THEME */
-
-SRow[active] > SCellWrapper > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
-}
-
 SRow[accordionType='row'][expanded] > SCellWrapper > SCell:not([theme]),
 SCell:not([theme])[expanded][withAccordion] {
   background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
 }
 
-SCell[theme='muted'][expanded][withAccordion] {
-  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
-}
-
-SCell[theme='info'][expanded][withAccordion] {
-  background-color: var(--intergalactic-table-td-cell-selected-hover, #c4e5fe);
-}
-
-SCell[theme='success'][expanded][withAccordion] {
-  background-color: var(--intergalactic-table-td-cell-new-hover, #9ef2c9);
-}
-
-SCell[theme='warning'][expanded][withAccordion] {
-  background-color: var(--intergalactic-table-td-cell-warning-hover, #ffdca2);
-}
-
-SCell[theme='danger'][expanded][withAccordion] {
-  background-color: var(--intergalactic-table-td-cell-critical-hover, #ffd7df);
-}
-
 SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWrapper > SCell:not([theme]) {
   background-color: var(--intergalactic-table-td-cell-accordion, #f4f5f9);
 }
 
 /* we need a media query here because of the postcssHoverMediaFeature plugin. it doesn't handle this type of selectors correctly */
 @media (hover: hover) {
-  SRow:not([accordionType='row'][expanded]):hover:not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
-  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
-  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([expanded][withAccordion]):not([aria-hidden]) {
+  :not(SRowGroup:has([data-row-selector="true"] input:checked)) > SRow:not([accordionType='row'][expanded]):hover:not([isNonInteractive]):not(:has([data-row-selector="true"] input:checked)):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover):not(:has([data-row-selector="true"] input:checked)) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover):not(:has([data-row-selector="true"] input:checked)) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([expanded][withAccordion]):not([aria-hidden]) {
     background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
   }
 
@@ -121,9 +95,13 @@ SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWr
 
   /* INFO THEME */
   SRow:hover:not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell[theme='info']:not([aria-hidden]),
+  SRow:hover:has([data-row-selector="true"] input:checked):not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([aria-hidden]),
   SRow[theme='info']:hover:not([expanded][isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
   SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[theme='info']:not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover):has([data-row-selector="true"] input:checked) SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([aria-hidden]),
   SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='info']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover):has([data-row-selector="true"] input:checked) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([aria-hidden]),
+  SRowGroup:has([data-row-selector="true"] input:checked) > SRow:hover:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([aria-hidden]),
   SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='info']:not([aria-hidden]),
   SRowGroup:has(SCell:hover) > SRow[theme='info']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([aria-hidden]) {
     background-color: var(--intergalactic-table-td-cell-selected-hover, #c4e5fe);
@@ -160,81 +138,15 @@ SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWr
   }
 }
 
-/* MUTED THEME */
-
-SRow[theme='muted'] SCell:not([theme]) {
-  &:not([expanded][withAccordion]) {
-    background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
-  }
-  &[expanded][withAccordion] {
-    background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
-  }
-}
-
-SRow[theme='muted'][active] > SCellWrapper > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
-}
-
-/* INFO THEME */
+SRowGroup:has([data-row-selector="true"] input:checked) > SRow > SCellWrapper > SCell,
+SRow:has([data-row-selector="true"] input:checked) > SCellWrapper > SCell {
+  background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
 
-SRow[theme='info'] SCell:not([theme]) {
-  &:not([expanded][withAccordion]) {
-    background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
-  }
   &[expanded][withAccordion] {
     background-color: var(--intergalactic-table-td-cell-selected-active, #c4e5fe);
   }
 }
 
-SRow[theme='info'][active] > SCellWrapper > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-selected-active, #c4e5fe);
-}
-
-/* SUCCESS THEME */
-
-SRow[theme='success'] SCell:not([theme]) {
-  &:not([expanded][withAccordion]) {
-    background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
-  }
-  &[expanded][withAccordion] {
-    background-color: var(--intergalactic-table-td-cell-new-active, #9ef2c9);
-  }
-}
-
-SRow[theme='success'][active] > SCellWrapper > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-new-active, #9ef2c9);
-}
-
-/* WARNING THEME */
-
-SRow[theme='warning'] SCell:not([theme]) {
-  &:not([expanded][withAccordion]) {
-    background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
-  }
-  &[expanded][withAccordion] {
-    background-color: var(--intergalactic-table-td-cell-warning-active, #ffdca2);
-  }
-}
-
-SRow[theme='warning'][active] > SCellWrapper > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-warning-active, #ffdca2);
-}
-
-/* DANGER THEME */
-
-SRow[theme='danger'] SCell:not([theme]) {
-  &:not([expanded][withAccordion]) {
-    background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
-  }
-  &[expanded][withAccordion] {
-    background-color: var(--intergalactic-table-td-cell-critical-active, #ffd7df);
-  }
-}
-
-SRow[theme='danger'][active] > SCellWrapper > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-critical-active, #ffd7df);
-}
-
 SCell {
   display: flex;
   height: 100%;
@@ -267,68 +179,94 @@ SCell {
   &[withoutBorder] {
     border-bottom: none;
   }
-}
 
-SRow[accordionType='row'] > SCellWrapper > SCell, SCell[withAccordion], SCell[name='Symbol(SELECT_ALL)'] {
-  cursor: pointer;
-}
+  &[use='primary'] {
+    padding: var(--intergalactic-spacing-3x, 12px);
+    min-height: 45px;
+    background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
 
-SCheckboxCell[aria-hidden] {
-  filter: blur(3px);
-  pointer-events: none;
-}
+    &[data-aria-level] {
+      padding-left: calc(var(--intergalactic-spacing-3x, 12px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    }
+  }
 
-SCell[use='primary'] {
-  padding: var(--intergalactic-spacing-3x, 12px);
-  min-height: 45px;
-  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+  &[use='secondary'] {
+    padding: var(--intergalactic-spacing-2x, 8px);
+    min-height: 37px;
+    background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
 
-  &[data-aria-level] {
-    padding-left: calc(var(--intergalactic-spacing-3x, 12px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    &[data-aria-level] {
+      padding-left: calc(var(--intergalactic-spacing-2x, 8px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    }
   }
-}
 
-SCell[use='secondary'] {
-  padding: var(--intergalactic-spacing-2x, 8px);
-  min-height: 37px;
-  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+  &[theme='muted'] {
+    background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
 
-  &[data-aria-level] {
-    padding-left: calc(var(--intergalactic-spacing-2x, 8px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+    }
   }
-}
 
-SCell[borders='both'], SCell[borders='left'] {
-  border-left: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
-}
+  &[theme='info'] {
+    background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
 
-SCell[borders='both'], SCell[borders='right'] {
-  border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
-}
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-selected-active, #c4e5fe);
+    }
+  }
 
-SCellWrapper[fixed] {
-  position: sticky;
-  z-index: 2;
-}
+  &[theme='success'] {
+    background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
 
-SCell[theme='muted'] {
-  background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
-}
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-new-active, #9ef2c9);
+    }
+  }
 
-SCell[theme='info'] {
-  background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
+  &[theme='warning'] {
+    background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
+
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-warning-active, #ffdca2);
+    }
+  }
+
+  &[theme='danger'] {
+    background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
+
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-critical-active, #ffd7df);
+    }
+  }
+
+  &[borders='both'],
+  &[borders='left'] {
+    border-left: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+  }
+
+  &[borders='both'],
+  &[borders='right'] {
+    border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+  }
+
+  &[innerOutline]:focus-visible {
+    transition: none;
+  }
 }
 
-SCell[theme='success'] {
-  background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
+SRow[accordionType='row'] > SCellWrapper > SCell, SCell[withAccordion], SCell[name='Symbol(SELECT_ALL)'] {
+  cursor: pointer;
 }
 
-SCell[theme='warning'] {
-  background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
+SCheckboxCell[aria-hidden] {
+  filter: blur(3px);
+  pointer-events: none;
 }
 
-SCell[theme='danger'] {
-  background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
+SCellWrapper[fixed] {
+  position: sticky;
+  z-index: 2;
 }
 
 SSpinContainer {
@@ -342,13 +280,14 @@ SSpinContainer {
   justify-content: center;
   background-color: var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85));
   z-index: 15;
-}
-SSpinContainer:focus-visible {
-  z-index: 15;
-}
 
-SSpinContainer[headerHeight] {
-  top: var(--headerHeight);
+  &:focus-visible {
+    z-index: 15;
+  }
+
+  &[headerHeight] {
+    top: var(--headerHeight);
+  }
 }
 
 SEmptyData {
@@ -426,7 +365,3 @@ SLimitOverlayCellWrapper[left] {
   position: sticky;
   left: var(---left);
 }
-
-SCell[innerOutline]:focus-visible {
-  transition: none;
-}

package/lib/es6/components/DataTable/DataTable.js

@@ -27,6 +27,7 @@ const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/
   "_gridTemplateRows": "__gridTemplateRows_wo0cb_gg_",
   "--gridTemplateRows": "--gridTemplateRows_wo0cb"
 });
+import { SelectableRows } from '../../store/SelectableRows';
 /*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
 const scrollStyles = (/*__reshadow_css_start__*/_sstyled2.insert(/*__inner_css_start__*/".___SScrollArea_j4820_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_{overflow:visible;overflow:initial}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_both_j4820_gg_{overflow:auto}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_both_j4820_gg_.__loading_j4820_gg_,.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_horizontal_j4820_gg_.__loading_j4820_gg_,.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_vertical_j4820_gg_.__loading_j4820_gg_{overflow:hidden}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_horizontal_j4820_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_vertical_j4820_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_.__headerHeight_j4820_gg_{scroll-padding-top:var(--headerHeight_j4820)}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_.__leftScrollPadding_j4820_gg_{scroll-padding-left:var(--leftScrollPadding_j4820)}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_.__rightScrollPadding_j4820_gg_{scroll-padding-right:var(--rightScrollPadding_j4820)}.___SScrollArea_j4820_gg_ .___SShadowHorizontal_j4820_gg_::before,.___SScrollArea_j4820_gg_ .___SShadowHorizontal_j4820_gg_:after,.___SScrollArea_j4820_gg_ .___SShadowVertical_j4820_gg_::after{z-index:20}.___SScrollArea_j4820_gg_ .___SShadowHorizontal_j4820_gg_.__leftOffset_j4820_gg_::before,.___SScrollArea_j4820_gg_ .___SShadowHorizontal_j4820_gg_.__rightOffset_j4820_gg_::after,.___SScrollArea_j4820_gg_ .___SShadowVertical_j4820_gg_::before{display:none}", /*__inner_css_end__*/"j4820_gg_"),
 /*__reshadow_css_end__*/
@@ -93,7 +94,7 @@ class DataTableRoot extends Component {
     });
     _defineProperty(this, "selectAllMessageTimer", 0);
     _defineProperty(this, "headerNodesMap", new Map());
-    _defineProperty(this, "isPressedShift", false);
+    _defineProperty(this, "selectedRowsContainer", void 0);
     _defineProperty(this, "lastSelectedRowKey", void 0);
     _defineProperty(this, "state", {
       scrollTop: 0,
@@ -139,14 +140,20 @@ class DataTableRoot extends Component {
         this.initFocusableCell([this.hasFocusableInHeader() ? opt.rowIndex + 1 : opt.rowIndex, opt.colIndex]);
       }
     });
+    _defineProperty(this, "handleSelectAllRows", (selectedRows, event) => {
+      if (!('onSelectedRowsChange' in this.asProps) || !this.asProps.onSelectedRowsChange || !Array.isArray(selectedRows)) return;
+      this.asProps.onSelectedRowsChange(selectedRows, event);
+    });
     _defineProperty(this, "handleSelectRow", (isSelected, selectedRowIndex, row, event) => {
       const {
-        selectedRows,
+        selectedRows
+      } = this.asProps;
+      if (!selectedRows || !('onSelectedRowsChange' in this.asProps) || !this.asProps.onSelectedRowsChange || !Array.isArray(selectedRows)) return;
+      const {
         onSelectedRowsChange
       } = this.asProps;
-      if (!selectedRows || !onSelectedRowsChange) return;
       const selectedRowsSet = new Set(selectedRows);
-      if (this.isPressedShift && selectedRowsSet.size > 0 && this.lastSelectedRowKey && (isSelected ? selectedRowsSet.has(this.lastSelectedRowKey) : true)) {
+      if (this.selectedRowsContainer.isPressedShift && selectedRowsSet.size > 0 && this.lastSelectedRowKey && (isSelected ? selectedRowsSet.has(this.lastSelectedRowKey) : true)) {
         let select = false;
         const firstColumnKey = this.columns[0].name;
         const isMerged = this.flatRows.some(item => item[firstColumnKey] instanceof MergedRowsCell);
@@ -357,13 +364,13 @@ class DataTableRoot extends Component {
           }
         case 'Shift':
           {
-            this.isPressedShift = true;
+            this.selectedRowsContainer.isPressedShift = true;
           }
       }
     });
     _defineProperty(this, "handleKeyUp", e => {
       if (e.key === 'Shift') {
-        this.isPressedShift = false;
+        this.selectedRowsContainer.isPressedShift = false;
       }
     });
     _defineProperty(this, "handleScroll", trottle(e => {
@@ -544,6 +551,11 @@ class DataTableRoot extends Component {
     this.calculatedRows = this.getRows();
     this.flatRows = this.calculatedRows.flat();
     this.tmpData = props.data;
+    if (Array.isArray(props.selectedRows) || !props.selectedRows) {
+      this.selectedRowsContainer = new SelectableRows();
+    } else {
+      this.selectedRowsContainer = props.selectedRows;
+    }
   }
   componentDidMount() {
     const {
@@ -577,7 +589,7 @@ class DataTableRoot extends Component {
         this.calculateVerticalShadow();
       }
     }
-    if (prevProps.selectedRows !== selectedRows && selectedRows !== undefined) {
+    if (prevProps.selectedRows !== selectedRows && selectedRows !== undefined && Array.isArray(selectedRows)) {
       const selectedRowsSet = new Set(selectedRows);
       const allChecked = [];
       const allUnchecked = [];
@@ -594,6 +606,9 @@ class DataTableRoot extends Component {
         this.setSelectAllMessage(false);
       }
     }
+    if (prevProps.selectedRows !== selectedRows && selectedRows !== undefined && !Array.isArray(selectedRows)) {
+      this.selectedRowsContainer = selectedRows;
+    }
   }
   componentWillUnmount() {
     if (canUseDOM()) {
@@ -663,7 +678,6 @@ class DataTableRoot extends Component {
       getI18nText,
       uid,
       headerProps,
-      onSelectedRowsChange,
       selectedRows,
       sideIndents,
       variant
@@ -695,7 +709,7 @@ class DataTableRoot extends Component {
       totalRows: this.totalRows,
       selectedRows,
       flatRows: this.getFlatRows(),
-      onChangeSelectAll: onSelectedRowsChange,
+      onChangeSelectAll: Array.isArray(selectedRows) ? this.handleSelectAllRows : undefined,
       getFixedStyle: this.getFixedStyle,
       onCellClick: this.handleCellClick,
       shadowVertical,
@@ -765,7 +779,7 @@ class DataTableRoot extends Component {
       renderEmptyData,
       sideIndents,
       selectedRows,
-      onSelectRow: this.handleSelectRow,
+      onSelectRow: Array.isArray(selectedRows) ? this.handleSelectRow : undefined,
       getFixedStyle: this.getFixedStyle,
       onCellClick: this.handleCellClick,
       rawData,
@@ -827,7 +841,7 @@ class DataTableRoot extends Component {
     const width = w ?? (this.columns.some(c => c.gtcWidth === 'auto' || c.gtcWidth === '1fr') ? '100%' : undefined);
     let gridTemplateRows = undefined;
     if (virtualScroll && typeof virtualScroll !== 'boolean' && 'rowHeight' in virtualScroll) {
-      gridTemplateRows = `auto auto repeat(${this.totalRows}, minmax(${virtualScroll.rowHeight}px, auto)`;
+      gridTemplateRows = `auto auto repeat(${this.totalRows}, minmax(${virtualScroll.rowHeight}px, auto))`;
     }
     return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(ScrollArea, _ref2.cn("ScrollArea", {
       "leftOffset": offsetLeftSum,
@@ -1019,12 +1033,14 @@ class DataTableRoot extends Component {
     const {
       data,
       uid,
-      uniqueRowKey
+      uniqueRowKey,
+      selectedRows
     } = this.props;
     if (this.tmpData === data) {
       return this.calculatedRows;
     }
     this.tmpData = data;
+    const availableRowKeys = [];
     const rows = [];
     const columnNames = columns.map(column => column.name);
     let rowIndex = 0;
@@ -1096,6 +1112,10 @@ class DataTableRoot extends Component {
           dtRow[value] = '';
         });
       }
+      if (!excludeColumns) {
+        // we should add only the main row in mergedRows or default rows
+        availableRowKeys.push(dtRow[UNIQ_ROW_KEY]);
+      }
       return dtRow;
     };
     data.forEach(row => {
@@ -1152,6 +1172,9 @@ class DataTableRoot extends Component {
       }
     });
     this.calculatedRows = rows;
+    if (selectedRows && !Array.isArray(selectedRows)) {
+      selectedRows.setAvailableKeys(availableRowKeys);
+    }
     return rows;
   }
   calculateGridTemplateColumn(c) {