naive-ui 2.20.2 → 2.21.2

package/lib/data-table/src/DataTable.js

@@ -37,7 +37,7 @@ exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
     }, bottomBordered: {
         type: Boolean,
         default: undefined
-    }, scrollX: [Number, String], defaultCheckedRowKeys: {
+    }, striped: Boolean, scrollX: [Number, String], defaultCheckedRowKeys: {
         type: Array,
         default: () => []
     }, checkedRowKeys: Array, singleLine: {
@@ -130,7 +130,7 @@ exports.default = (0, vue_1.defineComponent)({
         const scrollPartRef = (0, vue_1.ref)('body');
         const mainTableInstRef = (0, vue_1.ref)(null);
         const { rowsRef, colsRef, dataRelatedColsRef, hasEllipsisRef } = (0, use_group_header_1.useGroupHeader)(props);
-        const { treeMateRef, mergedCurrentPageRef, paginatedDataRef, rawPaginatedDataRef, selectionColumnRef, hoverKeyRef, mergedPaginationRef, mergedFilterStateRef, mergedSortStateRef, firstContentfulColIndexRef, doUpdateFilters, deriveNextSorter, filter, filters, clearFilter, clearFilters, page, sort } = (0, use_table_data_1.useTableData)(props, { dataRelatedColsRef });
+        const { treeMateRef, mergedCurrentPageRef, paginatedDataRef, rawPaginatedDataRef, selectionColumnRef, hoverKeyRef, mergedPaginationRef, mergedFilterStateRef, mergedSortStateRef, firstContentfulColIndexRef, doUpdateFilters, deriveNextSorter, filter, filters, clearFilter, clearFilters, clearSorter, page, sort } = (0, use_table_data_1.useTableData)(props, { dataRelatedColsRef });
         const { doCheckAll, doUncheckAll, doCheck, doUncheck, headerCheckboxDisabledRef, someRowsCheckedRef, allRowsCheckedRef, mergedCheckedRowKeySetRef, mergedInderminateRowKeySetRef } = (0, use_check_1.useCheck)(props, {
             selectionColumnRef,
             treeMateRef,
@@ -191,6 +191,7 @@ exports.default = (0, vue_1.defineComponent)({
             summaryRef: (0, vue_1.toRef)(props, 'summary'),
             virtualScrollRef: (0, vue_1.toRef)(props, 'virtualScroll'),
             rowPropsRef: (0, vue_1.toRef)(props, 'rowProps'),
+            stripedRef: (0, vue_1.toRef)(props, 'striped'),
             checkOptionsRef: (0, vue_1.computed)(() => {
                 const { value: selectionColumn } = selectionColumnRef;
                 return selectionColumn === null || selectionColumn === void 0 ? void 0 : selectionColumn.options;
@@ -228,14 +229,15 @@ exports.default = (0, vue_1.defineComponent)({
         const exposedMethods = {
             filter,
             filters,
-            clearFilter,
             clearFilters,
+            clearSorter,
             page,
-            sort
+            sort,
+            clearFilter
         };
         return Object.assign(Object.assign({ mainTableInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, paginatedData: paginatedDataRef, mergedBordered: mergedBorderedRef, mergedBottomBordered: mergedBottomBorderedRef, mergedPagination: mergedPaginationRef }, exposedMethods), { cssVars: (0, vue_1.computed)(() => {
                 const { size } = props;
-                const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, boxShadowAfter, boxShadowBefore, sorterSize, loadingColor, loadingSize, opacityLoading, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('thPadding', size)]: thPadding, [(0, _utils_1.createKey)('tdPadding', size)]: tdPadding } } = themeRef.value;
+                const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, boxShadowAfter, boxShadowBefore, sorterSize, loadingColor, loadingSize, opacityLoading, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('thPadding', size)]: thPadding, [(0, _utils_1.createKey)('tdPadding', size)]: tdPadding } } = themeRef.value;
                 return {
                     '--font-size': fontSize,
                     '--th-padding': thPadding,
@@ -272,7 +274,10 @@ exports.default = (0, vue_1.defineComponent)({
                     '--sorter-size': sorterSize,
                     '--loading-size': loadingSize,
                     '--loading-color': loadingColor,
-                    '--opacity-loading': opacityLoading
+                    '--opacity-loading': opacityLoading,
+                    '--td-color-striped': tdColorStriped,
+                    '--td-color-striped-modal': tdColorStripedModal,
+                    '--td-color-striped-popover': tdColorStripedPopover
                 };
             }) });
     },

package/lib/data-table/src/HeaderButton/FilterButton.d.ts

@@ -80,9 +80,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -119,6 +123,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             borderColor: string;
             tdColorHover: string;
+            tdColorStriped: string;
             thColor: string;
             thColorHover: string;
             tdColor: string;
@@ -130,11 +135,13 @@ declare const _default: import("vue").DefineComponent<{
             thIconColorActive: string;
             borderColorModal: string;
             tdColorHoverModal: string;
+            tdColorStripedModal: string;
             thColorModal: string;
             thColorHoverModal: string;
             tdColorModal: string;
             borderColorPopover: string;
             tdColorHoverPopover: string;
+            tdColorStripedPopover: string;
             thColorPopover: string;
             thColorHoverPopover: string;
             tdColorPopover: string;
@@ -171,20 +178,30 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: number;
+                colorOpacitySecondaryHover: number;
+                colorOpacitySecondaryPressed: number;
+                colorSecondary: string;
+                colorSecondaryHover: string;
+                colorSecondaryPressed: string;
+                colorTertiary: string;
+                colorTertiaryHover: string;
+                colorTertiaryPressed: string;
+                colorQuaternary: string;
+                colorQuaternaryHover: string;
+                colorQuaternaryPressed: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
                 colorFocus: string;
                 colorDisabled: string;
                 textColor: string;
+                textColorTertiary: string;
                 textColorHover: string;
                 textColorPressed: string;
                 textColorFocus: string;
                 textColorDisabled: string;
                 textColorText: string;
-                textColorTextDepth1: string;
-                textColorTextDepth2: string;
-                textColorTextDepth3: string;
                 textColorTextHover: string;
                 textColorTextPressed: string;
                 textColorTextFocus: string;
@@ -331,9 +348,8 @@ declare const _default: import("vue").DefineComponent<{
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;

package/lib/data-table/src/HeaderButton/FilterMenu.d.ts

@@ -105,9 +105,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -144,6 +148,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             borderColor: string;
             tdColorHover: string;
+            tdColorStriped: string;
             thColor: string;
             thColorHover: string;
             tdColor: string;
@@ -155,16 +160,18 @@ declare const _default: import("vue").DefineComponent<{
             thIconColorActive: string;
             borderColorModal: string;
             tdColorHoverModal: string;
+            tdColorStripedModal: string;
             thColorModal: string;
             thColorHoverModal: string;
             tdColorModal: string;
             borderColorPopover: string;
             tdColorHoverPopover: string;
+            tdColorStripedPopover: string;
             thColorPopover: string;
             thColorHoverPopover: string;
             tdColorPopover: string;
             boxShadowBefore: string;
-            boxShadowAfter: string;
+            boxShadowAfter: string; /** this branch is for compatibility */
             loadingColor: string;
             loadingSize: string;
             opacityLoading: string;
@@ -196,20 +203,30 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: number;
+                colorOpacitySecondaryHover: number;
+                colorOpacitySecondaryPressed: number;
+                colorSecondary: string;
+                colorSecondaryHover: string;
+                colorSecondaryPressed: string;
+                colorTertiary: string;
+                colorTertiaryHover: string;
+                colorTertiaryPressed: string;
+                colorQuaternary: string;
+                colorQuaternaryHover: string;
+                colorQuaternaryPressed: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
                 colorFocus: string;
                 colorDisabled: string;
                 textColor: string;
+                textColorTertiary: string;
                 textColorHover: string;
                 textColorPressed: string;
                 textColorFocus: string;
                 textColorDisabled: string;
                 textColorText: string;
-                textColorTextDepth1: string;
-                textColorTextDepth2: string;
-                textColorTextDepth3: string;
                 textColorTextHover: string;
                 textColorTextPressed: string;
                 textColorTextFocus: string;
@@ -356,9 +373,8 @@ declare const _default: import("vue").DefineComponent<{
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;

package/lib/data-table/src/TableParts/Body.d.ts

@@ -92,9 +92,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -131,6 +135,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             borderColor: string;
             tdColorHover: string;
+            tdColorStriped: string;
             thColor: string;
             thColorHover: string;
             tdColor: string;
@@ -142,11 +147,13 @@ declare const _default: import("vue").DefineComponent<{
             thIconColorActive: string;
             borderColorModal: string;
             tdColorHoverModal: string;
+            tdColorStripedModal: string;
             thColorModal: string;
             thColorHoverModal: string;
             tdColorModal: string;
             borderColorPopover: string;
             tdColorHoverPopover: string;
+            tdColorStripedPopover: string;
             thColorPopover: string;
             thColorHoverPopover: string;
             tdColorPopover: string;
@@ -183,20 +190,30 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: number;
+                colorOpacitySecondaryHover: number;
+                colorOpacitySecondaryPressed: number;
+                colorSecondary: string;
+                colorSecondaryHover: string;
+                colorSecondaryPressed: string;
+                colorTertiary: string;
+                colorTertiaryHover: string;
+                colorTertiaryPressed: string;
+                colorQuaternary: string;
+                colorQuaternaryHover: string;
+                colorQuaternaryPressed: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
                 colorFocus: string;
                 colorDisabled: string;
                 textColor: string;
+                textColorTertiary: string;
                 textColorHover: string;
                 textColorPressed: string;
                 textColorFocus: string;
                 textColorDisabled: string;
                 textColorText: string;
-                textColorTextDepth1: string;
-                textColorTextDepth2: string;
-                textColorTextDepth3: string;
                 textColorTextHover: string;
                 textColorTextPressed: string;
                 textColorTextFocus: string;
@@ -343,9 +360,8 @@ declare const _default: import("vue").DefineComponent<{
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;
@@ -960,7 +976,11 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     scrollX: import("vue").Ref<string | number | undefined>;
     cols: import("vue").Ref<ColItem[]>;
-    paginatedData: import("vue").Ref<TmNode[]>;
+    paginatedData: import("vue").ComputedRef<{
+        tmNode: TmNode;
+        key: import("treemate").Key;
+        striped: boolean;
+    }[]>;
     rawPaginatedData: import("vue").Ref<import("../interface").InternalRowData[]>;
     fixedColumnLeftMap: import("vue").Ref<Record<import("../interface").ColumnKey, {
         start: number;

package/lib/data-table/src/TableParts/Body.js

@@ -16,20 +16,34 @@ const Cell_1 = __importDefault(require("./Cell"));
 const ExpandTrigger_1 = __importDefault(require("./ExpandTrigger"));
 const BodyCheckbox_1 = __importDefault(require("./BodyCheckbox"));
 const Header_1 = __importDefault(require("./Header"));
-function flatten(rows, expandedRowKeys) {
+function flatten(rowInfos, expandedRowKeys) {
     const fRows = [];
     function traverse(rs) {
         rs.forEach((r) => {
             if (r.children && expandedRowKeys.has(r.key)) {
-                fRows.push(r);
+                fRows.push({
+                    tmNode: r,
+                    striped: false,
+                    key: r.key
+                });
                 traverse(r.children);
             }
             else {
-                fRows.push(r);
+                fRows.push({
+                    key: r.key,
+                    tmNode: r,
+                    striped: false
+                });
             }
         });
     }
-    traverse(rows);
+    rowInfos.forEach((rowInfo) => {
+        fRows.push(rowInfo);
+        const { children } = rowInfo.tmNode;
+        if (children && expandedRowKeys.has(rowInfo.key)) {
+            traverse(children);
+        }
+    });
     return fRows;
 }
 const VirtualListItemWrapper = (0, vue_1.defineComponent)({
@@ -64,7 +78,7 @@ exports.default = (0, vue_1.defineComponent)({
         flexHeight: Boolean
     },
     setup(props) {
-        const { mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, rightActiveFixedColKeyRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, scrollPartRef, mergedTableLayoutRef, hasChildrenRef, firstContentfulColIndexRef, indentRef, rowPropsRef, maxHeightRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck
+        const { mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, rightActiveFixedColKeyRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, scrollPartRef, mergedTableLayoutRef, hasChildrenRef, firstContentfulColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const scrollbarInstRef = (0, vue_1.ref)(null);
@@ -196,7 +210,24 @@ exports.default = (0, vue_1.defineComponent)({
         });
         return Object.assign({ componentId,
             scrollbarInstRef,
-            virtualListRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, paginatedData: paginatedDataRef, rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, mergedTableLayout: mergedTableLayoutRef, hasChildren: hasChildrenRef, firstContentfulColIndex: firstContentfulColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, setHeaderScrollLeft,
+            virtualListRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, paginatedData: (0, vue_1.computed)(() => {
+                const { value: striped } = stripedRef;
+                return paginatedDataRef.value.map(striped
+                    ? (tmNode, index) => {
+                        return {
+                            tmNode,
+                            key: tmNode.key,
+                            striped: index % 2 === 1
+                        };
+                    }
+                    : (tmNode) => {
+                        return {
+                            tmNode,
+                            key: tmNode.key,
+                            striped: false
+                        };
+                    });
+            }), rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, mergedTableLayout: mergedTableLayoutRef, hasChildren: hasChildrenRef, firstContentfulColIndex: firstContentfulColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, setHeaderScrollLeft,
             handleMouseenterTable,
             handleVirtualListScroll,
             handleVirtualListResize,
@@ -229,10 +260,6 @@ exports.default = (0, vue_1.defineComponent)({
                 const cordKey = {};
                 const { cols, paginatedData, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, componentId, showHeader, hasChildren, firstContentfulColIndex, rowProps, handleMouseenterTable, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleUpdateExpanded } = this;
                 const { length: colCount } = cols;
-                const rowIndexToKey = {};
-                paginatedData.forEach((tmNode, rowIndex) => {
-                    rowIndexToKey[rowIndex] = tmNode.key;
-                });
                 let mergedData;
                 // if there is children in data, we should expand mergedData first
                 const mergedPaginationData = hasChildren
@@ -244,10 +271,12 @@ exports.default = (0, vue_1.defineComponent)({
                         mergedData = [
                             ...mergedPaginationData,
                             ...summaryRows.map((row, i) => ({
-                                summary: true,
-                                rawNode: row,
+                                isSummaryRow: true,
                                 key: `__n_summary__${i}`,
-                                disabled: true
+                                tmNode: {
+                                    rawNode: row,
+                                    disabled: true
+                                }
                             }))
                         ];
                     }
@@ -255,10 +284,12 @@ exports.default = (0, vue_1.defineComponent)({
                         mergedData = [
                             ...mergedPaginationData,
                             {
-                                summary: true,
-                                rawNode: summaryRows,
+                                isSummaryRow: true,
                                 key: '__n_summary__',
-                                disabled: true
+                                tmNode: {
+                                    rawNode: summaryRows,
+                                    disabled: true
+                                }
                             }
                         ];
                     }
@@ -269,7 +300,25 @@ exports.default = (0, vue_1.defineComponent)({
                 const indentStyle = hasChildren
                     ? { width: (0, seemly_1.pxfy)(this.indent) }
                     : undefined;
-                const { length: rowCount } = mergedData;
+                // Tile the data of the expanded row
+                const displayedData = [];
+                mergedData.forEach((rowInfo) => {
+                    if (renderExpand && mergedExpandedRowKeySet.has(rowInfo.key)) {
+                        displayedData.push(rowInfo, {
+                            isExpandedRow: true,
+                            key: rowInfo.key,
+                            tmNode: rowInfo.tmNode
+                        });
+                    }
+                    else {
+                        displayedData.push(rowInfo);
+                    }
+                });
+                const { length: rowCount } = displayedData;
+                const rowIndexToKey = {};
+                paginatedData.forEach(({ tmNode }, rowIndex) => {
+                    rowIndexToKey[rowIndex] = tmNode.key;
+                });
                 const renderRow = (rowInfo, rowIndex, isVirtual) => {
                     if ('isExpandedRow' in rowInfo) {
                         const { tmNode: { key, rawNode } } = rowInfo;
@@ -281,9 +330,11 @@ exports.default = (0, vue_1.defineComponent)({
                                         `${mergedClsPrefix}-data-table-td--last-row`
                                 ], colspan: colCount }, renderExpand(rawNode, rowIndex))));
                     }
-                    const { rawNode: rowData, key: rowKey } = rowInfo;
-                    const isSummary = 'summary' in rowInfo;
-                    const expanded = mergedExpandedRowKeySet.has(rowInfo.key);
+                    const isSummary = 'isSummaryRow' in rowInfo;
+                    const striped = !isSummary && rowInfo.striped;
+                    const { tmNode, key: rowKey } = rowInfo;
+                    const { rawNode: rowData } = tmNode;
+                    const expanded = mergedExpandedRowKeySet.has(rowKey);
                     const props = rowProps ? rowProps(rowData, rowIndex) : undefined;
                     const mergedRowClassName = typeof rowClassName === 'string'
                         ? rowClassName
@@ -292,6 +343,7 @@ exports.default = (0, vue_1.defineComponent)({
                             this.hoverKey = rowKey;
                         }, key: rowKey, class: [
                             `${mergedClsPrefix}-data-table-tr`,
+                            striped && `${mergedClsPrefix}-data-table-tr--striped`,
                             mergedRowClassName
                         ] }, props), cols.map((col, colIndex) => {
                         var _a, _b, _c, _d, _e;
@@ -308,12 +360,12 @@ exports.default = (0, vue_1.defineComponent)({
                         const colKey = (0, utils_1.getColKey)(col);
                         const { rowSpan, colSpan } = column;
                         const mergedColSpan = isSummary
-                            ? ((_a = rowInfo.rawNode[colKey]) === null || _a === void 0 ? void 0 : _a.colSpan) || 1 // optional for #1276
+                            ? ((_a = rowInfo.tmNode.rawNode[colKey]) === null || _a === void 0 ? void 0 : _a.colSpan) || 1 // optional for #1276
                             : colSpan
                                 ? colSpan(rowData, rowIndex)
                                 : 1;
                         const mergedRowSpan = isSummary
-                            ? ((_b = rowInfo.rawNode[colKey]) === null || _b === void 0 ? void 0 : _b.rowSpan) || 1 // optional for #1276
+                            ? ((_b = rowInfo.tmNode.rawNode[colKey]) === null || _b === void 0 ? void 0 : _b.rowSpan) || 1 // optional for #1276
                             : rowSpan
                                 ? rowSpan(rowData, rowIndex)
                                 : 1;
@@ -373,31 +425,17 @@ exports.default = (0, vue_1.defineComponent)({
                             ] },
                             hasChildren && colIndex === firstContentfulColIndex
                                 ? [
-                                    (0, seemly_1.repeat)(isSummary ? 0 : rowInfo.level, (0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-indent`, style: indentStyle })),
-                                    isSummary || !rowInfo.children ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-expand-placeholder` })) : ((0, vue_1.h)(ExpandTrigger_1.default, { class: `${mergedClsPrefix}-data-table-expand-trigger`, clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => {
+                                    (0, seemly_1.repeat)(isSummary ? 0 : rowInfo.tmNode.level, (0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-indent`, style: indentStyle })),
+                                    isSummary || !rowInfo.tmNode.children ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-expand-placeholder` })) : ((0, vue_1.h)(ExpandTrigger_1.default, { class: `${mergedClsPrefix}-data-table-expand-trigger`, clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => {
                                             handleUpdateExpanded(rowKey);
                                         } }))
                                 ]
                                 : null,
-                            column.type === 'selection' ? (!isSummary ? ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.disabled, onUpdateChecked: (checked, e) => handleCheckboxUpdateChecked(rowInfo, checked, e.shiftKey) })) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable ||
+                            column.type === 'selection' ? (!isSummary ? ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, e) => handleCheckboxUpdateChecked(rowInfo.tmNode, checked, e.shiftKey) })) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable ||
                                 ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData, rowIndex)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey) })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { index: rowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme }))));
                     })));
                     return row;
                 };
-                // Tile the data of the expanded row
-                const displayedData = [];
-                mergedData.forEach((rowInfo) => {
-                    if (renderExpand && mergedExpandedRowKeySet.has(rowInfo.key)) {
-                        displayedData.push(rowInfo, {
-                            isExpandedRow: true,
-                            key: rowInfo.key,
-                            tmNode: rowInfo
-                        });
-                    }
-                    else {
-                        displayedData.push(rowInfo);
-                    }
-                });
                 if (!virtualScroll) {
                     return ((0, vue_1.h)("table", { class: `${mergedClsPrefix}-data-table-table`, onMouseleave: handleMouseleaveTable, onMouseenter: handleMouseenterTable, style: {
                             tableLayout: this.mergedTableLayout

package/lib/data-table/src/TableParts/BodyCheckbox.js

@@ -26,7 +26,7 @@ exports.default = (0, vue_1.defineComponent)({
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         return () => {
             const { rowKey } = props;
-            return ((0, vue_1.h)(checkbox_1.NCheckbox, { disabled: props.disabled, indeterminate: mergedInderminateRowKeySetRef.value.has(rowKey), checked: mergedCheckedRowKeySetRef.value.has(rowKey), onUpdateChecked: props.onUpdateChecked }));
+            return ((0, vue_1.h)(checkbox_1.NCheckbox, { privateInsideTable: true, disabled: props.disabled, indeterminate: mergedInderminateRowKeySetRef.value.has(rowKey), checked: mergedCheckedRowKeySetRef.value.has(rowKey), onUpdateChecked: props.onUpdateChecked }));
         };
     }
 });