Skip to content

Commit ed22471

Browse files
KevinVandyKevinVandy
committed
fix vue adapter and examples for v9
1 parent 2612dbc commit ed22471

File tree

18 files changed

+579
-493
lines changed

18 files changed

+579
-493
lines changed

‎examples/vue/basic/src/App.vue‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup lang="ts">
22
import {
33
FlexRender,
4-
createCoreRowModel,
54
useTable,
65
createColumnHelper,
76
tableFeatures,
@@ -52,7 +51,7 @@ const columns = [
5251
columnHelper.group({
5352
header: 'Name',
5453
footer: (props) => props.column.id,
55-
columns: [
54+
columns: columnHelper.columns([
5655
columnHelper.accessor('firstName', {
5756
cell: (info) => info.getValue(),
5857
footer: (props) => props.column.id,
@@ -63,19 +62,19 @@ const columns = [
6362
header: () => 'Last Name',
6463
footer: (props) => props.column.id,
6564
}),
66-
],
65+
]),
6766
}),
6867
columnHelper.group({
6968
header: 'Info',
7069
footer: (props) => props.column.id,
71-
columns: [
70+
columns: columnHelper.columns([
7271
columnHelper.accessor('age', {
7372
header: () => 'Age',
7473
footer: (props) => props.column.id,
7574
}),
7675
columnHelper.group({
7776
header: 'More Info',
78-
columns: [
77+
columns: columnHelper.columns([
7978
columnHelper.accessor('visits', {
8079
header: () => 'Visits',
8180
footer: (props) => props.column.id,
@@ -88,9 +87,9 @@ const columns = [
8887
header: 'Profile Progress',
8988
footer: (props) => props.column.id,
9089
}),
91-
],
90+
]),
9291
}),
93-
],
92+
]),
9493
}),
9594
]
9695
@@ -101,11 +100,13 @@ const rerender = () => {
101100
}
102101
103102
const table = useTable({
103+
_features,
104+
_rowModels: {},
104105
get data() {
105106
return data.value
106107
},
107108
columns,
108-
getCoreRowModel: createCoreRowModel(),
109+
debugTable: true,
109110
})
110111
</script>
111112

@@ -132,7 +133,7 @@ const table = useTable({
132133
</thead>
133134
<tbody>
134135
<tr v-for="row in table.getRowModel().rows" :key="row.id">
135-
<td v-for="cell in row.getVisibleCells()" :key="cell.id">
136+
<td v-for="cell in row.getAllCells()" :key="cell.id">
136137
<FlexRender
137138
:render="cell.column.columnDef.cell"
138139
:props="cell.getContext()"

‎examples/vue/column-ordering/src/App.vue‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
<script setup lang="ts">
22
import {
3-
type ColumnOrderState,
43
FlexRender,
5-
createCoreRowModel,
6-
useTable,
7-
type Column,
8-
createColumnHelper,
9-
type ColumnVisibilityState,
104
columnOrderingFeature,
5+
columnVisibilityFeature,
6+
createColumnHelper,
117
tableFeatures,
8+
type Column,
9+
type ColumnOrderState,
10+
type ColumnVisibilityState,
11+
useTable,
12+
Updater,
13+
isFunction,
1214
} from '@tanstack/vue-table'
1315
import { makeData, type Person } from './makeData'
1416
import { ref } from 'vue'
1517
import { faker } from '@faker-js/faker'
1618
17-
const _features = tableFeatures({ columnOrderingFeature })
19+
const _features = tableFeatures({
20+
columnOrderingFeature,
21+
columnVisibilityFeature,
22+
})
1823
1924
const columnHelper = createColumnHelper<typeof _features, Person>()
2025
@@ -25,7 +30,7 @@ const columns = ref(
2530
columnHelper.group({
2631
header: 'Name',
2732
footer: (props) => props.column.id,
28-
columns: [
33+
columns: columnHelper.columns([
2934
columnHelper.accessor('firstName', {
3035
cell: (info) => info.getValue(),
3136
footer: (props) => props.column.id,
@@ -36,19 +41,19 @@ const columns = ref(
3641
header: () => 'Last Name',
3742
footer: (props) => props.column.id,
3843
}),
39-
],
44+
]),
4045
}),
4146
columnHelper.group({
4247
header: 'Info',
4348
footer: (props) => props.column.id,
44-
columns: [
49+
columns: columnHelper.columns([
4550
columnHelper.accessor('age', {
4651
header: () => 'Age',
4752
footer: (props) => props.column.id,
4853
}),
4954
columnHelper.group({
5055
header: 'More Info',
51-
columns: [
56+
columns: columnHelper.columns([
5257
columnHelper.accessor('visits', {
5358
header: () => 'Visits',
5459
footer: (props) => props.column.id,
@@ -61,9 +66,9 @@ const columns = ref(
6166
header: 'Profile Progress',
6267
footer: (props) => props.column.id,
6368
}),
64-
],
69+
]),
6570
}),
66-
],
71+
]),
6772
}),
6873
]),
6974
)
@@ -74,6 +79,7 @@ const columnOrder = ref<ColumnOrderState>([])
7479
const rerender = () => (data.value = makeData(20))
7580
7681
const table = useTable({
82+
_features,
7783
get data() {
7884
return data.value
7985
},
@@ -88,14 +94,11 @@ const table = useTable({
8894
return columnOrder.value
8995
},
9096
},
91-
92-
onColumnOrderChange: (updaterOrValue) => {
93-
columnOrder.value =
94-
updaterOrValue === 'function'
95-
? updaterOrValue(columnOrder.value)
96-
: updaterOrValue
97+
onColumnOrderChange: (updaterOrValue: Updater<ColumnOrderState>) => {
98+
columnOrder.value = isFunction(updaterOrValue)
99+
? updaterOrValue(columnOrder.value)
100+
: updaterOrValue
97101
},
98-
getCoreRowModel: createCoreRowModel(),
99102
debugTable: true,
100103
debugHeaders: true,
101104
debugColumns: true,

‎examples/vue/column-pinning/src/App.vue‎

Lines changed: 64 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
<script setup lang="ts">
22
import {
3-
createColumnHelper,
43
FlexRender,
5-
createCoreRowModel,
6-
useTable,
4+
columnOrderingFeature,
75
columnPinningFeature,
8-
tableFeatures,
96
columnVisibilityFeature,
7+
createColumnHelper,
8+
isFunction,
9+
tableFeatures,
10+
useTable,
1011
} from '@tanstack/vue-table'
1112
import type {
1213
Column,
1314
ColumnOrderState,
1415
ColumnPinningState,
16+
Updater,
1517
} from '@tanstack/vue-table'
1618
import { makeData, type Person } from './makeData'
1719
import { ref } from 'vue'
@@ -20,68 +22,71 @@ import { faker } from '@faker-js/faker'
2022
const data = ref(makeData(5000))
2123
2224
const _features = tableFeatures({
25+
columnOrderingFeature,
2326
columnPinningFeature,
2427
columnVisibilityFeature,
2528
})
2629
2730
const columnHelper = createColumnHelper<typeof _features, Person>()
2831
29-
const columns = ref([
30-
columnHelper.group({
31-
// id: 'Name',
32-
header: 'Name',
33-
footer: (props) => props.column.id,
34-
columns: [
35-
columnHelper.accessor('firstName', {
36-
cell: (info) => info.getValue(),
37-
footer: (props) => props.column.id,
38-
}),
39-
columnHelper.accessor((row) => row.lastName, {
40-
id: 'lastName',
41-
cell: (info) => info.getValue(),
42-
header: () => 'Last Name',
43-
footer: (props) => props.column.id,
44-
}),
45-
],
46-
}),
47-
columnHelper.group({
48-
header: 'Info',
49-
footer: (props) => props.column.id,
50-
columns: [
51-
columnHelper.accessor('age', {
52-
header: () => 'Age',
53-
footer: (props) => props.column.id,
54-
}),
55-
columnHelper.group({
56-
header: 'More Info',
57-
columns: [
58-
columnHelper.accessor('visits', {
59-
header: () => 'Visits',
60-
footer: (props) => props.column.id,
61-
}),
62-
columnHelper.accessor('status', {
63-
header: 'Status',
64-
footer: (props) => props.column.id,
65-
}),
66-
columnHelper.accessor('progress', {
67-
header: 'Profile Progress',
68-
footer: (props) => props.column.id,
69-
}),
70-
],
71-
}),
72-
],
73-
}),
74-
])
32+
const columns = ref(
33+
columnHelper.columns([
34+
columnHelper.group({
35+
header: 'Name',
36+
footer: (props) => props.column.id,
37+
columns: columnHelper.columns([
38+
columnHelper.accessor('firstName', {
39+
cell: (info) => info.getValue(),
40+
footer: (props) => props.column.id,
41+
}),
42+
columnHelper.accessor((row) => row.lastName, {
43+
id: 'lastName',
44+
cell: (info) => info.getValue(),
45+
header: () => 'Last Name',
46+
footer: (props) => props.column.id,
47+
}),
48+
]),
49+
}),
50+
columnHelper.group({
51+
header: 'Info',
52+
footer: (props) => props.column.id,
53+
columns: columnHelper.columns([
54+
columnHelper.accessor('age', {
55+
header: () => 'Age',
56+
footer: (props) => props.column.id,
57+
}),
58+
columnHelper.group({
59+
header: 'More Info',
60+
columns: columnHelper.columns([
61+
columnHelper.accessor('visits', {
62+
header: () => 'Visits',
63+
footer: (props) => props.column.id,
64+
}),
65+
columnHelper.accessor('status', {
66+
header: 'Status',
67+
footer: (props) => props.column.id,
68+
}),
69+
columnHelper.accessor('progress', {
70+
header: 'Profile Progress',
71+
footer: (props) => props.column.id,
72+
}),
73+
]),
74+
}),
75+
]),
76+
}),
77+
]),
78+
)
7579
7680
const columnVisibility = ref({})
7781
const columnOrder = ref<ColumnOrderState>([])
7882
79-
const columnPinning = ref<ColumnPinningState>({})
83+
const columnPinning = ref<ColumnPinningState>({ left: [], right: [] })
8084
const isSplit = ref(false)
8185
8286
const rerender = () => (data.value = makeData(5000))
8387
8488
const table = useTable({
89+
_features,
8590
get data() {
8691
return data.value
8792
},
@@ -100,19 +105,16 @@ const table = useTable({
100105
},
101106
},
102107
103-
onColumnOrderChange: (updaterOrValue) => {
104-
columnOrder.value =
105-
typeof updaterOrValue === 'function'
106-
? updaterOrValue(columnOrder.value)
107-
: updaterOrValue
108+
onColumnOrderChange: (updaterOrValue: Updater<ColumnOrderState>) => {
109+
columnOrder.value = isFunction(updaterOrValue)
110+
? updaterOrValue(columnOrder.value)
111+
: updaterOrValue
108112
},
109-
onColumnPinningChange: (updaterOrValue) => {
110-
columnPinning.value =
111-
typeof updaterOrValue === 'function'
112-
? updaterOrValue(columnPinning.value)
113-
: updaterOrValue
113+
onColumnPinningChange: (updaterOrValue: Updater<ColumnPinningState>) => {
114+
columnPinning.value = isFunction(updaterOrValue)
115+
? updaterOrValue(columnPinning.value)
116+
: updaterOrValue
114117
},
115-
getCoreRowModel: createCoreRowModel(),
116118
debugTable: true,
117119
debugHeaders: true,
118120
debugColumns: true,

0 commit comments

Comments
 (0)