naive-ui 2.38.2 → 2.40.0

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

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const vueuc_1 = require("vueuc");
@@ -15,6 +14,7 @@ const _utils_1 = require("../../../_utils");
 const empty_1 = require("../../../empty");
 const interface_1 = require("../interface");
 const utils_1 = require("../utils");
+const context_1 = require("../../../config-provider/src/context");
 const Cell_1 = __importDefault(require("./Cell"));
 const ExpandTrigger_1 = __importDefault(require("./ExpandTrigger"));
 const BodyCheckbox_1 = __importDefault(require("./BodyCheckbox"));
@@ -72,7 +72,7 @@ const VirtualListItemWrapper = (0, vue_1.defineComponent)({
     render() {
         const { clsPrefix, id, cols, onMouseenter, onMouseleave } = this;
         return ((0, vue_1.h)("table", { style: { tableLayout: 'fixed' }, class: `${clsPrefix}-data-table-table`, onMouseenter: onMouseenter, onMouseleave: onMouseleave },
-            (0, vue_1.h)("colgroup", null, cols.map((col) => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
+            (0, vue_1.h)("colgroup", null, cols.map(col => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
             (0, vue_1.h)("tbody", { "data-n-id": id, class: `${clsPrefix}-data-table-tbody` }, this.$slots)));
     }
 });
@@ -85,9 +85,8 @@ exports.default = (0, vue_1.defineComponent)({
         bodyStyle: Object
     },
     setup(props) {
-        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-         } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
+        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, virtualScrollXRef, heightForRowRef, minRowHeightRef, componentId, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
+        const NConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey);
         const scrollbarInstRef = (0, vue_1.ref)(null);
         const virtualListRef = (0, vue_1.ref)(null);
         const emptyElRef = (0, vue_1.ref)(null);
@@ -114,9 +113,9 @@ exports.default = (0, vue_1.defineComponent)({
                 return;
             }
             if (shiftKey) {
-                const lastIndex = paginatedDataRef.value.findIndex((item) => item.key === lastSelectedKey);
+                const lastIndex = paginatedDataRef.value.findIndex(item => item.key === lastSelectedKey);
                 if (lastIndex !== -1) {
-                    const currentIndex = paginatedDataRef.value.findIndex((item) => item.key === tmNode.key);
+                    const currentIndex = paginatedDataRef.value.findIndex(item => item.key === tmNode.key);
                     const start = Math.min(lastIndex, currentIndex);
                     const end = Math.max(lastIndex, currentIndex);
                     const rowKeysToCheck = [];
@@ -232,11 +231,9 @@ exports.default = (0, vue_1.defineComponent)({
             scrollTo(arg0, arg1) {
                 var _a, _b;
                 if (virtualScrollRef.value) {
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                     (_a = virtualListRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg0, arg1);
                 }
                 else {
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                     (_b = scrollbarInstRef.value) === null || _b === void 0 ? void 0 : _b.scrollTo(arg0, arg1);
                 }
             }
@@ -257,8 +254,8 @@ exports.default = (0, vue_1.defineComponent)({
                 return (0, cssr_1.c)([
                     createActiveLeftFixedStyle(cProps.leftActiveFixedColKey),
                     createActiveRightFixedStyle(cProps.rightActiveFixedColKey),
-                    cProps.leftActiveFixedChildrenColKeys.map((leftActiveFixedColKey) => createActiveLeftFixedStyle(leftActiveFixedColKey)),
-                    cProps.rightActiveFixedChildrenColKeys.map((rightActiveFixedColKey) => createActiveRightFixedStyle(rightActiveFixedColKey))
+                    cProps.leftActiveFixedChildrenColKeys.map(leftActiveFixedColKey => createActiveLeftFixedStyle(leftActiveFixedColKey)),
+                    cProps.rightActiveFixedChildrenColKeys.map(rightActiveFixedColKey => createActiveRightFixedStyle(rightActiveFixedColKey))
                 ]);
             }
         ]);
@@ -268,9 +265,9 @@ exports.default = (0, vue_1.defineComponent)({
             const { value: leftActiveFixedChildrenColKeys } = leftActiveFixedChildrenColKeysRef;
             const { value: rightActiveFixedColKey } = rightActiveFixedColKeyRef;
             const { value: rightActiveFixedChildrenColKeys } = rightActiveFixedChildrenColKeysRef;
-            if (!fixedStyleMounted &&
-                leftActiveFixedColKey === null &&
-                rightActiveFixedColKey === null) {
+            if (!fixedStyleMounted
+                && leftActiveFixedColKey === null
+                && rightActiveFixedColKey === null) {
                 return;
             }
             const cProps = {
@@ -284,13 +281,15 @@ exports.default = (0, vue_1.defineComponent)({
                 id: `n-${componentId}`,
                 force: true,
                 props: cProps,
-                anchorMetaName: common_1.cssrAnchorMetaName
+                anchorMetaName: common_1.cssrAnchorMetaName,
+                parent: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.styleMountTarget
             });
             fixedStyleMounted = true;
         });
         (0, vue_1.onUnmounted)(() => {
             style.unmount({
-                id: `n-${componentId}`
+                id: `n-${componentId}`,
+                parent: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.styleMountTarget
             });
         });
         return Object.assign({ bodyWidth: bodyWidthRef, summaryPlacement: summaryPlacementRef, dataTableSlots,
@@ -325,7 +324,7 @@ exports.default = (0, vue_1.defineComponent)({
                     data,
                     hasChildren
                 };
-            }), rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, mergedTableLayout: mergedTableLayoutRef, childTriggerColIndex: childTriggerColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, loadingKeySet: loadingKeySetRef, expandable: expandableRef, stickyExpandedRows: stickyExpandedRowsRef, renderExpandIcon: renderExpandIconRef, scrollbarProps: scrollbarPropsRef, setHeaderScrollLeft,
+            }), rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, virtualScrollX: virtualScrollXRef, heightForRow: heightForRowRef, minRowHeight: minRowHeightRef, mergedTableLayout: mergedTableLayoutRef, childTriggerColIndex: childTriggerColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, loadingKeySet: loadingKeySetRef, expandable: expandableRef, stickyExpandedRows: stickyExpandedRowsRef, renderExpandIcon: renderExpandIconRef, scrollbarProps: scrollbarPropsRef, setHeaderScrollLeft,
             handleVirtualListScroll,
             handleVirtualListResize,
             handleMouseleaveTable,
@@ -357,7 +356,7 @@ exports.default = (0, vue_1.defineComponent)({
                 const cordToPass = {};
                 // coordinate to related hover keys
                 const cordKey = {};
-                const { cols, paginatedDataAndInfo, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, stickyExpandedRows, componentId, childTriggerColIndex, expandable, rowProps, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleRadioUpdateChecked, handleUpdateExpanded } = this;
+                const { cols, paginatedDataAndInfo, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, stickyExpandedRows, componentId, childTriggerColIndex, expandable, rowProps, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleRadioUpdateChecked, handleUpdateExpanded, heightForRow, minRowHeight, virtualScrollX } = this;
                 const { length: colCount } = cols;
                 let mergedData;
                 // if there is children in data, we should expand mergedData first
@@ -377,8 +376,8 @@ exports.default = (0, vue_1.defineComponent)({
                             },
                             index: -1
                         }));
-                        mergedData =
-                            this.summaryPlacement === 'top'
+                        mergedData
+                            = this.summaryPlacement === 'top'
                                 ? [...summaryRowData, ...mergedPaginationData]
                                 : [...mergedPaginationData, ...summaryRowData];
                     }
@@ -392,8 +391,8 @@ exports.default = (0, vue_1.defineComponent)({
                             },
                             index: -1
                         };
-                        mergedData =
-                            this.summaryPlacement === 'top'
+                        mergedData
+                            = this.summaryPlacement === 'top'
                                 ? [summaryRowData, ...mergedPaginationData]
                                 : [...mergedPaginationData, summaryRowData];
                     }
@@ -407,9 +406,9 @@ exports.default = (0, vue_1.defineComponent)({
                 // Tile the data of the expanded row
                 const displayedData = [];
                 mergedData.forEach((rowInfo) => {
-                    if (renderExpand &&
-                        mergedExpandedRowKeySet.has(rowInfo.key) &&
-                        (!expandable || expandable(rowInfo.tmNode.rawNode))) {
+                    if (renderExpand
+                        && mergedExpandedRowKeySet.has(rowInfo.key)
+                        && (!expandable || expandable(rowInfo.tmNode.rawNode))) {
                         displayedData.push(rowInfo, {
                             isExpandedRow: true,
                             key: `${rowInfo.key}-expand`, // solve key repeat of the expanded row
@@ -428,7 +427,24 @@ exports.default = (0, vue_1.defineComponent)({
                 });
                 const bodyWidth = stickyExpandedRows ? this.bodyWidth : null;
                 const bodyWidthPx = bodyWidth === null ? undefined : `${bodyWidth}px`;
-                const renderRow = (rowInfo, displayedRowIndex, isVirtual) => {
+                const CellComponent = (this.virtualScrollX ? 'div' : 'td');
+                let leftFixedColsCount = 0;
+                let rightFixedColsCount = 0;
+                if (virtualScrollX) {
+                    cols.forEach((col) => {
+                        if (col.column.fixed === 'left') {
+                            leftFixedColsCount++;
+                        }
+                        else if (col.column.fixed === 'right') {
+                            rightFixedColsCount++;
+                        }
+                    });
+                }
+                const renderRow = ({ 
+                // Normal
+                rowInfo, displayedRowIndex, isVirtual, 
+                // Virtual X
+                isVirtualX, startColIndex, endColIndex, getLeft }) => {
                     const { index: actualRowIndex } = rowInfo;
                     if ('isExpandedRow' in rowInfo) {
                         const { tmNode: { key, rawNode } } = rowInfo;
@@ -436,8 +452,8 @@ exports.default = (0, vue_1.defineComponent)({
                             (0, vue_1.h)("td", { class: [
                                     `${mergedClsPrefix}-data-table-td`,
                                     `${mergedClsPrefix}-data-table-td--last-col`,
-                                    displayedRowIndex + 1 === rowCount &&
-                                        `${mergedClsPrefix}-data-table-td--last-row`
+                                    displayedRowIndex + 1 === rowCount
+                                        && `${mergedClsPrefix}-data-table-td--last-row`
                                 ], colspan: colCount }, stickyExpandedRows ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-expand`, style: {
                                     width: bodyWidthPx
                                 } }, renderExpand(rawNode, actualRowIndex))) : (renderExpand(rawNode, actualRowIndex)))));
@@ -453,16 +469,22 @@ exports.default = (0, vue_1.defineComponent)({
                     const mergedRowClassName = typeof rowClassName === 'string'
                         ? rowClassName
                         : (0, utils_1.createRowClassName)(rowData, actualRowIndex, rowClassName);
-                    const row = ((0, vue_1.h)("tr", Object.assign({ onMouseenter: () => {
-                            this.hoverKey = rowKey;
-                        }, key: rowKey, class: [
-                            `${mergedClsPrefix}-data-table-tr`,
-                            isSummary && `${mergedClsPrefix}-data-table-tr--summary`,
-                            striped && `${mergedClsPrefix}-data-table-tr--striped`,
-                            expanded && `${mergedClsPrefix}-data-table-tr--expanded`,
-                            mergedRowClassName
-                        ] }, props), cols.map((col, colIndex) => {
+                    const iteratedCols = isVirtualX
+                        ? cols.filter((col, index) => {
+                            if (startColIndex <= index && index <= endColIndex)
+                                return true;
+                            if (col.column.fixed) {
+                                return true;
+                            }
+                            return false;
+                        })
+                        : cols;
+                    const virtualXRowHeight = isVirtualX
+                        ? (0, seemly_1.pxfy)((heightForRow === null || heightForRow === void 0 ? void 0 : heightForRow(rowData, actualRowIndex)) || minRowHeight)
+                        : undefined;
+                    const cells = iteratedCols.map((col) => {
                         var _a, _b, _c, _d, _e;
+                        const colIndex = col.index;
                         if (displayedRowIndex in cordToPass) {
                             const cordOfRowToPass = cordToPass[displayedRowIndex];
                             const indexInCordOfRowToPass = cordOfRowToPass.indexOf(colIndex);
@@ -517,42 +539,55 @@ exports.default = (0, vue_1.defineComponent)({
                         const indentOffsetStyle = {
                             '--indent-offset': ''
                         };
-                        return ((0, vue_1.h)("td", Object.assign({}, resolvedCellProps, { key: colKey, style: [
+                        const FinalCellComponent = column.fixed ? 'td' : CellComponent;
+                        return ((0, vue_1.h)(FinalCellComponent, Object.assign({}, resolvedCellProps, { key: colKey, style: [
                                 {
                                     textAlign: column.align || undefined,
-                                    left: (0, seemly_1.pxfy)((_c = fixedColumnLeftMap[colKey]) === null || _c === void 0 ? void 0 : _c.start),
-                                    right: (0, seemly_1.pxfy)((_d = fixedColumnRightMap[colKey]) === null || _d === void 0 ? void 0 : _d.start)
+                                    width: (0, seemly_1.pxfy)(column.width)
                                 },
+                                isVirtualX && {
+                                    height: virtualXRowHeight
+                                },
+                                isVirtualX && !column.fixed
+                                    ? {
+                                        position: 'absolute',
+                                        left: (0, seemly_1.pxfy)(getLeft(colIndex)),
+                                        top: 0,
+                                        bottom: 0
+                                    }
+                                    : {
+                                        left: (0, seemly_1.pxfy)((_c = fixedColumnLeftMap[colKey]) === null || _c === void 0 ? void 0 : _c.start),
+                                        right: (0, seemly_1.pxfy)((_d = fixedColumnRightMap[colKey]) === null || _d === void 0 ? void 0 : _d.start)
+                                    },
                                 indentOffsetStyle,
                                 (resolvedCellProps === null || resolvedCellProps === void 0 ? void 0 : resolvedCellProps.style) || ''
                             ], colspan: mergedColSpan, rowspan: isVirtual ? undefined : mergedRowSpan, "data-col-key": colKey, class: [
                                 `${mergedClsPrefix}-data-table-td`,
                                 column.className,
                                 resolvedCellProps === null || resolvedCellProps === void 0 ? void 0 : resolvedCellProps.class,
-                                isSummary &&
-                                    `${mergedClsPrefix}-data-table-td--summary`,
-                                ((hoverKey !== null &&
-                                    cordKey[displayedRowIndex][colIndex].includes(hoverKey)) ||
-                                    (0, utils_1.isColumnSorting)(column, mergedSortState)) &&
-                                    `${mergedClsPrefix}-data-table-td--hover`,
-                                column.fixed &&
-                                    `${mergedClsPrefix}-data-table-td--fixed-${column.fixed}`,
-                                column.align &&
-                                    `${mergedClsPrefix}-data-table-td--${column.align}-align`,
-                                column.type === 'selection' &&
-                                    `${mergedClsPrefix}-data-table-td--selection`,
-                                column.type === 'expand' &&
-                                    `${mergedClsPrefix}-data-table-td--expand`,
-                                isLastCol &&
-                                    `${mergedClsPrefix}-data-table-td--last-col`,
-                                isLastRow &&
-                                    `${mergedClsPrefix}-data-table-td--last-row`
+                                isSummary && `${mergedClsPrefix}-data-table-td--summary`,
+                                hoverKey !== null
+                                    && cordKey[displayedRowIndex][colIndex].includes(hoverKey)
+                                    && `${mergedClsPrefix}-data-table-td--hover`,
+                                (0, utils_1.isColumnSorting)(column, mergedSortState)
+                                    && `${mergedClsPrefix}-data-table-td--sorting`,
+                                column.fixed
+                                    && `${mergedClsPrefix}-data-table-td--fixed-${column.fixed}`,
+                                column.align
+                                    && `${mergedClsPrefix}-data-table-td--${column.align}-align`,
+                                column.type === 'selection'
+                                    && `${mergedClsPrefix}-data-table-td--selection`,
+                                column.type === 'expand'
+                                    && `${mergedClsPrefix}-data-table-td--expand`,
+                                isLastCol && `${mergedClsPrefix}-data-table-td--last-col`,
+                                isLastRow && `${mergedClsPrefix}-data-table-td--last-row`
                             ] }),
                             hasChildren && colIndex === childTriggerColIndex
                                 ? [
-                                    (0, seemly_1.repeat)((indentOffsetStyle['--indent-offset'] =
-                                        isSummary ? 0 : rowInfo.tmNode.level), (0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-indent`, style: indentStyle })),
-                                    isSummary || rowInfo.tmNode.isLeaf ? ((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, renderExpandIcon: this.renderExpandIcon, loading: loadingKeySet.has(rowInfo.key), onClick: () => {
+                                    (0, seemly_1.repeat)((indentOffsetStyle['--indent-offset'] = isSummary
+                                        ? 0
+                                        : rowInfo.tmNode.level), (0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-indent`, style: indentStyle })),
+                                    isSummary || rowInfo.tmNode.isLeaf ? ((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, rowData: rowData, renderExpandIcon: this.renderExpandIcon, loading: loadingKeySet.has(rowInfo.key), onClick: () => {
                                             handleUpdateExpanded(rowKey, rowInfo.tmNode);
                                         } }))
                                 ]
@@ -561,31 +596,85 @@ exports.default = (0, vue_1.defineComponent)({
                                     handleRadioUpdateChecked(rowInfo.tmNode);
                                 } })) : ((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)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, renderExpandIcon: this.renderExpandIcon, onClick: () => {
+                                } }))) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable || ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, rowData: rowData, expanded: expanded, renderExpandIcon: this.renderExpandIcon, onClick: () => {
                                     handleUpdateExpanded(rowKey, null);
                                 } })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { clsPrefix: mergedClsPrefix, index: actualRowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme, renderCell: this.renderCell }))));
-                    })));
+                    });
+                    if (isVirtualX) {
+                        if (leftFixedColsCount && rightFixedColsCount) {
+                            cells.splice(leftFixedColsCount, 0, (0, vue_1.h)("td", { colspan: cols.length - leftFixedColsCount - rightFixedColsCount, style: {
+                                    pointerEvents: 'none',
+                                    visibility: 'hidden',
+                                    height: 0
+                                } }));
+                        }
+                    }
+                    const row = ((0, vue_1.h)("tr", Object.assign({ onMouseenter: () => {
+                            this.hoverKey = rowKey;
+                        }, key: rowKey, class: [
+                            `${mergedClsPrefix}-data-table-tr`,
+                            isSummary && `${mergedClsPrefix}-data-table-tr--summary`,
+                            striped && `${mergedClsPrefix}-data-table-tr--striped`,
+                            expanded && `${mergedClsPrefix}-data-table-tr--expanded`,
+                            mergedRowClassName,
+                            props === null || props === void 0 ? void 0 : props.class
+                        ], style: props === null || props === void 0 ? void 0 : props.style }, props), cells));
                     return row;
                 };
                 if (!virtualScroll) {
                     return ((0, vue_1.h)("table", { class: `${mergedClsPrefix}-data-table-table`, onMouseleave: handleMouseleaveTable, style: {
                             tableLayout: this.mergedTableLayout
                         } },
-                        (0, vue_1.h)("colgroup", null, cols.map((col) => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
+                        (0, vue_1.h)("colgroup", null, cols.map(col => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
                         this.showHeader ? (0, vue_1.h)(Header_1.default, { discrete: false }) : null,
                         !this.empty ? ((0, vue_1.h)("tbody", { "data-n-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, displayedRowIndex) => {
-                            return renderRow(rowInfo, displayedRowIndex, false);
+                            return renderRow({
+                                rowInfo,
+                                displayedRowIndex,
+                                isVirtual: false,
+                                isVirtualX: false,
+                                startColIndex: -1,
+                                endColIndex: -1,
+                                getLeft(_index) {
+                                    return -1;
+                                }
+                            });
                         }))) : null));
                 }
                 else {
-                    return ((0, vue_1.h)(vueuc_1.VirtualList, { ref: "virtualListRef", items: displayedData, itemSize: 28, visibleItemsTag: VirtualListItemWrapper, visibleItemsProps: {
+                    return ((0, vue_1.h)(vueuc_1.VirtualList, { ref: "virtualListRef", items: displayedData, itemSize: this.minRowHeight, visibleItemsTag: VirtualListItemWrapper, visibleItemsProps: {
                             clsPrefix: mergedClsPrefix,
                             id: componentId,
                             cols,
                             onMouseleave: handleMouseleaveTable
-                        }, showScrollbar: false, onResize: this.handleVirtualListResize, onScroll: this.handleVirtualListScroll, itemsStyle: contentStyle, itemResizable: true }, {
-                        default: ({ item, index }) => renderRow(item, index, true)
+                        }, showScrollbar: false, onResize: this.handleVirtualListResize, onScroll: this.handleVirtualListScroll, itemsStyle: contentStyle, itemResizable: !virtualScrollX, columns: cols, renderItemWithCols: virtualScrollX
+                            ? ({ itemIndex, item, startColIndex, endColIndex, getLeft }) => {
+                                return renderRow({
+                                    displayedRowIndex: itemIndex,
+                                    isVirtual: true,
+                                    isVirtualX: true,
+                                    rowInfo: item,
+                                    startColIndex,
+                                    endColIndex,
+                                    getLeft
+                                });
+                            }
+                            : undefined }, {
+                        default: ({ item, index, renderedItemWithCols }) => {
+                            if (renderedItemWithCols)
+                                return renderedItemWithCols;
+                            return renderRow({
+                                rowInfo: item,
+                                displayedRowIndex: index,
+                                isVirtual: true,
+                                isVirtualX: false,
+                                startColIndex: 0,
+                                endColIndex: 0,
+                                getLeft(_index) {
+                                    return 0;
+                                }
+                            });
+                        }
                     }));
                 }
             }

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

@@ -1,4 +1,3 @@
-/// <reference types="vue/jsx" />
 import { type PropType } from 'vue';
 import { type RowKey } from '../interface';
 declare const _default: import("vue").DefineComponent<{

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

@@ -21,9 +21,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup(props) {
-        const { mergedCheckedRowKeySetRef, mergedInderminateRowKeySetRef
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-         } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
+        const { mergedCheckedRowKeySetRef, mergedInderminateRowKeySetRef } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         return () => {
             const { rowKey } = props;
             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 }));

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

@@ -1,4 +1,3 @@
-/// <reference types="vue/jsx" />
 import { type PropType } from 'vue';
 import { type RowKey } from '../interface';
 declare const _default: import("vue").DefineComponent<{

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

@@ -21,9 +21,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup(props) {
-        const { mergedCheckedRowKeySetRef, componentId
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-         } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
+        const { mergedCheckedRowKeySetRef, componentId } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         return () => {
             const { rowKey } = props;
             return ((0, vue_1.h)(radio_1.NRadio, { name: componentId, disabled: props.disabled, checked: mergedCheckedRowKeySetRef.value.has(rowKey), onUpdateChecked: props.onUpdateChecked }));