feat(data-table): adds default-expand-all prop, closes #3073

tusen-ai · Jun 12, 2022 · c66069b · c66069b
1 parent 014ddea
commit c66069b
Show file tree

Hide file tree

Showing 14 changed files with 66 additions and 15 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -15,7 +15,8 @@
 ### Feats
 
 - 🌟 `n-pagination` adds dropdown menu for fast jump button.
-- `n-input` adds `allow-input` prop.
+- 🌟 `n-input` adds `allow-input` prop.
+- 🌟 `n-data-table` adds `default-expand-all` prop, closes [#3073](https://github.com/TuSimple/naive-ui/issues/3073).
 - `n-tree-select` adds `arrow` slot, closes [#3084](https://github.com/TuSimple/naive-ui/issues/3084).
 - `n-cascader` will show corresponding submenu after checkbox is clicked, closes [#3079](https://github.com/TuSimple/naive-ui/issues/3079).
 - `n-upload` will disable dragger when maximum number of files was reached.

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -15,14 +15,15 @@
 ### Feats
 
 - 🌟 `n-pagination` 新增快速跳转的下拉菜单
+- 🌟 `n-input` 新增 `allow-input` 属性
+- 🌟 `n-data-table` 新增 `default-expand-all` 属性，关闭 [#3073](https://github.com/TuSimple/naive-ui/issues/3073)
 - `n-tree-select` 新增 `arrow` slot，关闭 [#3084](https://github.com/TuSimple/naive-ui/issues/3084)
 - `n-cascader` 在点击 checkbox 后会显示对应的子菜单，关闭 [#3079](https://github.com/TuSimple/naive-ui/issues/3079)
 - `n-upload` 在达到最大文件数量限制后会禁用 dragger
 - `n-select` 新增 `node-props` 属性
 - `n-popselect` 新增 `node-props` 属性
 - `n-popselect` 新增 `virtual-scroll` 属性
 - `n-data-table` 新增 `scrollTo` 方法，关闭 [#2570](https://github.com/TuSimple/naive-ui/issues/2570)
-- `n-input` 新增 `allow-input` 属性
 
 ## 2.30.3
 

diff --git a/src/data-table/demos/enUS/expand.demo.vue b/src/data-table/demos/enUS/expand.demo.vue
@@ -3,7 +3,12 @@
 </markdown>
 
 <template>
-  <n-data-table :columns="columns" :data="data" :pagination="pagination" />
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :pagination="pagination"
+    default-expand-all
+  />
 </template>
 
 <script lang="ts">

diff --git a/src/data-table/demos/enUS/index.demo-entry.md b/src/data-table/demos/enUS/index.demo-entry.md
@@ -64,6 +64,7 @@ async-expand.vue
 | data | `Array<object>` | `[]` | Data to display. |  |
 | default-checked-row-keys | `Array<string \| number>` | `[]` | The key value selected by default. |  |
 | default-expanded-row-keys | `Array<string \| number>` | `[]` | The key value of the expanded tree data by default |  |
+| default-expand-all | `boolean` | `false` | Whether to expand all expandable rows. Can't be used with async expanding data. | NEXT_VERSION |
 | expanded-row-keys | `Array<string \| number>` | `undefined` | Expanded row keys. |  |
 | pagination-behavior-on-filter | `'first' \| 'current'` | `'current'` | The behavior of pagination after filter state is changed. `'first'` means returning to first page on filter, `'current'` means keep at current page on filter. | 2.28.3 |
 | flex-height | `boolean` | `false` | Whether to make table body's height auto fit table area height. Make it enabled will make `table-layout` always set to `'fixed'`. |  |

diff --git a/src/data-table/demos/enUS/tree.demo.vue b/src/data-table/demos/enUS/tree.demo.vue
@@ -5,7 +5,12 @@ Set `children` in row data to show tree data. If you want to use other key to ge
 </markdown>
 
 <template>
-  <n-data-table :columns="columns" :data="data" :row-key="rowKey" />
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :row-key="rowKey"
+    default-expand-all
+  />
 </template>
 
 <script lang="ts">

diff --git a/src/data-table/demos/zhCN/expand.demo.vue b/src/data-table/demos/zhCN/expand.demo.vue
@@ -3,7 +3,12 @@
 </markdown>
 
 <template>
-  <n-data-table :columns="columns" :data="data" :pagination="pagination" />
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :pagination="pagination"
+    default-expand-all
+  />
 </template>
 
 <script lang="ts">

diff --git a/src/data-table/demos/zhCN/index.demo-entry.md b/src/data-table/demos/zhCN/index.demo-entry.md
@@ -69,6 +69,7 @@ keep-alive-debug.vue
 | data | `Array<object>` | `[]` | 需要展示的数据 |  |
 | default-checked-row-keys | `Array<string \| number>` | `[]` | 默认选中的 key 值 |  |
 | default-expanded-row-keys | `Array<string \| number>` | `[]` | 默认展开行的 key 值 |  |
+| default-expand-all | `boolean` | `false` | 是否默认展开全部可展开的行，不可在异步展开行时使用 | NEXT_VERSION |
 | expanded-row-keys | `Array<string \| number>` | `undefined` | 展开行的 key 值 |  |
 | indent | `number` | `16` | 使用树形数据时行内容的缩进 |  |
 | pagination-behavior-on-filter | `'first' \| 'current'` | `'current'` | 过滤操作后页面的状态，`'first'` 为回到首页，`'current'` 为停留在当前页 | 2.28.3 |

diff --git a/src/data-table/demos/zhCN/tree.demo.vue b/src/data-table/demos/zhCN/tree.demo.vue
@@ -5,7 +5,12 @@
 </markdown>
 
 <template>
-  <n-data-table :columns="columns" :data="data" :row-key="rowKey" />
+  <n-data-table
+    :columns="columns"
+    :data="data"
+    :row-key="rowKey"
+    default-expand-all
+  />
 </template>
 
 <script lang="ts">

diff --git a/src/data-table/src/DataTable.tsx b/src/data-table/src/DataTable.tsx
@@ -104,6 +104,7 @@ export const dataTableProps = {
     type: Array as PropType<RowKey[]>,
     default: []
   },
+  defaultExpandAll: Boolean,
   expandedRowKeys: Array as PropType<RowKey[]>,
   virtualScroll: Boolean,
   tableLayout: {
@@ -284,7 +285,7 @@ export default defineComponent({
       mergedExpandedRowKeysRef,
       renderExpandRef,
       doUpdateExpandedRowKeys
-    } = useExpand(props)
+    } = useExpand(props, treeMateRef)
     const {
       handleTableBodyScroll,
       handleTableHeaderScroll,

diff --git a/src/data-table/src/TableParts/Body.tsx b/src/data-table/src/TableParts/Body.tsx
@@ -810,7 +810,7 @@ export default defineComponent({
                         ) : column.type === 'expand' ? (
                           !isSummary ? (
                             !column.expandable ||
-                            column.expandable?.(rowData, rowIndex) ? (
+                            column.expandable?.(rowData) ? (
                               <ExpandTrigger
                                 clsPrefix={mergedClsPrefix}
                                 expanded={expanded}

diff --git a/src/data-table/src/interface.ts b/src/data-table/src/interface.ts
@@ -145,7 +145,7 @@ export type RenderExpand<T = InternalRowData> = (
 ) => VNodeChild
 
 // TODO: we should deprecate `index` since it would change after row is expanded
-export type Expandable<T = InternalRowData> = (row: T, index: number) => boolean
+export type Expandable<T = InternalRowData> = (row: T) => boolean
 export interface TableExpandColumn<T = InternalRowData>
   extends Omit<TableSelectionColumn<T>, 'type'> {
   type: 'expand'

diff --git a/src/data-table/src/use-expand.ts b/src/data-table/src/use-expand.ts
@@ -1,11 +1,15 @@
-import { toRef, ref } from 'vue'
+import { toRef, ref, Ref } from 'vue'
 import { useMemo, useMergedState } from 'vooks'
+import { TreeMate } from 'treemate'
 import type { DataTableSetupProps } from './DataTable'
-import { RowKey } from './interface'
+import type { Expandable, InternalRowData, RowKey } from './interface'
 import { call, warn } from '../../_utils'
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function useExpand (props: DataTableSetupProps) {
+export function useExpand (
+  props: DataTableSetupProps,
+  treeMateRef: Ref<TreeMate<InternalRowData, InternalRowData, InternalRowData>>
+) {
   const renderExpandRef = useMemo(() => {
     for (const col of props.columns) {
       if (col.type === 'expand') {
@@ -19,7 +23,29 @@ export function useExpand (props: DataTableSetupProps) {
       }
     }
   })
-  const uncontrolledExpandedRowKeysRef = ref(props.defaultExpandedRowKeys)
+  // It's not reactive
+  let expandable: Expandable<any> | undefined
+  for (const col of props.columns) {
+    if (col.type === 'expand') {
+      expandable = col.expandable
+      break
+    }
+  }
+  const uncontrolledExpandedRowKeysRef = ref(
+    props.defaultExpandAll
+      ? renderExpandRef?.value
+        ? (() => {
+            const expandedKeys: RowKey[] = []
+            treeMateRef.value.treeNodes.forEach((tmNode) => {
+              if (expandable?.(tmNode.rawNode)) {
+                expandedKeys.push(tmNode.key)
+              }
+            })
+            return expandedKeys
+          })()
+        : treeMateRef.value.getNonLeafKeys()
+      : props.defaultExpandedRowKeys
+  )
   const controlledExpandedRowKeysRef = toRef(props, 'expandedRowKeys')
   const mergedExpandedRowKeysRef = useMergedState(
     controlledExpandedRowKeysRef,

diff --git a/src/data-table/tests/DataTable.spec.tsx b/src/data-table/tests/DataTable.spec.tsx
@@ -1115,7 +1115,7 @@ describe('props.columns', () => {
     const columns: DataTableColumns = [
       {
         type: 'expand',
-        expandable: (_, index) => index === 0,
+        expandable: (rowData) => rowData.name === 0,
         renderExpand: (rowData: any) => {
           return `${String(rowData.name)} is a good guy.`
         }

diff --git a/src/input/demos/zhCN/pattern.demo.vue b/src/input/demos/zhCN/pattern.demo.vue
@@ -1,5 +1,5 @@
 <markdown>
-# 输入校验
+# 只允许输入特定值
 
 使用 `allow-input` 限制输入框的输入格式，你可以使用它来达到 `trim` 的效果。
 </markdown>