feat(data-table): adds summary-placement prop, closes #3681

tusen-ai · Sep 11, 2022 · b504837 · b504837
1 parent 6db8c32
commit b504837
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 24 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -8,6 +8,7 @@
 - `n-daynamic-tags` export `DynamicTagsOption` type, closes [#3677](https://github.com/tusen-ai/naive-ui/issues/3677).
 - `n-upload` adds `responseType` prop, closes [#3666](https://github.com/tusen-ai/naive-ui/issues/3666).
 - `n-dropdown`'s `DropdownOption` adds `show` prop, closes [#3703](https://github.com/tusen-ai/naive-ui/issues/3703).
+- `n-data-table` adds `summary-placement` prop, closes [#3681](https://github.com/tusen-ai/naive-ui/issues/3681).
 
 ### Performance
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -8,6 +8,7 @@
 - `n-dynamic-tags` 导出类型 `DynamicTagsOption`，关闭 [#3677](https://github.com/tusen-ai/naive-ui/issues/3677)
 - `n-upload` 新增 `responseType` 属性，关闭 [#3666](https://github.com/tusen-ai/naive-ui/issues/3666)
 - `n-dropdown` `DropdownOption` 新增 `show` 属性，关闭 [#3703](https://github.com/tusen-ai/naive-ui/issues/3703)
+- `n-data-table` 新增 `summary-placement` 属性，关闭 [#3681](https://github.com/tusen-ai/naive-ui/issues/3681)
 
 ### Performance
 

diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md
@@ -98,6 +98,7 @@ render-cell.vue
 | sticky-expanded-rows | `boolean` | `false` | Expanded row content remains sticky. | 2.32.2 |
 | striped | `boolean` | `false` | Whether to show zebra stripes on rows. |  |
 | summary | `DataTableCreateSummary` | `undefined` | Data of table summary row. For types, see <n-a href="#DataTableCreateSummary-Type">DataTableCreateSummary Type</n-a>. |  |
+| summary-placement | `'top' \| 'bottom'` | `'bottom'` | Summary rows placement. | NEXT_VERSION |
 | table-layout | `'auto' \| 'fixed'` | `'auto'` | Style `table-layout` of the table. When `ellipsis` or `max-height` or `flex-height` are set, it will always be `'fixed'` regardless of what you set. |  |
 | virtual-scroll | `boolean` | `false` | Whether to use virtual scroll to deal with large data. Make sure `max-height` is set before using it. When `virtual-scroll` is `true`, `rowSpan` will not take effect. |  |
 | on-load | `(rowData: object) => Promise<void>` | `undefined` | Callback of async tree data expanding. | 2.27.0 |

diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -106,6 +106,7 @@ expandable-debug.vue
 | sticky-expanded-rows | `boolean` | `false` | 展开行是否不随表格横向滚动 | 2.32.2 |
 | striped | `boolean` | `false` | 是否使用斑马线条纹 |  |
 | summary | `DataTableCreateSummary` | `undefined` | 表格总结栏的数据，类型见 <n-a href="#DataTableCreateSummary-Type">DataTableCreateSummary Type</n-a> |  |
+| summary-placement | `'top' \| 'bottom'` | `'bottom'` | 总结栏的位置 | NEXT_VERSION |
 | table-layout | `'auto' \| 'fixed'` | `'auto'` | 表格的 `table-layout` 样式属性，在设定 `ellipsis` 或 `max-height` 的情况下固定为 `'fixed'` |  |
 | virtual-scroll | `boolean` | `false` | 是否开启虚拟滚动，应对大规模数据，开启前请设定好 `max-height`。当 `virtual-scroll` 为 `true` 时，`rowSpan` 将不生效 |  |
 | on-load | `(rowData: object) => Promise<void>` | `undefined` | 异步展开树形数据的回调 | 2.27.0 |

diff --git a/src/data-table/src/DataTable.tsx b/src/data-table/src/DataTable.tsx
@@ -237,6 +237,7 @@ export default defineComponent({
       flexHeightRef: toRef(props, 'flexHeight'),
       headerCheckboxDisabledRef,
       paginationBehaviorOnFilterRef: toRef(props, 'paginationBehaviorOnFilter'),
+      summaryPlacementRef: toRef(props, 'summaryPlacement'),
       syncScrollState,
       doUpdatePage,
       doUpdateFilters,

diff --git a/src/data-table/src/TableParts/Body.tsx b/src/data-table/src/TableParts/Body.tsx
@@ -182,6 +182,7 @@ export default defineComponent({
       expandableRef,
       stickyExpandedRowsRef,
       renderExpandIconRef,
+      summaryPlacementRef,
       setHeaderScrollLeft,
       doUpdateExpandedRowKeys,
       handleTableBodyScroll,
@@ -417,6 +418,7 @@ export default defineComponent({
     })
     return {
       bodyWidth: bodyWidthRef,
+      summaryPlacement: summaryPlacementRef,
       dataTableSlots,
       componentId,
       scrollbarInstRef,
@@ -584,31 +586,33 @@ export default defineComponent({
             if (summary) {
               const summaryRows = summary(this.rawPaginatedData)
               if (Array.isArray(summaryRows)) {
-                mergedData = [
-                  ...mergedPaginationData,
-                  ...summaryRows.map((row, i) => ({
-                    isSummaryRow: true as const,
-                    key: `__n_summary__${i}`,
-                    tmNode: {
-                      rawNode: row,
-                      disabled: true
-                    },
-                    index: -1
-                  }))
-                ]
+                const summaryRowData = summaryRows.map((row, i) => ({
+                  isSummaryRow: true as const,
+                  key: `__n_summary__${i}`,
+                  tmNode: {
+                    rawNode: row,
+                    disabled: true
+                  },
+                  index: -1
+                }))
+                mergedData =
+                  this.summaryPlacement === 'top'
+                    ? [...summaryRowData, ...mergedPaginationData]
+                    : [...mergedPaginationData, ...summaryRowData]
               } else {
-                mergedData = [
-                  ...mergedPaginationData,
-                  {
-                    isSummaryRow: true,
-                    key: '__n_summary__',
-                    tmNode: {
-                      rawNode: summaryRows,
-                      disabled: true
-                    },
-                    index: -1
-                  }
-                ]
+                const summaryRowData = {
+                  isSummaryRow: true as const,
+                  key: '__n_summary__',
+                  tmNode: {
+                    rawNode: summaryRows,
+                    disabled: true
+                  },
+                  index: -1
+                }
+                mergedData =
+                  this.summaryPlacement === 'top'
+                    ? [summaryRowData, ...mergedPaginationData]
+                    : [...mergedPaginationData, summaryRowData]
               }
             } else {
               mergedData = mergedPaginationData

diff --git a/src/data-table/src/interface.ts b/src/data-table/src/interface.ts
@@ -98,6 +98,10 @@ export const dataTableProps = {
     default: 16
   },
   flexHeight: Boolean,
+  summaryPlacement: {
+    type: String as PropType<'top' | 'bottom'>,
+    default: 'bottom'
+  },
   paginationBehaviorOnFilter: {
     type: String as PropType<'first' | 'current'>,
     default: 'current'
@@ -367,6 +371,7 @@ export interface DataTableInjection {
   expandableRef: Ref<Expandable<any> | undefined>
   stickyExpandedRowsRef: Ref<boolean>
   renderExpandIconRef: Ref<undefined | (() => VNodeChild)>
+  summaryPlacementRef: Ref<'top' | 'bottom'>
   doUpdatePage: (page: number) => void
   doUpdateExpandedRowKeys: (keys: RowKey[]) => void
   doUpdateFilters: (filters: FilterState, sourceColumn: TableBaseColumn) => void