naive-ui 2.21.2 → 2.22.0

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

@@ -1,16 +1,18 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { h, ref, defineComponent, inject, watchEffect, onUnmounted, computed } from 'vue';
+import { h, ref, defineComponent, inject, watchEffect, onUnmounted, computed, renderSlot, Fragment } from 'vue';
 import { pxfy, repeat } from 'seemly';
-import { VirtualList } from 'vueuc';
+import { VirtualList, VResizeObserver } from 'vueuc';
 import { c } from '../../../_utils/cssr';
 import { NScrollbar } from '../../../_internal';
 import { formatLength } from '../../../_utils';
+import { NEmpty } from '../../../empty';
 import { dataTableInjectionKey } from '../interface';
 import { createRowClassName, getColKey, isColumnSorting } from '../utils';
 import Cell from './Cell';
 import ExpandTrigger from './ExpandTrigger';
 import RenderSafeCheckbox from './BodyCheckbox';
 import TableHeader from './Header';
+import { useMemo } from 'vooks';
 function flatten(rowInfos, expandedRowKeys) {
     const fRows = [];
     function traverse(rs) {
@@ -70,14 +72,24 @@ export default defineComponent({
     props: {
         onResize: Function,
         showHeader: Boolean,
-        flexHeight: Boolean
+        flexHeight: Boolean,
+        bodyStyle: Object
     },
     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, stripedRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck
+        const { slots: dataTableSlots, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, scrollPartRef, mergedTableLayoutRef, hasChildrenRef, firstContentfulColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(dataTableInjectionKey);
         const scrollbarInstRef = ref(null);
         const virtualListRef = ref(null);
+        const emptyElRef = ref(null);
+        const emptyRef = useMemo(() => paginatedDataRef.value.length === 0);
+        // If header is not inside & empty is displayed, no table part would be
+        // shown. So to collect a body width, we need to put a ref on empty element
+        const shouldDisplaySomeTablePartRef = useMemo(() => props.showHeader || !emptyRef.value);
+        // If no body is shown, we shouldn't show scrollbar
+        const bodyShowHeaderOnlyRef = useMemo(() => {
+            return props.showHeader || emptyRef.value;
+        });
         let lastSelectedKey = '';
         const mergedExpandedRowKeySetRef = computed(() => {
             return new Set(mergedExpandedRowKeysRef.value);
@@ -114,6 +126,15 @@ export default defineComponent({
             lastSelectedKey = tmNode.key;
         }
         function getScrollContainer() {
+            if (!shouldDisplaySomeTablePartRef.value) {
+                const { value: emptyEl } = emptyElRef;
+                if (emptyEl) {
+                    return emptyEl;
+                }
+                else {
+                    return null;
+                }
+            }
             if (virtualScrollRef.value) {
                 return virtualListContainer();
             }
@@ -165,36 +186,47 @@ export default defineComponent({
         };
         // manually control shadow style to avoid rerender
         const style = c([
-            ({ props: cProps }) => c([
-                cProps.leftActiveFixedColKey === null
-                    ? null
-                    : c(`[data-n-id="${cProps.componentId}"] [data-col-key="${cProps.leftActiveFixedColKey}"]::after`, {
-                        boxShadow: 'var(--box-shadow-after)'
-                    }),
-                cProps.rightActiveFixedColKey === null
-                    ? null
-                    : c(`[data-n-id="${cProps.componentId}"] [data-col-key="${cProps.rightActiveFixedColKey}"]::before`, {
-                        boxShadow: 'var(--box-shadow-before)'
-                    })
-            ])
+            ({ props: cProps }) => {
+                const createActiveLeftFixedStyle = (leftActiveFixedColKey) => {
+                    if (leftActiveFixedColKey === null)
+                        return null;
+                    return c(`[data-n-id="${cProps.componentId}"] [data-col-key="${leftActiveFixedColKey}"]::after`, { boxShadow: 'var(--box-shadow-after)' });
+                };
+                const createActiveRightFixedStyle = (rightActiveFixedColKey) => {
+                    if (rightActiveFixedColKey === null)
+                        return null;
+                    return c(`[data-n-id="${cProps.componentId}"] [data-col-key="${rightActiveFixedColKey}"]::before`, { boxShadow: 'var(--box-shadow-before)' });
+                };
+                return c([
+                    createActiveLeftFixedStyle(cProps.leftActiveFixedColKey),
+                    createActiveRightFixedStyle(cProps.rightActiveFixedColKey),
+                    cProps.leftActiveFixedChildrenColKeys.map((leftActiveFixedColKey) => createActiveLeftFixedStyle(leftActiveFixedColKey)),
+                    cProps.rightActiveFixedChildrenColKeys.map((rightActiveFixedColKey) => createActiveRightFixedStyle(rightActiveFixedColKey))
+                ]);
+            }
         ]);
         let fixedStyleMounted = false;
         watchEffect(() => {
             const { value: leftActiveFixedColKey } = leftActiveFixedColKeyRef;
+            const { value: leftActiveFixedChildrenColKeys } = leftActiveFixedChildrenColKeysRef;
             const { value: rightActiveFixedColKey } = rightActiveFixedColKeyRef;
+            const { value: rightActiveFixedChildrenColKeys } = rightActiveFixedChildrenColKeysRef;
             if (!fixedStyleMounted &&
                 leftActiveFixedColKey === null &&
                 rightActiveFixedColKey === null) {
                 return;
             }
+            const cProps = {
+                leftActiveFixedColKey,
+                leftActiveFixedChildrenColKeys,
+                rightActiveFixedColKey,
+                rightActiveFixedChildrenColKeys,
+                componentId
+            };
             style.mount({
                 id: `n-${componentId}`,
                 force: true,
-                props: {
-                    leftActiveFixedColKey,
-                    rightActiveFixedColKey,
-                    componentId
-                }
+                props: cProps
             });
             fixedStyleMounted = true;
         });
@@ -203,9 +235,11 @@ export default defineComponent({
                 id: `n-${componentId}`
             });
         });
-        return Object.assign({ componentId,
+        return Object.assign({ dataTableSlots,
+            componentId,
             scrollbarInstRef,
-            virtualListRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, paginatedData: computed(() => {
+            virtualListRef,
+            emptyElRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, loading: loadingRef, bodyShowHeaderOnly: bodyShowHeaderOnlyRef, shouldDisplaySomeTablePart: shouldDisplaySomeTablePartRef, empty: emptyRef, paginatedData: computed(() => {
                 const { value: striped } = stripedRef;
                 return paginatedDataRef.value.map(striped
                     ? (tmNode, index) => {
@@ -247,13 +281,13 @@ export default defineComponent({
         };
         if (scrollX)
             contentStyle.width = '100%';
-        return (h(NScrollbar, { ref: "scrollbarInstRef", scrollable: scrollable || isBasicAutoLayout, class: `${mergedClsPrefix}-data-table-base-table-body`, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, contentStyle: contentStyle, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, horizontalRailStyle: { zIndex: 3 }, verticalRailStyle: { zIndex: 3 }, xScrollable: xScrollable, onScroll: virtualScroll ? undefined : this.handleTableBodyScroll, internalOnUpdateScrollLeft: setHeaderScrollLeft, onResize: onResize }, {
+        const tableNode = (h(NScrollbar, { ref: "scrollbarInstRef", scrollable: scrollable || isBasicAutoLayout, showScrollbar: !this.bodyShowHeaderOnly, class: `${mergedClsPrefix}-data-table-base-table-body`, style: this.bodyStyle, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, contentStyle: contentStyle, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, horizontalRailStyle: { zIndex: 3 }, verticalRailStyle: { zIndex: 3 }, xScrollable: xScrollable, onScroll: virtualScroll ? undefined : this.handleTableBodyScroll, internalOnUpdateScrollLeft: setHeaderScrollLeft, onResize: onResize }, {
             default: () => {
                 // coordinate to pass if there are cells that cross row & col
                 const cordToPass = {};
                 // coordinate to related hover keys
                 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 { cols, paginatedData, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, componentId, hasChildren, firstContentfulColIndex, rowProps, handleMouseenterTable, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleUpdateExpanded } = this;
                 const { length: colCount } = cols;
                 let mergedData;
                 // if there is children in data, we should expand mergedData first
@@ -338,6 +372,7 @@ export default defineComponent({
                             this.hoverKey = rowKey;
                         }, key: rowKey, class: [
                             `${mergedClsPrefix}-data-table-tr`,
+                            isSummary && `${mergedClsPrefix}-data-table-tr--summary`,
                             striped && `${mergedClsPrefix}-data-table-tr--striped`,
                             mergedRowClassName
                         ] }, props), cols.map((col, colIndex) => {
@@ -436,10 +471,10 @@ export default defineComponent({
                             tableLayout: this.mergedTableLayout
                         } },
                         h("colgroup", null, cols.map((col) => (h("col", { key: col.key, style: col.style })))),
-                        showHeader ? h(TableHeader, { discrete: false }) : null,
-                        h("tbody", { "data-n-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, rowIndex) => {
+                        this.showHeader ? h(TableHeader, { discrete: false }) : null,
+                        !this.empty ? (h("tbody", { "data-n-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, rowIndex) => {
                             return renderRow(rowInfo, rowIndex, false);
-                        }))));
+                        }))) : null));
                 }
                 else {
                     return (h(VirtualList, { ref: "virtualListRef", items: displayedData, itemSize: 28, visibleItemsTag: VirtualListItemWrapper, visibleItemsProps: {
@@ -454,5 +489,22 @@ export default defineComponent({
                 }
             }
         }));
+        if (this.empty) {
+            const createEmptyNode = () => (h("div", { class: [
+                    `${mergedClsPrefix}-data-table-empty`,
+                    this.loading && `${mergedClsPrefix}-data-table-empty--hide`
+                ], style: this.bodyStyle, ref: "emptyElRef" }, renderSlot(this.dataTableSlots, 'empty', undefined, () => [
+                h(NEmpty, { theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })
+            ])));
+            if (this.shouldDisplaySomeTablePart) {
+                return (h(Fragment, null,
+                    tableNode,
+                    createEmptyNode()));
+            }
+            else {
+                return (h(VResizeObserver, { onResize: this.onResize }, { default: createEmptyNode }));
+            }
+        }
+        return tableNode;
     }
 });

package/es/data-table/src/TableParts/Cell.d.ts

@@ -183,9 +183,9 @@ declare const _default: import("vue").DefineComponent<{
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
-                    colorOpacitySecondary: number;
-                    colorOpacitySecondaryHover: number;
-                    colorOpacitySecondaryPressed: number;
+                    colorOpacitySecondary: string;
+                    colorOpacitySecondaryHover: string;
+                    colorOpacitySecondaryPressed: string;
                     colorSecondary: string;
                     colorSecondaryHover: string;
                     colorSecondaryPressed: string;
@@ -1147,9 +1147,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;

package/es/data-table/src/TableParts/Header.d.ts

@@ -190,9 +190,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;

package/es/data-table/src/TableParts/Header.js

@@ -26,7 +26,7 @@ export default defineComponent({
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(dataTableInjectionKey);
         function handleCheckboxUpdateChecked() {
-            if (someRowsCheckedRef.value || allRowsCheckedRef.value) {
+            if (allRowsCheckedRef.value) {
                 doUncheckAll();
             }
             else {

package/es/data-table/src/interface.d.ts

@@ -1,5 +1,5 @@
 import { TreeNode } from 'treemate';
-import { CSSProperties, InjectionKey, Ref, VNodeChild, HTMLAttributes } from 'vue';
+import { CSSProperties, InjectionKey, Ref, VNodeChild, HTMLAttributes, Slots } from 'vue';
 import { EllipsisProps } from '../../ellipsis/src/Ellipsis';
 import { NLocale } from '../../locales';
 import { MergedTheme } from '../../_mixins';
@@ -100,6 +100,7 @@ export declare type DataTableSelectionOptions = Array<DataTableSelectionOption |
     onSelect: () => void;
 }>;
 export interface DataTableInjection {
+    slots: Slots;
     indentRef: Ref<number>;
     hasChildrenRef: Ref<boolean>;
     firstContentfulColIndexRef: Ref<number>;
@@ -115,7 +116,9 @@ export interface DataTableInjection {
     leftFixedColumnsRef: Ref<TableColumns>;
     rightFixedColumnsRef: Ref<TableColumns>;
     leftActiveFixedColKeyRef: Ref<ColumnKey | null>;
+    leftActiveFixedChildrenColKeysRef: Ref<ColumnKey[]>;
     rightActiveFixedColKeyRef: Ref<ColumnKey | null>;
+    rightActiveFixedChildrenColKeysRef: Ref<ColumnKey[]>;
     fixedColumnLeftMapRef: Ref<Record<ColumnKey, {
         start: number;
         end: number;

package/es/data-table/src/styles/index.cssr.js

@@ -53,11 +53,11 @@ export default c([cB('data-table', `
  --merged-th-color-hover: var(--th-color-hover);
  --merged-td-color-hover: var(--td-color-hover);
  --merged-td-color-striped: var(--td-color-striped);
- `, [cM('flex-height', [c('>', [cB('data-table-wrapper', `
+ `, [cB('data-table-wrapper', `
  flex-grow: 1;
  display: flex;
  flex-direction: column;
- `, [c('>', [cB('data-table-base-table', `
+ `), cM('flex-height', [c('>', [cB('data-table-wrapper', [c('>', [cB('data-table-base-table', `
  display: flex;
  flex-direction: column;
  flex-grow: 1;
@@ -93,7 +93,7 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  box-sizing: border-box;
  background-clip: padding-box;
  transition: background-color .3s var(--bezier);
- `, [cM('striped', 'background-color: var(--merged-td-color-striped);', [cB('data-table-td', 'background-color: var(--merged-td-color-striped);')]), c('&:hover', 'background-color: var(--merged-td-color-hover);', [cB('data-table-td', 'background-color: var(--merged-td-color-hover);')])]), cB('data-table-th', `
+ `, [cM('striped', 'background-color: var(--merged-td-color-striped);', [cB('data-table-td', 'background-color: var(--merged-td-color-striped);')]), cNotM('summary', [c('&:hover', 'background-color: var(--merged-td-color-hover);', [cB('data-table-td', 'background-color: var(--merged-td-color-hover);')])])]), cB('data-table-th', `
  padding: var(--th-padding);
  position: relative;
  text-align: start;
@@ -203,6 +203,7 @@ c('&::after', {
  padding: 0;
  line-height: 0;
  `), fixedColumnStyle]), cB('data-table-empty', `
+ box-sizing: border-box;
  padding: var(--empty-padding);
  flex-grow: 1;
  flex-shrink: 0;
@@ -236,15 +237,11 @@ c('&::after', {
   borderRight: '1px solid var(--merged-border-color)'
 }, [cM('last-col', {
   borderRight: '0 solid var(--merged-border-color)'
-})])]), cM('bordered', [cB('data-table-wrapper', {
-  border: '1px solid var(--merged-border-color)',
-  borderBottomLeftRadius: 'var(--border-radius)',
-  borderBottomRightRadius: 'var(--border-radius)'
-}), cB('data-table-td', [cM('last-row', {
-  borderBottom: '0 solid var(--merged-border-color)'
-})]), cB('data-table-base-table-body', `
- border-bottom-left-radius: calc(var(--border-radius) - 1px);
- border-bottom-right-radius: calc(var(--border-radius) - 1px);
+})])]), cM('bordered', [cB('data-table-wrapper', `
+ border: 1px solid var(--merged-border-color);
+ border-bottom-left-radius: var(--border-radius);
+ border-bottom-right-radius: var(--border-radius);
+ overflow: hidden;
  `)]), cB('data-table-base-table', [cM('transition-disabled', [cB('data-table-th', [c('&::after, &::before', {
   transition: 'none'
 })]), cB('data-table-td', [c('&::after, &::before', {

package/es/data-table/src/use-check.js

@@ -58,18 +58,22 @@ export function useCheck(props, data) {
         uncontrolledCheckedRowKeysRef.value = keys;
     }
     function doCheck(rowKey) {
+        if (props.loading)
+            return;
         doUpdateCheckedRowKeys(treeMateRef.value.check(rowKey, mergedCheckedRowKeysRef.value, {
             cascade: props.cascade
         }).checkedKeys);
     }
     function doUncheck(rowKey) {
+        if (props.loading)
+            return;
         doUpdateCheckedRowKeys(treeMateRef.value.uncheck(rowKey, mergedCheckedRowKeysRef.value, {
             cascade: props.cascade
         }).checkedKeys);
     }
     function doCheckAll(checkWholeTable = false) {
         const { value: column } = selectionColumnRef;
-        if (!column)
+        if (!column || props.loading)
             return;
         const rowKeysToCheck = [];
         (checkWholeTable
@@ -86,7 +90,7 @@ export function useCheck(props, data) {
     }
     function doUncheckAll(checkWholeTable = false) {
         const { value: column } = selectionColumnRef;
-        if (!column)
+        if (!column || props.loading)
             return;
         const rowKeysToUncheck = [];
         (checkWholeTable

package/es/data-table/src/use-scroll.d.ts

@@ -19,7 +19,9 @@ export declare function useScroll(props: DataTableSetupProps, { mainTableInstRef
     leftFixedColumnsRef: ComputedRef<TableColumn<any>[]>;
     rightFixedColumnsRef: ComputedRef<TableColumn<any>[]>;
     leftActiveFixedColKeyRef: Ref<ColumnKey | null>;
+    leftActiveFixedChildrenColKeysRef: Ref<ColumnKey[]>;
     rightActiveFixedColKeyRef: Ref<ColumnKey | null>;
+    rightActiveFixedChildrenColKeysRef: Ref<ColumnKey[]>;
     syncScrollState: () => void;
     handleTableBodyScroll: () => void;
     handleTableHeaderScroll: () => void;

package/es/data-table/src/use-scroll.js

@@ -6,7 +6,9 @@ import { getColWidth, getColKey } from './utils';
 export function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef, scrollPartRef }) {
     let scrollLeft = 0;
     const leftActiveFixedColKeyRef = ref(null);
+    const leftActiveFixedChildrenColKeysRef = ref([]);
     const rightActiveFixedColKeyRef = ref(null);
+    const rightActiveFixedChildrenColKeysRef = ref([]);
     const styleScrollXRef = computed(() => {
         return formatLength(props.scrollX);
     });
@@ -40,7 +42,8 @@ export function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyW
         const columns = {};
         let right = 0;
         function traverse(cols) {
-            cols.forEach((col) => {
+            for (let i = cols.length - 1; i >= 0; --i) {
+                const col = cols[i];
                 const positionInfo = { start: right, end: 0 };
                 columns[getColKey(col)] = positionInfo;
                 if ('children' in col) {
@@ -51,9 +54,9 @@ export function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyW
                     right += getColWidth(col) || 0;
                     positionInfo.end = right;
                 }
-            });
+            }
         }
-        traverse(rightFixedColumnsRef.value.reverse());
+        traverse(rightFixedColumnsRef.value);
         return columns;
     });
     function deriveActiveLeftFixedColumn() {
@@ -75,6 +78,18 @@ export function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyW
         }
         leftActiveFixedColKeyRef.value = leftActiveFixedColKey;
     }
+    function deriveActiveLeftFixedChildrenColumns() {
+        leftActiveFixedChildrenColKeysRef.value = [];
+        let activeLeftFixedColumn = props.columns.find((col) => getColKey(col) === leftActiveFixedColKeyRef.value);
+        while (activeLeftFixedColumn && 'children' in activeLeftFixedColumn) {
+            const length = activeLeftFixedColumn.children.length;
+            if (length === 0)
+                break;
+            const nextActiveLeftFixedColumn = activeLeftFixedColumn.children[length - 1];
+            leftActiveFixedChildrenColKeysRef.value.push(getColKey(nextActiveLeftFixedColumn));
+            activeLeftFixedColumn = nextActiveLeftFixedColumn;
+        }
+    }
     function deriveActiveRightFixedColumn() {
         var _a, _b;
         // target is header element
@@ -86,7 +101,7 @@ export function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyW
         let rightWidth = 0;
         let rightActiveFixedColKey = null;
         const { value: fixedColumnRightMap } = fixedColumnRightMapRef;
-        for (let i = 0; i < rightFixedColumns.length; ++i) {
+        for (let i = rightFixedColumns.length - 1; i >= 0; --i) {
             const key = getColKey(rightFixedColumns[i]);
             if (Math.round(scrollLeft +
                 (((_a = fixedColumnRightMap[key]) === null || _a === void 0 ? void 0 : _a.start) || 0) +
@@ -101,6 +116,17 @@ export function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyW
         }
         rightActiveFixedColKeyRef.value = rightActiveFixedColKey;
     }
+    function deriveActiveRightFixedChildrenColumns() {
+        rightActiveFixedChildrenColKeysRef.value = [];
+        let activeRightFixedColumn = props.columns.find((col) => getColKey(col) === rightActiveFixedColKeyRef.value);
+        while (activeRightFixedColumn &&
+            'children' in activeRightFixedColumn &&
+            activeRightFixedColumn.children.length) {
+            const nextActiveRightFixedColumn = activeRightFixedColumn.children[0];
+            rightActiveFixedChildrenColKeysRef.value.push(getColKey(nextActiveRightFixedColumn));
+            activeRightFixedColumn = nextActiveRightFixedColumn;
+        }
+    }
     function getScrollElements() {
         const header = mainTableInstRef.value
             ? mainTableInstRef.value.getHeaderElement()
@@ -157,7 +183,9 @@ export function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyW
             scrollLeft = body.scrollLeft;
         }
         deriveActiveLeftFixedColumn();
+        deriveActiveLeftFixedChildrenColumns();
         deriveActiveRightFixedColumn();
+        deriveActiveRightFixedChildrenColumns();
     }
     function setHeaderScrollLeft(left) {
         const { header } = getScrollElements();
@@ -176,7 +204,9 @@ export function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyW
         leftFixedColumnsRef,
         rightFixedColumnsRef,
         leftActiveFixedColKeyRef,
+        leftActiveFixedChildrenColKeysRef,
         rightActiveFixedColKeyRef,
+        rightActiveFixedChildrenColKeysRef,
         syncScrollState,
         handleTableBodyScroll,
         handleTableHeaderScroll,

package/es/data-table/src/use-table-data.js

@@ -18,6 +18,7 @@ export function useTableData(props, { dataRelatedColsRef }) {
     const treeMateRef = computed(() => {
         const { childrenKey } = props;
         return createTreeMate(props.data, {
+            ignoreEmptyChildren: true,
             getKey: props.rowKey,
             getChildren: (rowData) => rowData[childrenKey],
             getDisabled: (rowData) => {
@@ -185,11 +186,13 @@ export function useTableData(props, { dataRelatedColsRef }) {
     function mergedOnUpdatePageSize(pageSize) {
         const { pagination } = props;
         if (pagination) {
-            const { onPageSizeChange, 'onUpdate:pageSize': onUpdatePageSize } = pagination;
+            const { onPageSizeChange, 'onUpdate:pageSize': _onUpdatePageSize, onUpdatePageSize } = pagination;
             if (onPageSizeChange)
                 call(onPageSizeChange, pageSize);
             if (onUpdatePageSize)
                 call(onUpdatePageSize, pageSize);
+            if (_onUpdatePageSize)
+                call(_onUpdatePageSize, pageSize);
             doUpdatePageSize(pageSize);
         }
     }

package/es/data-table/styles/_common.js

@@ -8,7 +8,7 @@ export default {
     sorterSize: '15px',
     filterSize: '15px',
     paginationMargin: '12px 0 0 0',
-    emptyPadding: '16px 0',
+    emptyPadding: '48px 0',
     actionPadding: '8px 12px',
     actionButtonMargin: '0 8px 0 0'
 };

package/es/data-table/styles/light.d.ts

@@ -112,9 +112,9 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;