Skip to content

Commit 432c625

Browse files
author
Tenny
committed
TanstackTable
Signed-off-by: Tenny <tenny.shu@foxmail.com>
1 parent 010d2d3 commit 432c625

File tree

12 files changed

+232
-4
lines changed

12 files changed

+232
-4
lines changed

‎docs/.vitepress/config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,10 @@ export default defineConfig({
140140
text: 'Table 表格',
141141
link: '/components/table',
142142
},
143+
{
144+
text: 'TanstackTable',
145+
link: '/components/tanstacktable',
146+
},
143147
{
144148
text: 'Collapse 折叠面板',
145149
link: '/components/collapse',

‎docs/.vitepress/theme/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import '../../../style/date-picker-ori';
3838
import '../../../style/page-header';
3939
import '../../../style/tag';
4040
import '../../../style/pagination';
41+
import '../../../style/tanstack-table';
4142

4243
export default {
4344
extends: DefaultTheme,

‎docs/components/table.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22

33
用于展示大量结构化数据
44

5+
这个表格只是一个简单的数据展示功能，只包含有固定表头和列、排序功能。如果当前组件不能满足需求需要使用更多功能的时候，可以考虑使用 [TanstackTable](/components/tanstacktable)
6+
7+
58
## 演示
69

710
<script setup>
@@ -728,6 +731,37 @@
728731
</CodePreview>
729732
</ClientOnly>
730733

734+
### 基本结构
735+
736+
整个表格的基本结构为：
737+
738+
```vue-html
739+
<!-- 外层容器, 当需要固定行滚动时, 以及后续需要处理虚拟滚动操作 -->
740+
<div class="nt-table-wrapper" style="max-height:300px;">
741+
<table class="nt-table nt-table-stripe nt-table-fixed">
742+
<thead class="nt-fixed">
743+
<th class="nt-fixed" style="left: 0"></th>
744+
<th></th>
745+
<th class="nt-fixed" style="right: 0"></th>
746+
</thead>
747+
<tbody>
748+
<tr>
749+
<td class="nt-fixed" style="left: 0"></td>
750+
<td></td>
751+
<td class="nt-fixed" style="right: 0"></td>
752+
</tr>
753+
</tbody>
754+
</table>
755+
</div>
756+
```
757+
758+
说明:
759+
760+
- `div.nt-table-wrapper`: 外层容器, 当需要固定行滚动时, 以及后续需要处理虚拟滚动操作; 如果需要固定表头, 则添加 `max-height` 样式.
761+
- `table.nt-table`: 表格容器; 如果需要为表格添加斑马纹则添加 `nt-table-stripe` 类; 如果需要固定列则添加 `nt-table-fixed` 类用于改变表格的 `table-layout` 布局.
762+
- `thead`: 如果需要固定表头, 则添加 `nt-fixed` 类否则不用添加.
763+
- `th.fixed,td.fixed`: 如果需要固定列则给列添加 `nt-fixed` 类, 然后设置 `left` 或者 `right` 样式.
764+
731765
## API
732766

733767
### Table Props

‎docs/components/tanstacktable.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# TanstackTable
2+
3+
[table 表格](/components/table)只能用于处理简单的列表展示。如果牵涉到复杂的功能比如：展开、选择等等，优先使用 `TanstackTable`。`TanstackTable` 是使用 [TanStack-Table](https://tanstack.com/table/latest) 实现。
4+
5+
## 安装
6+
7+
使用之前需要先安装 `TanStack-Table`
8+
9+
```bash
10+
npm install @tanstack/vue-table
11+
```
12+
13+
## 演示
14+
15+
<script setup>
16+
import { TanstackTable } from "../../src"
17+
</script>
18+
19+
### 基础用法
20+
21+
展示一个简单的表格
22+
23+
<ClientOnly>
24+
<CodePreview>
25+
<textarea lang="vue">
26+
<script setup lang="ts">
27+
</script>
28+
<template>
29+
<hr />
30+
</template>
31+
</textarea>
32+
<template #preview>
33+
<TanstackTable>1234</TanstackTable>
34+
</template>
35+
</CodePreview>
36+
</ClientOnly>
37+
38+
## API
39+
40+
### TanstackTable Props
41+
42+
<!-- prettier-ignore -->
43+
| 参数 | 说明 | 类型 | 默认值 |
44+
| --- | --- | --- | --- |
45+
| x | x | x | x |

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
},
6464
"license": "MulanPSL-2.0",
6565
"dependencies": {
66+
"@tanstack/vue-table": "^8.19.3",
6667
"ph-utils": "^0.8.2",
6768
"qrcode-generator-es": "^0.0.4",
6869
"vue-router": "^4.4.0"

‎pnpm-lock.yaml‎

Lines changed: 20 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Table.vue‎ renamed to ‎src/components/table/Table.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script lang="ts">
22
import { defineComponent, h, PropType, ref, toRaw, watch } from 'vue';
33
import type { VNode } from 'vue';
4-
import Radio from './radio/Radio.vue';
5-
import Checkbox from './checkbox/Checkbox.vue';
4+
import Radio from '../radio/Radio.vue';
5+
import Checkbox from '../checkbox/Checkbox.vue';
66
import { random } from 'ph-utils';
77
import { format } from 'ph-utils/date';
88

‎src/components/table/TanstackTable.vue‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<template>
2+
<table class="nt-table">
3+
<thead>
4+
<tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
5+
<th v-for="header in headerGroup.headers" :key="header.id">
6+
<FlexRender
7+
v-if="!header.isPlaceholder"
8+
:render="header.column.columnDef.header"
9+
:props="header.getContext()"
10+
/>
11+
</th>
12+
</tr>
13+
</thead>
14+
<tbody>
15+
<tr v-for="row in table.getRowModel().rows" :key="row.id">
16+
<td v-for="cell in row.getVisibleCells()" :key="cell.id">
17+
<FlexRender
18+
:render="cell.column.columnDef.cell"
19+
:props="cell.getContext()"
20+
/>
21+
</td>
22+
</tr>
23+
</tbody>
24+
</table>
25+
</template>
26+
<script setup lang="ts">
27+
import {
28+
createColumnHelper,
29+
useVueTable,
30+
getCoreRowModel,
31+
FlexRender,
32+
} from '@tanstack/vue-table';
33+
import { h } from 'vue';
34+
35+
type Person = {
36+
firstName: string;
37+
lastName: string;
38+
age: number;
39+
visits: number;
40+
status: string;
41+
progress: number;
42+
};
43+
44+
const defaultData: Person[] = [
45+
{
46+
firstName: 'tanner',
47+
lastName: 'linsley',
48+
age: 24,
49+
visits: 100,
50+
status: 'In Relationship',
51+
progress: 50,
52+
},
53+
{
54+
firstName: 'tandy',
55+
lastName: 'miller',
56+
age: 40,
57+
visits: 40,
58+
status: 'Single',
59+
progress: 80,
60+
},
61+
{
62+
firstName: 'joe',
63+
lastName: 'dirte',
64+
age: 45,
65+
visits: 20,
66+
status: 'Complicated',
67+
progress: 10,
68+
},
69+
];
70+
71+
const columnHelper = createColumnHelper<Person>();
72+
73+
const columns = [
74+
columnHelper.display({
75+
id: 'Name',
76+
header: () => '姓名',
77+
cell: (cell) =>
78+
`${cell.row.original.firstName}.${cell.row.original.lastName}`,
79+
footer: (info) => info.column.id,
80+
}),
81+
{
82+
accessorKey: 'age',
83+
cell: (info) => info.getValue(),
84+
},
85+
];
86+
87+
const data: Person[] = [
88+
{
89+
firstName: 'tanner',
90+
lastName: 'linsley',
91+
age: 24,
92+
visits: 100,
93+
status: 'In Relationship',
94+
progress: 50,
95+
},
96+
{
97+
firstName: 'tandy',
98+
lastName: 'miller',
99+
age: 40,
100+
visits: 40,
101+
status: 'Single',
102+
progress: 80,
103+
},
104+
{
105+
firstName: 'joe',
106+
lastName: 'dirte',
107+
age: 45,
108+
visits: 20,
109+
status: 'Complicated',
110+
progress: 10,
111+
},
112+
];
113+
114+
const table = useVueTable({
115+
get data() {
116+
return data;
117+
},
118+
columns,
119+
getCoreRowModel: getCoreRowModel(),
120+
});
121+
</script>

‎src/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ export { default as ImagePreview } from './components/ImagePreview.vue';
3737
export { default as SelectOri } from './components/SelectOri.vue';
3838
export { default as DatePickerOri } from './components/DatePickerOri.vue';
3939

40-
export { default as Table } from './components/Table.vue';
40+
export { default as Table } from './components/table/Table.vue';
41+
export { default as TanstackTable } from './components/table/TanstackTable.vue';
4142

4243
export { default as Message } from './components/message/index';
4344
export { default as Card } from './components/Card.vue';

‎style/tanstack-table/index.css‎

Whitespace-only changes.

0 commit comments

Comments
 (0)