naive-ui 2.21.5 → 2.23.2

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

@@ -38,10 +38,9 @@ exports.default = (0, vue_1.defineComponent)({
                 cell = (0, lodash_1.get)(row, key);
             }
         }
-        const tooltip = typeof ellipsis === 'object' ? ellipsis.tooltip : undefined;
-        if (tooltip) {
+        if (ellipsis && typeof ellipsis === 'object') {
             const { mergedTheme } = this;
-            return ((0, vue_1.h)(ellipsis_1.NEllipsis, { tooltip: tooltip, theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }, { default: () => cell }));
+            return ((0, vue_1.h)(ellipsis_1.NEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), { default: () => cell }));
         }
         return cell;
     }

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

@@ -31,7 +31,7 @@ exports.default = (0, vue_1.defineComponent)({
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         function handleCheckboxUpdateChecked() {
-            if (someRowsCheckedRef.value || allRowsCheckedRef.value) {
+            if (allRowsCheckedRef.value) {
                 doUncheckAll();
             }
             else {
@@ -110,7 +110,7 @@ exports.default = (0, vue_1.defineComponent)({
                     column.type === 'selection' ? ((0, vue_1.h)(vue_1.Fragment, null,
                         (0, vue_1.h)(checkbox_1.NCheckbox, { key: currentPage, privateInsideTable: true, checked: allRowsChecked, indeterminate: someRowsChecked, disabled: headerCheckboxDisabled, onUpdateChecked: handleCheckboxUpdateChecked }),
                         checkOptions ? ((0, vue_1.h)(SelectionMenu_1.default, { clsPrefix: mergedClsPrefix })) : null)) : ellipsis === true || (ellipsis && !ellipsis.tooltip) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-th__ellipsis` }, renderTitle(column))) // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-                        : ellipsis && ellipsis.tooltip ? ((0, vue_1.h)(ellipsis_1.NEllipsis, { tooltip: ellipsis.tooltip, theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }, {
+                        : ellipsis && typeof ellipsis === 'object' ? ((0, vue_1.h)(ellipsis_1.NEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), {
                             default: () => renderTitle(column)
                         })) : (renderTitle(column)),
                     (0, utils_1.isColumnSortable)(column) ? ((0, vue_1.h)(SortButton_1.default, { column: column })) : null,

package/lib/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/lib/data-table/src/styles/index.cssr.js

@@ -15,76 +15,76 @@ const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transi
 const cssr_1 = require("../../../_utils/cssr");
 
 const fixedColumnStyle = createFixedColumnStyle(); // vars:
-// --font-size
-// --th-padding
-// --td-padding
-// --bezier
-// --border-radius
-// --line-height
-// --border-color
-// --border-color-modal
-// --border-color-popover
-// --th-color
-// --th-color-hover
-// --th-color-modal
-// --th-color-hover-modal
-// --th-color-popover
-// --th-color-hover-popover
-// --td-color
-// --td-color-hover
-// --td-color-modal
-// --td-color-hover-modal
-// --td-color-popover
-// --td-color-hover-popover
-// --th-text-color
-// --td-text-color
-// --th-font-weight
-// --th-button-color-hover
-// --th-icon-color
-// --th-icon-color-active
-// --filter-size
-// --action-divider-color
-// --action-padding
-// --action-button-margin
-// --pagination-margin
-// --empty-padding
-// --sorter-size
-// --loading-size
-// --loading-color
-// --opacity-loading
-// --box-shadow-before used in Body.tsx
-// --box-shadow-after used in Body.tsx
+// --n-font-size
+// --n-th-padding
+// --n-td-padding
+// --n-bezier
+// --n-border-radius
+// --n-line-height
+// --n-border-color
+// --n-border-color-modal
+// --n-border-color-popover
+// --n-th-color
+// --n-th-color-hover
+// --n-th-color-modal
+// --n-th-color-hover-modal
+// --n-th-color-popover
+// --n-th-color-hover-popover
+// --n-td-color
+// --n-td-color-hover
+// --n-td-color-modal
+// --n-td-color-hover-modal
+// --n-td-color-popover
+// --n-td-color-hover-popover
+// --n-th-text-color
+// --n-td-text-color
+// --n-th-font-weight
+// --n-th-button-color-hover
+// --n-th-icon-color
+// --n-th-icon-color-active
+// --n-filter-size
+// --n-action-divider-color
+// --n-action-padding
+// --n-action-button-margin
+// --n-pagination-margin
+// --n-empty-padding
+// --n-sorter-size
+// --n-loading-size
+// --n-loading-color
+// --n-opacity-loading
+// --n-box-shadow-before used in Body.tsx
+// --n-box-shadow-after used in Body.tsx
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  width: 100%;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  display: flex;
  flex-direction: column;
  position: relative;
- --merged-th-color: var(--th-color);
- --merged-td-color: var(--td-color);
- --merged-border-color: var(--border-color);
- --merged-th-color-hover: var(--th-color-hover);
- --merged-td-color-hover: var(--td-color-hover);
- --merged-td-color-striped: var(--td-color-striped);
- `, [(0, cssr_1.cM)('flex-height', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('data-table-wrapper', `
+ --n-merged-th-color: var(--n-th-color);
+ --n-merged-td-color: var(--n-td-color);
+ --n-merged-border-color: var(--n-border-color);
+ --n-merged-th-color-hover: var(--n-th-color-hover);
+ --n-merged-td-color-hover: var(--n-td-color-hover);
+ --n-merged-td-color-striped: var(--n-td-color-striped);
+ `, [(0, cssr_1.cB)('data-table-wrapper', `
  flex-grow: 1;
  display: flex;
  flex-direction: column;
- `, [(0, cssr_1.c)('>', [(0, cssr_1.cB)('data-table-base-table', `
+ `), (0, cssr_1.cM)('flex-height', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('data-table-wrapper', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('data-table-base-table', `
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  `, [(0, cssr_1.c)('>', [(0, cssr_1.cB)('data-table-base-table-body', 'flex-basis: 0;', [// last-child means there is no empty icon
 // body is a scrollbar, we need to override height 100%
 (0, cssr_1.c)('&:last-child', 'flex-grow: 1;')])])])])])])]), (0, cssr_1.c)('>', [(0, cssr_1.cB)('base-loading', `
- color: var(--loading-color);
- font-size: var(--loading-size);
+ color: var(--n-loading-color);
+ font-size: var(--n-loading-size);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  `, [(0, fade_in_scale_up_cssr_1.default)({
   originalTransform: 'translateX(-50%) translateY(-50%)'
 })])]), (0, cssr_1.cB)('data-table-expand-trigger', 'cursor: pointer;'), (0, cssr_1.cB)('data-table-expand-placeholder', `
@@ -101,26 +101,26 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  font-size: 16px;
  vertical-align: -0.2em;
  `), (0, cssr_1.cB)('data-table-thead', {
-  transition: 'background-color .3s var(--bezier)',
-  backgroundColor: 'var(--merged-th-color)'
+  transition: 'background-color .3s var(--n-bezier)',
+  backgroundColor: 'var(--n-merged-th-color)'
 }), (0, cssr_1.cB)('data-table-tr', `
  box-sizing: border-box;
  background-clip: padding-box;
- transition: background-color .3s var(--bezier);
- `, [(0, cssr_1.cM)('striped', 'background-color: var(--merged-td-color-striped);', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--merged-td-color-striped);')]), (0, cssr_1.c)('&:hover', 'background-color: var(--merged-td-color-hover);', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--merged-td-color-hover);')])]), (0, cssr_1.cB)('data-table-th', `
- padding: var(--th-padding);
+ transition: background-color .3s var(--n-bezier);
+ `, [(0, cssr_1.cM)('striped', 'background-color: var(--n-merged-td-color-striped);', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--n-merged-td-color-striped);')]), (0, cssr_1.cNotM)('summary', [(0, cssr_1.c)('&:hover', 'background-color: var(--n-merged-td-color-hover);', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--n-merged-td-color-hover);')])])]), (0, cssr_1.cB)('data-table-th', `
+ padding: var(--n-th-padding);
  position: relative;
  text-align: start;
  box-sizing: border-box;
- background-color: var(--merged-th-color);
- border-color: var(--merged-border-color);
- border-bottom: 1px solid var(--merged-border-color);
- color: var(--th-text-color);
+ background-color: var(--n-merged-th-color);
+ border-color: var(--n-merged-border-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
+ color: var(--n-th-text-color);
  transition:
- border-color .3s var(--bezier),
- color .3s var(--bezier),
- background-color .3s var(--bezier);
- font-weight: var(--th-font-weight);
+ border-color .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ font-weight: var(--n-th-font-weight);
  `, [(0, cssr_1.cM)('filterable', {
   paddingRight: '36px'
 }), fixedColumnStyle, (0, cssr_1.cM)('selection', `
@@ -136,30 +136,30 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  white-space: nowrap;
  max-width: 100%;
  `), (0, cssr_1.cM)('hover', {
-  backgroundColor: 'var(--merged-th-color-hover)'
+  backgroundColor: 'var(--n-merged-th-color-hover)'
 }), (0, cssr_1.cM)('sortable', {
   cursor: 'pointer'
 }, [(0, cssr_1.cE)('ellipsis', {
   maxWidth: 'calc(100% - 18px)'
 }), (0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--merged-th-color-hover)'
+  backgroundColor: 'var(--n-merged-th-color-hover)'
 })]), (0, cssr_1.cB)('data-table-sorter', `
- height: var(--sorter-size);
- width: var(--sorter-size);
+ height: var(--n-sorter-size);
+ width: var(--n-sorter-size);
  margin-left: 4px;
  position: relative;
  display: inline-flex;
  vertical-align: -0.2em;
- color: var(--th-icon-color);
+ color: var(--n-th-icon-color);
  transition: 
- transform .3s var(--bezier),
- color .3s var(--bezier);
+ transform .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('desc', {
   transform: 'rotate(0)'
 }), (0, cssr_1.cM)('asc', {
   transform: 'rotate(-180deg)'
 }), (0, cssr_1.cM)('asc, desc', {
-  color: 'var(--th-icon-color-active)'
+  color: 'var(--n-th-icon-color-active)'
 })]), (0, cssr_1.cB)('data-table-filter', `
  position: absolute;
  z-index: auto;
@@ -172,32 +172,32 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  justify-content: center;
  align-items: center;
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
- font-size: var(--filter-size);
- color: var(--th-icon-color);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
+ font-size: var(--n-filter-size);
+ color: var(--n-th-icon-color);
  `, [(0, cssr_1.c)('&:hover', `
- background-color: var(--th-button-color-hover);
+ background-color: var(--n-th-button-color-hover);
  `), (0, cssr_1.cM)('show', `
- background-color: var(--th-button-color-hover);
+ background-color: var(--n-th-button-color-hover);
  `), (0, cssr_1.cM)('active', `
- background-color: var(--th-button-color-hover);
- color: var(--th-icon-color-active);
+ background-color: var(--n-th-button-color-hover);
+ color: var(--n-th-icon-color-active);
  `)])]), (0, cssr_1.cB)('data-table-td', `
- padding: var(--td-padding);
+ padding: var(--n-td-padding);
  text-align: start;
  box-sizing: border-box;
  border: none;
- background-color: var(--merged-td-color);
- color: var(--td-text-color);
- border-bottom: 1px solid var(--merged-border-color);
+ background-color: var(--n-merged-td-color);
+ color: var(--n-td-text-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
  transition:
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier),
- border-color .3s var(--bezier),
- color .3s var(--bezier);
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('last-row', {
-  borderBottom: '0 solid var(--merged-border-color)'
+  borderBottom: '0 solid var(--n-merged-border-color)'
 }, [// make sure there is no overlap between bottom border and
 // fixed column box shadow
 (0, cssr_1.c)('&::after', {
@@ -205,9 +205,9 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
 }), (0, cssr_1.c)('&::before', {
   bottom: '0 !important'
 })]), (0, cssr_1.cM)('summary', `
- background-color: var(--merged-th-color);
+ background-color: var(--n-merged-th-color);
  `), (0, cssr_1.cM)('hover', {
-  backgroundColor: 'var(--merged-td-color-hover)'
+  backgroundColor: 'var(--n-merged-td-color-hover)'
 }), (0, cssr_1.cM)('ellipsis', `
  text-overflow: ellipsis;
  overflow: hidden;
@@ -217,73 +217,74 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  padding: 0;
  line-height: 0;
  `), fixedColumnStyle]), (0, cssr_1.cB)('data-table-empty', `
- padding: var(--empty-padding);
+ box-sizing: border-box;
+ padding: var(--n-empty-padding);
  flex-grow: 1;
  flex-shrink: 0;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
- transition: opacity .3s var(--bezier);
+ transition: opacity .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('hide', {
   opacity: 0
 })]), (0, cssr_1.cE)('pagination', `
- margin: var(--pagination-margin);
+ margin: var(--n-pagination-margin);
  display: flex;
  justify-content: flex-end;
  `), (0, cssr_1.cB)('data-table-wrapper', `
  position: relative;
  opacity: 1;
- transition: opacity .3s var(--bezier), border-color .3s var(--bezier);
- border-top-left-radius: var(--border-radius);
- border-top-right-radius: var(--border-radius);
- line-height: var(--line-height);
- `), (0, cssr_1.cM)('loading', [(0, cssr_1.cB)('data-table-wrapper', 'opacity: var(--opacity-loading);')]), (0, cssr_1.cM)('single-column', [(0, cssr_1.cB)('data-table-td', {
-  borderBottom: '0 solid var(--merged-border-color)'
+ transition: opacity .3s var(--n-bezier), border-color .3s var(--n-bezier);
+ border-top-left-radius: var(--n-border-radius);
+ border-top-right-radius: var(--n-border-radius);
+ line-height: var(--n-line-height);
+ `), (0, cssr_1.cM)('loading', [(0, cssr_1.cB)('data-table-wrapper', 'opacity: var(--n-opacity-loading);')]), (0, cssr_1.cM)('single-column', [(0, cssr_1.cB)('data-table-td', {
+  borderBottom: '0 solid var(--n-merged-border-color)'
 }, [(0, cssr_1.c)('&::after, &::before', {
   bottom: '0 !important'
 })])]), (0, cssr_1.cNotM)('single-line', [(0, cssr_1.cB)('data-table-th', {
-  borderRight: '1px solid var(--merged-border-color)'
+  borderRight: '1px solid var(--n-merged-border-color)'
 }, [(0, cssr_1.cM)('last', {
-  borderRight: '0 solid var(--merged-border-color)'
+  borderRight: '0 solid var(--n-merged-border-color)'
 })]), (0, cssr_1.cB)('data-table-td', {
-  borderRight: '1px solid var(--merged-border-color)'
+  borderRight: '1px solid var(--n-merged-border-color)'
 }, [(0, cssr_1.cM)('last-col', {
-  borderRight: '0 solid var(--merged-border-color)'
+  borderRight: '0 solid var(--n-merged-border-color)'
 })])]), (0, cssr_1.cM)('bordered', [(0, cssr_1.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);
+ border: 1px solid var(--n-merged-border-color);
+ border-bottom-left-radius: var(--n-border-radius);
+ border-bottom-right-radius: var(--n-border-radius);
  overflow: hidden;
  `)]), (0, cssr_1.cB)('data-table-base-table', [(0, cssr_1.cM)('transition-disabled', [(0, cssr_1.cB)('data-table-th', [(0, cssr_1.c)('&::after, &::before', {
   transition: 'none'
 })]), (0, cssr_1.cB)('data-table-td', [(0, cssr_1.c)('&::after, &::before', {
   transition: 'none'
 })])])]), (0, cssr_1.cM)('bottom-bordered', [(0, cssr_1.cB)('data-table-td', [(0, cssr_1.cM)('last-row', {
-  borderBottom: '1px solid var(--merged-border-color)'
+  borderBottom: '1px solid var(--n-merged-border-color)'
 })])]), (0, cssr_1.cB)('data-table-table', `
  font-variant-numeric: tabular-nums;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  border-collapse: separate;
  border-spacing: 0;
- background-color: var(--merged-td-color);
+ background-color: var(--n-merged-td-color);
  `), (0, cssr_1.cB)('data-table-base-table-header', `
- border-top-left-radius: calc(var(--border-radius) - 1px);
- border-top-right-radius: calc(var(--border-radius) - 1px);
+ border-top-left-radius: calc(var(--n-border-radius) - 1px);
+ border-top-right-radius: calc(var(--n-border-radius) - 1px);
  z-index: 3;
  overflow: scroll;
  flex-shrink: 0;
- transition: border-color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
  scrollbar-width: none;
  `, [(0, cssr_1.c)('&::-webkit-scrollbar', {
   width: 0,
   height: 0
 })]), (0, cssr_1.cB)('data-table-check-extra', `
- transition: color .3s var(--bezier);
- color: var(--th-icon-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-th-icon-color);
  position: absolute;
  font-size: 14px;
  right: -4px;
@@ -303,31 +304,31 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
   marginBottom: '12px',
   marginRight: 0
 })]), (0, cssr_1.cE)('action', `
- padding: var(--action-padding);
+ padding: var(--n-action-padding);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
- border-top: 1px solid var(--action-divider-color);
+ border-top: 1px solid var(--n-action-divider-color);
  `, [(0, cssr_1.cB)('button', [(0, cssr_1.c)('&:not(:last-child)', {
-  margin: 'var(--action-button-margin)'
+  margin: 'var(--n-action-button-margin)'
 }), (0, cssr_1.c)('&:last-child', {
   marginRight: 0
 })])]), (0, cssr_1.cB)('divider', {
   margin: '0!important'
 })]), (0, cssr_1.insideModal)((0, cssr_1.cB)('data-table', `
- --merged-th-color: var(--th-color-modal);
- --merged-td-color: var(--td-color-modal);
- --merged-border-color: var(--border-color-modal);
- --merged-th-color-hover: var(--th-color-hover-modal);
- --merged-td-color-hover: var(--td-color-hover-modal);
- --merged-td-color-striped: var(--td-color-striped-modal);
+ --n-merged-th-color: var(--n-th-color-modal);
+ --n-merged-td-color: var(--n-td-color-modal);
+ --n-merged-border-color: var(--n-border-color-modal);
+ --n-merged-th-color-hover: var(--n-th-color-hover-modal);
+ --n-merged-td-color-hover: var(--n-td-color-hover-modal);
+ --n-merged-td-color-striped: var(--n-td-color-striped-modal);
  `)), (0, cssr_1.insidePopover)((0, cssr_1.cB)('data-table', `
- --merged-th-color: var(--th-color-popover);
- --merged-td-color: var(--td-color-popover);
- --merged-border-color: var(--border-color-popover);
- --merged-th-color-hover: var(--th-color-hover-popover);
- --merged-td-color-hover: var(--td-color-hover-popover);
- --merged-td-color-striped: var(--td-color-striped-popover);
+ --n-merged-th-color: var(--n-th-color-popover);
+ --n-merged-td-color: var(--n-td-color-popover);
+ --n-merged-border-color: var(--n-border-color-popover);
+ --n-merged-th-color-hover: var(--n-th-color-hover-popover);
+ --n-merged-td-color-hover: var(--n-td-color-hover-popover);
+ --n-merged-td-color-striped: var(--n-td-color-striped-popover);
  `))]);
 
 function createFixedColumnStyle() {
@@ -343,7 +344,7 @@ function createFixedColumnStyle() {
  position: absolute;
  top: 0;
  bottom: -1px;
- transition: box-shadow .2s var(--bezier);
+ transition: box-shadow .2s var(--n-bezier);
  right: -36px;
  `)]), (0, cssr_1.cM)('fixed-right', {
     right: 0,
@@ -357,7 +358,7 @@ function createFixedColumnStyle() {
  position: absolute;
  top: 0;
  bottom: -1px;
- transition: box-shadow .2s var(--bezier);
+ transition: box-shadow .2s var(--n-bezier);
  left: -36px;
  `)])];
 }

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

