feat(data-table): add sticky-summary and summary-max-height props

tusen-ai · Jan 22, 2025 · 6a28aac · 6a28aac
1 parent a788d37
commit 6a28aac
Show file tree

Hide file tree

Showing 7 changed files with 1,009 additions and 574 deletions.
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Features
+
+- `n-data-table` 新增 `sticky-summary`、`summary-max-height` 属性，用于支持表格内容滚动时，总结栏固定不动，关闭 [#6585](https://github.com/tusen-ai/naive-ui/issues/6585)、[#6432](https://github.com/tusen-ai/naive-ui/issues/6432)、[#6170](https://github.com/tusen-ai/naive-ui/issues/6170)、[#2814](https://github.com/tusen-ai/naive-ui/issues/2814)
+
 ## 2.41.0
 
 `2025-01-05`

diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -121,6 +121,8 @@ 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 |
+| sticky-summary | `boolean` | `false` | 总结栏是否不随表格纵向滚动 | NEXT_VERSION |
+| summary-max-height | `number \| string` | `undefined` | 当 `sticky-summary` 为 `true` 时，总结栏最大高度，可以是 CSS 属性值 | 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 |

diff --git a/src/data-table/demos/zhCN/summary-debug.demo.vue b/src/data-table/demos/zhCN/summary-debug.demo.vue
@@ -3,8 +3,16 @@
 </markdown>
 
 <script lang="ts">
+import type { DataTableColumns } from 'naive-ui'
 import { defineComponent, h } from 'vue'
 
+interface RowData {
+  key: number
+  name: string
+  age: number
+  address: string
+}
+
 function createColumns() {
   return [
     {
@@ -28,29 +36,88 @@ function createColumns() {
   ] as any
 }
 
-function createData() {
+function createColumns2(): DataTableColumns<RowData> {
   return [
     {
-      key: 0,
-      name: 'John Brown',
-      age: 32,
-      address: 'New York No. 1 Lake Park'
+      type: 'selection',
+      fixed: 'left'
+    },
+    {
+      title: 'Name',
+      key: 'name',
+      width: 200,
+      fixed: 'left'
     },
     {
-      key: 1,
-      name: 'Jim Green',
-      age: 42,
-      address: 'London No. 1 Lake Park'
+      title: 'Age',
+      key: 'age',
+      width: 100,
+      fixed: 'left'
     },
     {
-      key: 2,
-      name: 'Joe Black',
-      age: 32,
-      address: 'Sidney No. 1 Lake Park'
+      title: 'Row',
+      key: 'row'
+    },
+    {
+      title: 'Row1',
+      key: 'row1'
+    },
+    {
+      title: 'Row2',
+      key: 'row2',
+      width: 100,
+      fixed: 'right'
+    },
+    {
+      title: 'Address',
+      key: 'address',
+      width: 200,
+      fixed: 'right'
     }
   ]
 }
 
+let scrollX = 0
+function createColumns3() {
+  scrollX = 0
+  const columns: DataTableColumns<RowData> = []
+  for (let i = 0; i < 1000; ++i) {
+    scrollX += 100
+    columns.push({
+      title: `Col ${i}`,
+      width: 100,
+      key: i,
+      fixed: i <= 1 ? 'left' : i > 997 ? 'right' : undefined,
+      render(_, rowIndex) {
+        return `${i}-${rowIndex}`
+      }
+    })
+  }
+  return columns
+}
+
+function createData2() {
+  const data: RowData[] = Array.from({ length: 1000 }).map((_, index) => ({
+    key: index,
+    name: `Edward King ${index}`,
+    age: 32,
+    address: `London, Park Lane no. ${index}`
+  }))
+  return data
+}
+
+function createData(length = 3) {
+  return Array.from({ length }).map((_, index) => ({
+    key: index,
+    name: `Edward King ${index}`,
+    age: 32,
+    address: `London, Park Lane no. ${index}`,
+    row: `row-${index}`,
+    row1: `row1-${index}`,
+    row2: `row2-${index}`
+  }))
+}
+
 function createSummary() {
   return [
     {
@@ -66,17 +133,119 @@ function createSummary() {
   ]
 }
 
+function createSummary2(length = 2) {
+  return Array.from({ length }).map((_, index) => ({
+    name: {
+      value: h('span', { style: { color: 'red' } }, 7 + index)
+    },
+    age: {
+      value: h('span', null, 6 + index)
+    },
+    row: { value: `row-${index}` },
+    row1: { value: `row1-${index}` },
+    row2: { value: `row2-${index}` },
+    address: {
+      value: index
+    }
+  }))
+}
+
+function createSummary3(length = 100) {
+  return Array.from({ length }).map(() =>
+    Array.from({ length: 1000 }).reduce<Record<any, any>>((pre, cur, index) => {
+      pre[index] = { value: index }
+      return pre
+    }, {})
+  )
+}
+
 export default defineComponent({
   setup() {
     return {
-      summary: createSummary,
-      data: createData(),
-      columns: createColumns()
+      scrollX,
+      createData,
+      createData2,
+      createSummary,
+      createSummary2,
+      createSummary3,
+      createColumns,
+      createColumns2,
+      createColumns3
     }
   }
 })
 </script>
 
 <template>
-  <n-data-table :columns="columns" :data="data" :summary="summary" />
+  <n-space vertical :size="12">
+    <n-data-table
+      :columns="createColumns()"
+      :data="createData()"
+      :summary="createSummary"
+    />
+    <n-data-table
+      :columns="createColumns()"
+      :data="createData(10)"
+      max-height="200"
+      sticky-summary
+      :summary="createSummary"
+      summary-placement="top"
+    />
+    <n-data-table
+      :columns="createColumns()"
+      :data="createData(10)"
+      max-height="200"
+      sticky-summary
+      :summary="createSummary"
+      summary-placement="bottom"
+    />
+    <n-data-table
+      :columns="createColumns2()"
+      :data="createData(20)"
+      :pagination="{ pageSize: 10 }"
+      :scroll-x="1800"
+      :style="{ height: `300px` }"
+      flex-height
+      :summary="() => createSummary2(3)"
+      sticky-summary
+    />
+    <n-data-table
+      :columns="createColumns2()"
+      :data="createData(20)"
+      :pagination="{ pageSize: 10 }"
+      :scroll-x="1800"
+      :style="{ height: `300px` }"
+      flex-height
+      :summary="() => createSummary2(3)"
+      sticky-summary
+      summary-placement="top"
+    />
+    <n-data-table
+      :columns="createColumns2()"
+      :data="createData(20)"
+      :pagination="{ pageSize: 10 }"
+      :scroll-x="1800"
+      :style="{ height: `300px` }"
+      flex-height
+      :summary="() => createSummary2(3)"
+      sticky-summary
+      summary-max-height="70"
+      summary-placement="top"
+    />
+    <n-data-table
+      :columns="createColumns3()"
+      :data="createData2()"
+      :max-height="250"
+      virtual-scroll
+      virtual-scroll-x
+      :scroll-x="scrollX"
+      :min-row-height="48"
+      :height-for-row="() => 48"
+      virtual-scroll-header
+      :header-height="48"
+      :summary="() => createSummary3(1000)"
+      :summary-max-height="200"
+      sticky-summary
+    />
+  </n-space>
 </template>
diff --git a/src/data-table/src/DataTable.tsx b/src/data-table/src/DataTable.tsx
@@ -278,6 +278,8 @@ export default defineComponent({
       mergedTableLayoutRef,
       maxHeightRef: toRef(props, 'maxHeight'),
       minHeightRef: toRef(props, 'minHeight'),
+      summaryMaxHeightRef: toRef(props, 'summaryMaxHeight'),
+      stickySummaryRef: toRef(props, 'stickySummary'),
       flexHeightRef: toRef(props, 'flexHeight'),
       headerCheckboxDisabledRef,
       paginationBehaviorOnFilterRef: toRef(props, 'paginationBehaviorOnFilter'),