Skip to content

Commit 12d4157

Browse files
walker-txWalker LockarddummdidummKevinVandylachlancollins
authoredJun 12, 2024··
feat: svelte 5 adapter (#5403)
* updated svelte-table adapter to Svelte 5 * updated rollup-plugin-svelte * updated prettier plugin for svelte * updated the table implementation and applied formatting * updated flex-render documentation * Update packages/svelte-table/src/flex-render.svelte Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * re-add tweak rollup config and uglify TContext in flex-render * updated svelte-basic example * revert svelte-table version * correction - using wrong content object for footer * removing unused imports from svelte's basic example * updated tanstack-table-example-svelte-column-groups to svelte 5 * updated svelte-table column order example * column-pinning example * svelte column visibility example * svelte filtering example * simplified column-visibility svelte example a tiny bit * svelte sorting example * remove comment from svelte sorting example * fix svelte flex-render ts types and docs * implement svelte-package * updated svelte package.json and corrected type error in flex render * prettier * removed rollup-plugin-svelte dependencies * inline the flex render component * fixed test errors * removed duplicate devdependencies in the svelte package * upgrade svelte versions in examples * disable knip because its annoying --------- Co-authored-by: Walker Lockard <walker@ourhive.com> Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> Co-authored-by: Kevin Vandy <kevinvandy656@gmail.com> Co-authored-by: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
·
v9.0.0-alpha.10v9.0.0-alpha.2
1 parent 00f0963 commit 12d4157

37 files changed

+799
-767
lines changed
 

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ coverage
2525
.env.test.local
2626
.env.production.local
2727
.next
28+
.svelte-kit
2829

2930
npm-debug.log*
3031
yarn-debug.log*

‎examples/svelte/basic/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
},
1212
"devDependencies": {
1313
"@rollup/plugin-replace": "^5.0.5",
14+
"svelte": "5.0.0-next.153",
1415
"@sveltejs/vite-plugin-svelte": "^3.1.0",
1516
"@tanstack/svelte-table": "^9.0.0-alpha.0",
1617
"@tsconfig/svelte": "^5.0.4",
17-
"svelte": "^4.2.15",
1818
"svelte-check": "^3.7.0",
1919
"typescript": "5.4.5",
2020
"vite": "^5.2.10"

‎examples/svelte/basic/src/App.svelte

+15-27
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<script lang="ts">
2-
import { writable } from 'svelte/store'
2+
import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
33
import {
44
createSvelteTable,
5-
flexRender,
5+
FlexRender,
66
getCoreRowModel,
77
} from '@tanstack/svelte-table'
8-
import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
98
import './index.css'
109
1110
type Person = {
@@ -79,17 +78,10 @@
7978
},
8079
]
8180
82-
const options = writable<TableOptions<Person>>({
81+
let options: TableOptions<Person> = {
8382
data: defaultData,
8483
columns: defaultColumns,
8584
getCoreRowModel: getCoreRowModel(),
86-
})
87-
88-
const rerender = () => {
89-
options.update(options => ({
90-
...options,
91-
data: defaultData,
92-
}))
9385
}
9486
9587
const table = createSvelteTable(options)
@@ -98,16 +90,14 @@
9890
<div class="p-2">
9991
<table>
10092
<thead>
101-
{#each $table.getHeaderGroups() as headerGroup}
93+
{#each table.getHeaderGroups() as headerGroup}
10294
<tr>
10395
{#each headerGroup.headers as header}
10496
<th>
10597
{#if !header.isPlaceholder}
106-
<svelte:component
107-
this={flexRender(
108-
header.column.columnDef.header,
109-
header.getContext()
110-
)}
98+
<FlexRender
99+
content={header.column.columnDef.header}
100+
context={header.getContext()}
111101
/>
112102
{/if}
113103
</th>
@@ -116,29 +106,28 @@
116106
{/each}
117107
</thead>
118108
<tbody>
119-
{#each $table.getRowModel().rows as row}
109+
{#each table.getRowModel().rows as row}
120110
<tr>
121111
{#each row.getVisibleCells() as cell}
122112
<td>
123-
<svelte:component
124-
this={flexRender(cell.column.columnDef.cell, cell.getContext())}
113+
<FlexRender
114+
content={cell.column.columnDef.cell}
115+
context={cell.getContext()}
125116
/>
126117
</td>
127118
{/each}
128119
</tr>
129120
{/each}
130121
</tbody>
131122
<tfoot>
132-
{#each $table.getFooterGroups() as footerGroup}
123+
{#each table.getFooterGroups() as footerGroup}
133124
<tr>
134125
{#each footerGroup.headers as header}
135126
<th>
136127
{#if !header.isPlaceholder}
137-
<svelte:component
138-
this={flexRender(
139-
header.column.columnDef.footer,
140-
header.getContext()
141-
)}
128+
<FlexRender
129+
content={header.column.columnDef.footer}
130+
context={header.getContext()}
142131
/>
143132
{/if}
144133
</th>
@@ -148,5 +137,4 @@
148137
</tfoot>
149138
</table>
150139
<div class="h-4" />
151-
<button on:click={() => rerender()} class="border p-2"> Rerender </button>
152140
</div>

‎examples/svelte/basic/src/main.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
// @ts-ignore
22
import App from './App.svelte'
3+
import { mount } from 'svelte'
34

4-
const app = new App({
5+
const app = mount(App, {
56
target: document.getElementById('root')!,
67
})
78

‎examples/svelte/column-groups/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"@sveltejs/vite-plugin-svelte": "^3.1.0",
1515
"@tanstack/svelte-table": "^9.0.0-alpha.0",
1616
"@tsconfig/svelte": "^5.0.4",
17-
"svelte": "^4.2.15",
17+
"svelte": "5.0.0-next.153",
1818
"svelte-check": "^3.7.0",
1919
"typescript": "5.4.5",
2020
"vite": "^5.2.10"

‎examples/svelte/column-groups/src/App.svelte

+15-27
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<script lang="ts">
2-
import { writable } from 'svelte/store'
2+
import type { ColumnDef } from '@tanstack/svelte-table'
33
import {
44
createSvelteTable,
5-
flexRender,
5+
FlexRender,
66
getCoreRowModel,
77
} from '@tanstack/svelte-table'
8-
import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
98
import './index.css'
109
1110
type Person = {
@@ -96,17 +95,10 @@
9695
},
9796
]
9897
99-
const options = writable<TableOptions<Person>>({
98+
const options = {
10099
data: defaultData,
101100
columns: defaultColumns,
102101
getCoreRowModel: getCoreRowModel(),
103-
})
104-
105-
const rerender = () => {
106-
options.update(options => ({
107-
...options,
108-
data: defaultData,
109-
}))
110102
}
111103
112104
const table = createSvelteTable(options)
@@ -115,16 +107,14 @@
115107
<div class="p-2">
116108
<table>
117109
<thead>
118-
{#each $table.getHeaderGroups() as headerGroup}
110+
{#each table.getHeaderGroups() as headerGroup}
119111
<tr>
120112
{#each headerGroup.headers as header}
121113
<th colSpan={header.colSpan}>
122114
{#if !header.isPlaceholder}
123-
<svelte:component
124-
this={flexRender(
125-
header.column.columnDef.header,
126-
header.getContext()
127-
)}
115+
<FlexRender
116+
content={header.column.columnDef.header}
117+
context={header.getContext()}
128118
/>
129119
{/if}
130120
</th>
@@ -133,29 +123,28 @@
133123
{/each}
134124
</thead>
135125
<tbody>
136-
{#each $table.getRowModel().rows as row}
126+
{#each table.getRowModel().rows as row}
137127
<tr>
138128
{#each row.getVisibleCells() as cell}
139129
<td>
140-
<svelte:component
141-
this={flexRender(cell.column.columnDef.cell, cell.getContext())}
130+
<FlexRender
131+
content={cell.column.columnDef.cell}
132+
context={cell.getContext()}
142133
/>
143134
</td>
144135
{/each}
145136
</tr>
146137
{/each}
147138
</tbody>
148139
<tfoot>
149-
{#each $table.getFooterGroups() as footerGroup}
140+
{#each table.getFooterGroups() as footerGroup}
150141
<tr>
151142
{#each footerGroup.headers as header}
152143
<th colSpan={header.colSpan}>
153144
{#if !header.isPlaceholder}
154-
<svelte:component
155-
this={flexRender(
156-
header.column.columnDef.footer,
157-
header.getContext()
158-
)}
145+
<FlexRender
146+
content={header.column.columnDef.footer}
147+
context={header.getContext()}
159148
/>
160149
{/if}
161150
</th>
@@ -165,5 +154,4 @@
165154
</tfoot>
166155
</table>
167156
<div class="h-4" />
168-
<button on:click={() => rerender()} class="border p-2"> Rerender </button>
169157
</div>

‎examples/svelte/column-groups/src/main.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
// @ts-ignore
22
import App from './App.svelte'
3+
import { mount } from 'svelte'
34

4-
const app = new App({
5+
const app = mount(App, {
56
target: document.getElementById('root')!,
67
})
78

‎examples/svelte/column-ordering/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
"devDependencies": {
1313
"@faker-js/faker": "^8.4.1",
1414
"@rollup/plugin-replace": "^5.0.5",
15+
"svelte": "5.0.0-next.153",
1516
"@sveltejs/vite-plugin-svelte": "^3.1.0",
1617
"@tanstack/svelte-table": "^9.0.0-alpha.0",
1718
"@tsconfig/svelte": "^5.0.4",
18-
"svelte": "^4.2.15",
1919
"svelte-check": "^3.7.0",
2020
"typescript": "5.4.5",
2121
"vite": "^5.2.10"

0 commit comments

Comments
 (0)
Please sign in to comment.