Skip to content

Commit

Permalink
feat(data-table): DataTableBaseColumn adds tree attr, closes #2757
Browse files Browse the repository at this point in the history
  • Loading branch information
07akioni committed May 10, 2022
1 parent 91268bb commit fb40871
Show file tree
Hide file tree
Showing 14 changed files with 163 additions and 130 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
- Fix `n-dropdown`'s `on-update:show` prop will be triggered twice, closes [#2905](https://github.com/TuSimple/naive-ui/issues/2905).
- Fix `n-select` can select option by pressing enter after options are cleared.
- Fix `n-data-table`'s `selection` and `expand` column can't set width.
- Fix `n-checkbox` contains selectable whitespace.

### Feats

Expand Down Expand Up @@ -51,6 +52,7 @@
- `n-upload` adds `directory` prop.
- `n-upload` adds `directory-dnd` prop.
- `UploadFileInfo` adds `fullPath` and `batchId` attrs.
- `DataTableBaseColumn` adds `tree` attr, closes [#2757](https://github.com/TuSimple/naive-ui/issues/2757).

## 2.28.2

Expand Down
2 changes: 2 additions & 0 deletions CHANGELOG.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
- 修复 `n-dropdown``on-update:show` 会被触发两次,关闭 [#2905](https://github.com/TuSimple/naive-ui/issues/2905)
- 修复 `n-select` 在选情清空后依然可以通过 enter 键选中值
- 修复 `n-data-table``selection``expand` 列不能设置宽度
- 修复 `n-checkbox` 中有可以被选中的空格

### Feats

Expand Down Expand Up @@ -52,6 +53,7 @@
- `n-upload` 新增 `directory` 属性
- `n-upload` 新增 `directory-dnd` 属性
- `UploadFileInfo` 新增 `fullPath``batchId` 属性
- `DataTableBaseColumn` 新增 `tree` 属性,关闭 [#2757](https://github.com/TuSimple/naive-ui/issues/2757)

## 2.28.2

Expand Down
1 change: 1 addition & 0 deletions src/checkbox/src/styles/index.cssr.ts
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ export default c([
width: var(--n-size);
flex-shrink: 0;
flex-grow: 0;
user-select: none;
`),
cB('checkbox-box', `
position: absolute;
Expand Down
3 changes: 2 additions & 1 deletion src/data-table/demos/enUS/index.demo-entry.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ custom-style
ajax-usage
virtual
custom-filter-menu.vue
tree
tree.vue
flex-height
striped
simple-editable
Expand Down Expand Up @@ -128,6 +128,7 @@ async-expand.vue
| rowSpan | `(rowData: object, rowIndex: number) => number` | `undefined` | The row span of the cell. | |
| sortOrder | `'descend' \| 'ascend' \| false` | `undefined` | The controlled sort order of the column. If multiple columns' sortOrder is set, the first one will affect. | |
| sorter | `boolean \| function \| 'default'` | `false` | The sorter of the column. If set `'default'`, it will use a basic builtin compare function. If set to `true`, it will only display sort icon on the column, which can be used in async status. Otherwise it works like `Array.sort`'s compare function. | |
| tree | `boolean` | `false` | Whether to show tree data expand trigger in the column. | NEXT_VERSION |
| title | `string \| (() => VNodeChild)` | `undefined` | Column title, Can be a render function. | |
| titleRowSpan | `number` | `undefined` | The number of cells occupied by the title row. | |
| type | `'selection' \| 'expand'` | `undefined` | Column type. | |
Expand Down
58 changes: 0 additions & 58 deletions src/data-table/demos/enUS/tree.demo.md

This file was deleted.

68 changes: 68 additions & 0 deletions src/data-table/demos/enUS/tree.demo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<markdown>
# Tree data

Set `children` in row data to show tree data. If you want to use other key to get children, you can set another `children-key`.
</markdown>

<template>
<n-data-table :columns="columns" :data="data" :row-key="rowKey" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { DataTableColumns } from 'naive-ui'
type RowData = {
name: string
index: string
children?: RowData[]
}
export default defineComponent({
setup () {
const data: RowData[] = [
{
name: '07akioni',
index: '07',
children: [
{
name: '08akioni',
index: '08',
children: [
{
name: '09akioni',
index: '09'
},
{
name: '10akioni',
index: '10'
}
]
}
]
},
{
name: '11akioni',
index: '11'
}
]
const columns: DataTableColumns<RowData> = [
{
type: 'selection'
},
{
title: 'name',
key: 'name'
},
{
title: 'index',
key: 'index'
}
]
return {
rowKey: (row: RowData) => row.index,
columns,
data
}
}
})
</script>
3 changes: 2 additions & 1 deletion src/data-table/demos/zhCN/index.demo-entry.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ custom-style
ajax-usage
virtual
custom-filter-menu.vue
tree
tree.vue
flex-height
striped
simple-editable
Expand Down Expand Up @@ -132,6 +132,7 @@ height-debug
| rowSpan | `(rowData: object, rowIndex: number) => number` | `undefined` | 该列单元格的 row span | |
| sortOrder | `'descend' \| 'ascend' \| false` | `undefined` | 受控状态下表格的排序方式。如果多列都设定了有效值,那么只有第一个会生效 | |
| sorter | `boolean \| function \| 'default'` | `undefined` | 这一列的排序方法。如果设为 `'default'` 表格将会使用一个内置的排序函数;如果设为 `true`,表格将只会在这列展示一个排序图标,在异步的时候可能有用。其他情况下它工作的方式类似 `Array.sort` 的对比函数 | |
| tree | `boolean` | `false` | 是否在这一列展示树形数据的展开按钮 | NEXT_VERSION |
| title | `string \| (() => VNodeChild)` | `undefined` | 列的 title 信息,可以是渲染函数 | |
| titleRowSpan | `number` | `undefined` | title 行所占的单元格的个数 | |
| type | `'selection' \| 'expand'` | `undefined` | 列的类型 | |
Expand Down
58 changes: 0 additions & 58 deletions src/data-table/demos/zhCN/tree.demo.md

This file was deleted.

68 changes: 68 additions & 0 deletions src/data-table/demos/zhCN/tree.demo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<markdown>
# 树型数据

在行数据中设定 `children` 来展示树型数据。如果你想用别的 key 来获取 children,那么可以设定 `children-key`。
</markdown>

<template>
<n-data-table :columns="columns" :data="data" :row-key="rowKey" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { DataTableColumns } from 'naive-ui'
type RowData = {
name: string
index: string
children?: RowData[]
}
export default defineComponent({
setup () {
const data: RowData[] = [
{
name: '07akioni',
index: '07',
children: [
{
name: '08akioni',
index: '08',
children: [
{
name: '09akioni',
index: '09'
},
{
name: '10akioni',
index: '10'
}
]
}
]
},
{
name: '11akioni',
index: '11'
}
]
const columns: DataTableColumns<RowData> = [
{
type: 'selection'
},
{
title: 'name',
key: 'name'
},
{
title: 'index',
key: 'index'
}
]
return {
rowKey: (row: RowData) => row.index,
columns,
data
}
}
})
</script>
4 changes: 2 additions & 2 deletions src/data-table/src/DataTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ export default defineComponent({
mergedPaginationRef,
mergedFilterStateRef,
mergedSortStateRef,
firstContentfulColIndexRef,
childTriggerColIndexRef,
doUpdatePage,
doUpdateFilters,
deriveNextSorter,
Expand Down Expand Up @@ -318,7 +318,7 @@ export default defineComponent({
loadingKeySetRef: ref(new Set<RowKey>()),
slots,
indentRef: toRef(props, 'indent'),
firstContentfulColIndexRef,
childTriggerColIndexRef,
bodyWidthRef,
componentId: createId(),
hoverKeyRef,
Expand Down
8 changes: 4 additions & 4 deletions src/data-table/src/TableParts/Body.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ export default defineComponent({
componentId,
scrollPartRef,
mergedTableLayoutRef,
firstContentfulColIndexRef,
childTriggerColIndexRef,
indentRef,
rowPropsRef,
maxHeightRef,
Expand Down Expand Up @@ -445,7 +445,7 @@ export default defineComponent({
mergedSortState: mergedSortStateRef,
virtualScroll: virtualScrollRef,
mergedTableLayout: mergedTableLayoutRef,
firstContentfulColIndex: firstContentfulColIndexRef,
childTriggerColIndex: childTriggerColIndexRef,
indent: indentRef,
rowProps: rowPropsRef,
maxHeight: maxHeightRef,
Expand Down Expand Up @@ -526,7 +526,7 @@ export default defineComponent({
mergedSortState,
mergedExpandedRowKeySet,
componentId,
firstContentfulColIndex,
childTriggerColIndex,
rowProps,
handleMouseenterTable,
handleMouseleaveTable,
Expand Down Expand Up @@ -759,7 +759,7 @@ export default defineComponent({
}
]}
>
{hasChildren && colIndex === firstContentfulColIndex
{hasChildren && colIndex === childTriggerColIndex
? [
repeat(
isSummary ? 0 : rowInfo.tmNode.level,
Expand Down
Loading

0 comments on commit fb40871

Please sign in to comment.