Skip to content

Commit 78b9012

Browse files
radusuciuKevinVandy
radusuciu
and
KevinVandy
authoredJun 29, 2024··
docs(vue): vue subcomponents example (#5631)
* examples: vue sub-components * examples: fix vue sub-components package name * prettier and update lock file --------- Co-authored-by: Kevin Vandy <kevinvandy656@gmail.com>
·
v9.0.0-alpha.10v8.19.1
1 parent f159b04 commit 78b9012

File tree

12 files changed

+357
-0
lines changed

12 files changed

+357
-0
lines changed
 

‎docs/config.json

+4
Original file line numberDiff line numberDiff line change
@@ -716,6 +716,10 @@
716716
{
717717
"to": "framework/vue/examples/sorting",
718718
"label": "Sorting"
719+
},
720+
{
721+
"to": "framework/vue/examples/sub-components",
722+
"label": "Sub Components"
719723
}
720724
]
721725
}

‎examples/vue/sub-components/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/vue/sub-components/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn`
6+
- `npm run dev` or `yarn dev`

‎examples/vue/sub-components/env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎examples/vue/sub-components/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
<script src="https://cdn.tailwindcss.com"></script>
9+
</head>
10+
<body>
11+
<div id="app"></div>
12+
<script type="module" src="/src/main.ts"></script>
13+
</body>
14+
</html>

‎examples/vue/sub-components/package.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "tanstack-table-example-vue-subcomponents",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"test:types": "vue-tsc"
10+
},
11+
"dependencies": {
12+
"@faker-js/faker": "^8.4.1",
13+
"vue": "^3.4.25",
14+
"@tanstack/vue-table": "^8.17.3"
15+
},
16+
"devDependencies": {
17+
"@types/node": "^20.12.7",
18+
"@vitejs/plugin-vue": "^5.0.4",
19+
"typescript": "5.4.5",
20+
"vite": "^5.2.10",
21+
"vue-tsc": "^2.0.14"
22+
}
23+
}

‎examples/vue/sub-components/public/favicon.ico

4.19 KB
Binary file not shown.

‎examples/vue/sub-components/src/App.vue

+222
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
<script setup lang="ts">
2+
import {
3+
FlexRender,
4+
createColumnHelper,
5+
getCoreRowModel,
6+
getExpandedRowModel,
7+
useVueTable,
8+
type ExpandedState,
9+
type Row,
10+
} from '@tanstack/vue-table'
11+
import { Text, h, ref } from 'vue'
12+
type Person = {
13+
firstName: string
14+
lastName: string
15+
age: number
16+
visits: number
17+
status: string
18+
progress: number
19+
}
20+
const defaultData: Person[] = [
21+
{
22+
firstName: 'tanner',
23+
lastName: 'linsley',
24+
age: 24,
25+
visits: 100,
26+
status: 'In Relationship',
27+
progress: 50,
28+
},
29+
{
30+
firstName: 'tandy',
31+
lastName: 'miller',
32+
age: 40,
33+
visits: 40,
34+
status: 'Single',
35+
progress: 80,
36+
},
37+
{
38+
firstName: 'joe',
39+
lastName: 'dirte',
40+
age: 45,
41+
visits: 20,
42+
status: 'Complicated',
43+
progress: 10,
44+
},
45+
]
46+
const columnHelper = createColumnHelper<Person>()
47+
function renderExpanded(row: Row<Person>) {
48+
if (!row.getCanExpand()) {
49+
return h(Text, '🔵')
50+
}
51+
return h(
52+
'button',
53+
{
54+
onClick: row.getToggleExpandedHandler(),
55+
style: { cursor: 'pointer' },
56+
},
57+
row.getIsExpanded() ? '👇' : '👉'
58+
)
59+
}
60+
const columns = [
61+
columnHelper.group({
62+
header: 'Name',
63+
footer: props => props.column.id,
64+
columns: [
65+
columnHelper.display({
66+
id: 'expander',
67+
header: () => null,
68+
cell: ({ row }) => renderExpanded(row),
69+
}),
70+
columnHelper.accessor('firstName', {
71+
footer: props => props.column.id,
72+
}),
73+
columnHelper.accessor(row => row.lastName, {
74+
id: 'lastName',
75+
cell: info => info.getValue(),
76+
header: () => 'Last Name',
77+
footer: props => props.column.id,
78+
}),
79+
],
80+
}),
81+
columnHelper.group({
82+
header: 'Info',
83+
footer: props => props.column.id,
84+
columns: [
85+
columnHelper.accessor('age', {
86+
header: () => 'Age',
87+
footer: props => props.column.id,
88+
}),
89+
columnHelper.group({
90+
header: 'More Info',
91+
columns: [
92+
columnHelper.accessor('visits', {
93+
header: () => 'Visits',
94+
footer: props => props.column.id,
95+
}),
96+
columnHelper.accessor('status', {
97+
header: 'Status',
98+
footer: props => props.column.id,
99+
}),
100+
columnHelper.accessor('progress', {
101+
header: 'Profile Progress',
102+
footer: props => props.column.id,
103+
}),
104+
],
105+
}),
106+
],
107+
}),
108+
]
109+
const data = ref(defaultData)
110+
const expanded = ref<ExpandedState>({})
111+
const rerender = () => {
112+
data.value = defaultData
113+
}
114+
const table = useVueTable({
115+
get data() {
116+
return data.value
117+
},
118+
state: {
119+
get expanded() {
120+
return expanded.value
121+
},
122+
},
123+
columns,
124+
getRowCanExpand: () => true,
125+
getCoreRowModel: getCoreRowModel(),
126+
getExpandedRowModel: getExpandedRowModel(),
127+
onExpandedChange: updaterOrValue => {
128+
expanded.value =
129+
typeof updaterOrValue === 'function'
130+
? updaterOrValue(expanded.value)
131+
: updaterOrValue
132+
},
133+
})
134+
</script>
135+
136+
<template>
137+
<div class="p-2">
138+
<table>
139+
<thead>
140+
<tr
141+
v-for="headerGroup in table.getHeaderGroups()"
142+
:key="headerGroup.id"
143+
>
144+
<th
145+
v-for="header in headerGroup.headers"
146+
:key="header.id"
147+
:colSpan="header.colSpan"
148+
>
149+
<FlexRender
150+
v-if="!header.isPlaceholder"
151+
:render="header.column.columnDef.header"
152+
:props="header.getContext()"
153+
/>
154+
</th>
155+
</tr>
156+
</thead>
157+
<tbody>
158+
<template v-for="row in table.getRowModel().rows" :key="row.id">
159+
<tr>
160+
<td v-for="cell in row.getVisibleCells()" :key="cell.id">
161+
<FlexRender
162+
:render="cell.column.columnDef.cell"
163+
:props="cell.getContext()"
164+
/>
165+
</td>
166+
</tr>
167+
<tr v-if="row.getIsExpanded()">
168+
<td :colspan="row.getAllCells().length">
169+
<pre :style="{ fontSize: '10px' }">
170+
<code>{{ JSON.stringify(row.original, null, 2) }}</code>
171+
</pre>
172+
</td>
173+
</tr>
174+
</template>
175+
</tbody>
176+
<tfoot>
177+
<tr
178+
v-for="footerGroup in table.getFooterGroups()"
179+
:key="footerGroup.id"
180+
>
181+
<th
182+
v-for="header in footerGroup.headers"
183+
:key="header.id"
184+
:colSpan="header.colSpan"
185+
>
186+
<FlexRender
187+
v-if="!header.isPlaceholder"
188+
:render="header.column.columnDef.footer"
189+
:props="header.getContext()"
190+
/>
191+
</th>
192+
</tr>
193+
</tfoot>
194+
</table>
195+
<div class="h-4" />
196+
<button @click="rerender" class="border p-2">Rerender</button>
197+
</div>
198+
</template>
199+
200+
<style>
201+
html {
202+
font-family: sans-serif;
203+
font-size: 14px;
204+
}
205+
table {
206+
border: 1px solid lightgray;
207+
}
208+
tbody {
209+
border-bottom: 1px solid lightgray;
210+
}
211+
th {
212+
border-bottom: 1px solid lightgray;
213+
border-right: 1px solid lightgray;
214+
padding: 2px 4px;
215+
}
216+
tfoot {
217+
color: gray;
218+
}
219+
tfoot th {
220+
font-weight: normal;
221+
}
222+
</style>

‎examples/vue/sub-components/src/main.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
4+
createApp(App).mount('#app')

‎examples/vue/sub-components/tsconfig.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"useDefineForClassFields": true,
5+
"module": "ESNext",
6+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
7+
"skipLibCheck": true,
8+
9+
/* Bundler mode */
10+
"moduleResolution": "bundler",
11+
"allowImportingTsExtensions": true,
12+
"resolveJsonModule": true,
13+
"isolatedModules": true,
14+
"noEmit": true,
15+
"jsx": "preserve",
16+
17+
/* Linting */
18+
"strict": true,
19+
"noUnusedLocals": true,
20+
"noUnusedParameters": true,
21+
"noFallthroughCasesInSwitch": true
22+
},
23+
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
24+
}

‎examples/vue/sub-components/vite.config.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
})

‎pnpm-lock.yaml

+28
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
Please sign in to comment.