@@ -61,18 +61,22 @@ 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
@@ -89,7 +93,7 @@ function useCheck(props, data) {
     }
     function doUncheckAll(checkWholeTable = false) {
         const { value: column } = selectionColumnRef;
-        if (!column)
+        if (!column || props.loading)
             return;
         const rowKeysToUncheck = [];
         (checkWholeTable

package/lib/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/lib/data-table/src/use-scroll.js

@@ -9,7 +9,9 @@ const utils_1 = require("./utils");
 function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef, scrollPartRef }) {
     let scrollLeft = 0;
     const leftActiveFixedColKeyRef = (0, vue_1.ref)(null);
+    const leftActiveFixedChildrenColKeysRef = (0, vue_1.ref)([]);
     const rightActiveFixedColKeyRef = (0, vue_1.ref)(null);
+    const rightActiveFixedChildrenColKeysRef = (0, vue_1.ref)([]);
     const styleScrollXRef = (0, vue_1.computed)(() => {
         return (0, _utils_1.formatLength)(props.scrollX);
     });
@@ -43,7 +45,8 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         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[(0, utils_1.getColKey)(col)] = positionInfo;
                 if ('children' in col) {
@@ -54,9 +57,9 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
                     right += (0, utils_1.getColWidth)(col) || 0;
                     positionInfo.end = right;
                 }
-            });
+            }
         }
