data-table 组件添加可固定总结栏，Feature/data table summary sticky

CHANGELOG.zh-CN.md

@@ -63,6 +63,7 @@
 - 新增 `n-image-preview` 组件
 - `n-image-group` 可以脱离 `n-image` 使用
 - `n-input-otp` 增加 `focusOnChar` 方法，关闭 [#7073](https://github.com/tusen-ai/naive-ui/issues/7073)
+- `n-data-table` 增加 `summary-sticky` ,使summary可以固定在table顶部或底部
 - `n-form-item` 新增 `content-class`、`content-style` 属性
 - `n-message` 增加 `border` 主题变量，关闭 [#7105](https://github.com/tusen-ai/naive-ui/issues/7105)
 - `n-modal` 增加 `mask-visible` 属性
@@ -807,7 +808,7 @@
 
 ### Fixes
 
-- 修复 `n-select` 菜单在 SSR 情况下缺少勾选图标，关闭 <https://github.com/07akioni/naive-ui-nuxt-demo/issues/4>
+- 修复 `n-select` 菜单在 SSR 情况下缺少勾选图标，关闭 [https://github.com/07akioni/naive-ui-nuxt-demo/issues/4](https://github.com/07akioni/naive-ui-nuxt-demo/issues/4)
 - 修复 `n-card` 的 `embedded` 属性在 `n-dialog` 中不生效，关闭 [#3592](https://github.com/tusen-ai/naive-ui/issues/3592)
 - 修复 `n-radio` 当 `value` 属性为布尔值时报警告，关闭 [#3540](https://github.com/tusen-ai/naive-ui/issues/3540)
 - 修复 `n-pagination` 被禁用时，快速跳转菜单还会触发并可进行分页跳转
@@ -3777,7 +3778,7 @@
 ### Fixes
 
 - 修正了 `n-radio` 无法聚焦的问题
-- 修正了 `n-data-table` 的 `max-height` 样式失效的问题 <https://bugs.chromium.org/p/chromium/issues/detail?id=1107223>
+- 修正了 `n-data-table` 的 `max-height` 样式失效的问题 [https://bugs.chromium.org/p/chromium/issues/detail?id=1107223](https://bugs.chromium.org/p/chromium/issues/detail?id=1107223)
 
 ### Refactors
 

src/_internal/scrollbar/src/Scrollbar.tsx

@@ -64,6 +64,10 @@ export interface ScrollbarInstMethods {
   sync: () => void
   handleMouseEnterWrapper: () => void
   handleMouseLeaveWrapper: () => void
+  getNeedBars: () => {
+    x: boolean
+    y: boolean
+  }
 }
 
 export interface ScrollbarInst extends ScrollbarInstMethods {
@@ -297,7 +301,12 @@ const Scrollbar = defineComponent({
         return content()
       return contentRef.value
     })
-
+    const getNeedBars = () => {
+      return {
+        x: needXBarRef.value,
+        y: needYBarRef.value
+      }
+    }
     const scrollTo: ScrollTo = (
       options: MergedScrollOptions | number,
       y?: number
@@ -774,7 +783,8 @@ const Scrollbar = defineComponent({
       sync,
       syncUnifiedContainer,
       handleMouseEnterWrapper,
-      handleMouseLeaveWrapper
+      handleMouseLeaveWrapper,
+      getNeedBars
     }
     return {
       ...exposedMethods,

src/data-table/demos/zhCN/index.demo-entry.md

@@ -122,6 +122,7 @@ rtl-debug.vue
 | striped | `boolean` | `false` | 是否使用斑马线条纹 |  |
 | summary | `DataTableCreateSummary` | `undefined` | 表格总结栏的数据，类型见 <n-a href="#DataTableCreateSummary-Type">DataTableCreateSummary Type</n-a> |  |
 | summary-placement | `'top' \| 'bottom'` | `'bottom'` | 总结栏的位置 | 2.33.3 |
+| summary-sticky | `boolean` | `false` | 总结栏是否不随表格纵向滚动 | NEXT_VERSION |
 | table-layout | `'auto' \| 'fixed'` | `'auto'` | 表格的 `table-layout` 样式属性，在设定 `ellipsis` 或 `max-height` 的情况下固定为 `'fixed'` |  |
 | virtual-scroll | `boolean` | `false` | 是否开启虚拟滚动，应对大规模数据，开启前请设定好 `max-height`。当 `virtual-scroll` 为 `true` 时，`rowSpan` 将不生效 |  |
 | virtual-scroll-header | `boolean` | `false` | 是否打开表头的虚拟滚动，如果横向列太多，可以考虑打开此属性，打开此属性会导致表头单元格跨行列的功能不可用，同时必须要配置 `header-height` | 2.40.0 |

src/data-table/demos/zhCN/summary-debug.demo.vue

@@ -8,18 +8,14 @@ import { h } from 'vue'
 function createColumns() {
   return [
     {
-      title: 'parehnt',
-      children: [
-        {
-          title: 'Age',
-          key: 'age'
-        },
-        {
-          title: 'Name',
-          key: 'name',
-          fixed: 'left'
-        }
-      ]
+      title: 'Age',
+      key: 'age',
+      width: 500
+    },
+    {
+      title: 'Name',
+      key: 'name',
+      width: 500
     },
     {
       title: 'Address',
@@ -44,8 +40,86 @@ function createData() {
     },
     {
       key: 2,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      key: 3,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      key: 4,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      key: 5,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      key: 6,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      key: 61,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      key: 7,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      key: 8,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      key: 9,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      key: 10,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      key: 11,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      key: 12,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      key: 13,
+      name: 'Jim Green',
+      age: 42,
+      address: 'London No. 1 Lake Park'
+    },
+    {
+      key: 14,
       name: 'Joe Black',
-      age: 32,
+      age: 132,
       address: 'Sidney No. 1 Lake Park'
     }
   ]
@@ -56,7 +130,7 @@ function createSummary() {
     {
       name: {
         value: h('span', { style: { color: 'red' } }, '7'),
-        colSpan: 2,
+        colSpan: 1,
         rowSpan: 1
       },
       age: {
@@ -72,5 +146,15 @@ const columns = createColumns()
 </script>
 
 <template>
-  <n-data-table :columns="columns" :data="data" :summary="summary" />
+  <n-data-table
+    virtual-scroll
+    :max-height="300"
+    summary-placement="bottom"
+    :summary-sticky="true"
+    :scroll-x="1200"
+    :scrollbar-props="{ trigger: 'none', size: 12 }"
+    :columns="columns"
+    :data="data"
+    :summary="summary"
+  />
 </template>

src/data-table/src/DataTable.tsx

@@ -250,6 +250,7 @@ export default defineComponent({
       rowKeyRef: toRef(props, 'rowKey'),
       renderExpandRef,
       summaryRef: toRef(props, 'summary'),
+      summaryStickyRef: toRef(props, 'summarySticky'),
       virtualScrollRef: toRef(props, 'virtualScroll'),
       virtualScrollXRef: toRef(props, 'virtualScrollX'),
       heightForRowRef: toRef(props, 'heightForRow'),

src/data-table/src/MainTable.tsx

@@ -64,8 +64,16 @@ export default defineComponent({
       }
       return null
     }
+    function getSummaryStickyEl(): HTMLElement | null {
+      const { value } = bodyInstRef
+      if (value) {
+        return value.getSummaryStickyEl()
+      }
+      return null
+    }
     const exposedMethods: MainTableRef = {
       getBodyElement,
+      getSummaryStickyEl,
       getHeaderElement,
       scrollTo(arg0: any, arg1?: any) {
         bodyInstRef.value?.scrollTo(arg0, arg1)