-        traverse(rightFixedColumnsRef.value.reverse());
+        traverse(rightFixedColumnsRef.value);
         return columns;
     });
     function deriveActiveLeftFixedColumn() {
@@ -78,6 +81,18 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         }
         leftActiveFixedColKeyRef.value = leftActiveFixedColKey;
     }
+    function deriveActiveLeftFixedChildrenColumns() {
+        leftActiveFixedChildrenColKeysRef.value = [];
+        let activeLeftFixedColumn = props.columns.find((col) => (0, utils_1.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((0, utils_1.getColKey)(nextActiveLeftFixedColumn));
+            activeLeftFixedColumn = nextActiveLeftFixedColumn;
+        }
+    }
     function deriveActiveRightFixedColumn() {
         var _a, _b;
         // target is header element
@@ -89,7 +104,7 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         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 = (0, utils_1.getColKey)(rightFixedColumns[i]);
             if (Math.round(scrollLeft +
                 (((_a = fixedColumnRightMap[key]) === null || _a === void 0 ? void 0 : _a.start) || 0) +
@@ -104,6 +119,17 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         }
         rightActiveFixedColKeyRef.value = rightActiveFixedColKey;
     }
+    function deriveActiveRightFixedChildrenColumns() {
+        rightActiveFixedChildrenColKeysRef.value = [];
+        let activeRightFixedColumn = props.columns.find((col) => (0, utils_1.getColKey)(col) === rightActiveFixedColKeyRef.value);
+        while (activeRightFixedColumn &&
+            'children' in activeRightFixedColumn &&
+            activeRightFixedColumn.children.length) {
+            const nextActiveRightFixedColumn = activeRightFixedColumn.children[0];
+            rightActiveFixedChildrenColKeysRef.value.push((0, utils_1.getColKey)(nextActiveRightFixedColumn));
+            activeRightFixedColumn = nextActiveRightFixedColumn;
+        }
+    }
     function getScrollElements() {
         const header = mainTableInstRef.value
             ? mainTableInstRef.value.getHeaderElement()
@@ -160,7 +186,9 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
             scrollLeft = body.scrollLeft;
         }
         deriveActiveLeftFixedColumn();
+        deriveActiveLeftFixedChildrenColumns();
         deriveActiveRightFixedColumn();
+        deriveActiveRightFixedChildrenColumns();
     }
     function setHeaderScrollLeft(left) {
         const { header } = getScrollElements();
@@ -179,7 +207,9 @@ function useScroll(props, { mainTableInstRef, mergedCurrentPageRef, bodyWidthRef
         leftFixedColumnsRef,
         rightFixedColumnsRef,
         leftActiveFixedColKeyRef,
+        leftActiveFixedChildrenColKeysRef,
         rightActiveFixedColKeyRef,
+        rightActiveFixedChildrenColKeysRef,
         syncScrollState,
         handleTableBodyScroll,
         handleTableHeaderScroll,

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

@@ -189,11 +189,13 @@ 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)
                 (0, _utils_1.call)(onPageSizeChange, pageSize);
             if (onUpdatePageSize)
                 (0, _utils_1.call)(onUpdatePageSize, pageSize);
+            if (_onUpdatePageSize)
+                (0, _utils_1.call)(_onUpdatePageSize, pageSize);
             doUpdatePageSize(pageSize);
         }
     }

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

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