Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: svelte 5 adapter #5403

Open
wants to merge 33 commits into
base: alpha
Choose a base branch
from
Open

feat: svelte 5 adapter #5403

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
c7a92a3
updated svelte-table adapter to Svelte 5
Mar 11, 2024
a9acc09
updated rollup-plugin-svelte
Mar 12, 2024
0d42c16
updated prettier plugin for svelte
Mar 12, 2024
25a8057
updated the table implementation and applied formatting
Mar 12, 2024
63db98d
updated flex-render documentation
Mar 12, 2024
9428a3d
Update packages/svelte-table/src/flex-render.svelte
wlockiv Mar 13, 2024
517a862
re-add tweak rollup config and uglify TContext in flex-render
Mar 13, 2024
a44aa1a
Merge branch 'feat-svelte-5-adapter' of github.com:wlockiv/tanstack-t…
Mar 13, 2024
28b3441
updated svelte-basic example
Mar 13, 2024
c7ba006
revert svelte-table version
Mar 13, 2024
e4a6ae0
correction - using wrong content object for footer
Mar 13, 2024
4e3338d
removing unused imports from svelte's basic example
Mar 13, 2024
d9a2262
updated tanstack-table-example-svelte-column-groups to svelte 5
Mar 13, 2024
7ca9368
updated svelte-table column order example
Mar 14, 2024
19e3d8c
column-pinning example
Mar 14, 2024
58630ca
svelte column visibility example
Mar 14, 2024
8381954
svelte filtering example
Mar 14, 2024
5cdd953
simplified column-visibility svelte example a tiny bit
Mar 14, 2024
af910ae
svelte sorting example
Mar 14, 2024
9b2cbe3
remove comment from svelte sorting example
Mar 14, 2024
027d1f1
fix svelte flex-render ts types and docs
Mar 14, 2024
b0d6713
implement svelte-package
Mar 14, 2024
7167446
updated svelte package.json and corrected type error in flex render
Mar 14, 2024
80fc5de
prettier
Mar 14, 2024
be8752e
removed rollup-plugin-svelte dependencies
Mar 14, 2024
edcc180
inline the flex render component
Mar 14, 2024
77c41e6
Merge branch 'main' into feat-svelte-5-adapter
KevinVandy Mar 21, 2024
914665e
fixed test errors
Mar 29, 2024
a0664fb
Merge branch 'main' of github.com:wlockiv/tanstack-table into feat-sv…
Mar 29, 2024
8b3b064
removed duplicate devdependencies in the svelte package
Mar 29, 2024
4d2ccbc
Merge branch 'feat-svelte-5-adapter' of github.com:wlockiv/tanstack-t…
Mar 29, 2024
9aaccbb
Merge branch 'feat-svelte-5-adapter' of github.com:wlockiv/tanstack-t…
Apr 29, 2024
750c3ed
Merge branch 'alpha' into feat-svelte-5-adapter
lachlancollins May 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ coverage
.env.test.local
.env.production.local
.next
.svelte-kit

npm-debug.log*
yarn-debug.log*
Expand Down
2 changes: 1 addition & 1 deletion examples/svelte/basic/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@
},
"devDependencies": {
"@rollup/plugin-replace": "^5.0.5",
"svelte": "5.0.0-next.78",
"@sveltejs/vite-plugin-svelte": "^3.1.0",
"@tanstack/svelte-table": "^9.0.0-alpha.0",
"@tsconfig/svelte": "^5.0.4",
"svelte": "^4.2.15",
"svelte-check": "^3.7.0",
"typescript": "5.4.5",
"vite": "^5.2.10"
Expand Down
42 changes: 15 additions & 27 deletions examples/svelte/basic/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<script lang="ts">
import { writable } from 'svelte/store'
import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
import {
createSvelteTable,
flexRender,
FlexRender,
getCoreRowModel,
} from '@tanstack/svelte-table'
import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
import './index.css'

type Person = {
Expand Down Expand Up @@ -79,17 +78,10 @@
},
]

const options = writable<TableOptions<Person>>({
let options: TableOptions<Person> = {
data: defaultData,
columns: defaultColumns,
getCoreRowModel: getCoreRowModel(),
})

const rerender = () => {
options.update(options => ({
...options,
data: defaultData,
}))
}

const table = createSvelteTable(options)
Expand All @@ -98,16 +90,14 @@
<div class="p-2">
<table>
<thead>
{#each $table.getHeaderGroups() as headerGroup}
{#each table.getHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th>
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
<FlexRender
content={header.column.columnDef.header}
context={header.getContext()}
/>
{/if}
</th>
Expand All @@ -116,29 +106,28 @@
{/each}
</thead>
<tbody>
{#each $table.getRowModel().rows as row}
{#each table.getRowModel().rows as row}
<tr>
{#each row.getVisibleCells() as cell}
<td>
<svelte:component
this={flexRender(cell.column.columnDef.cell, cell.getContext())}
<FlexRender
content={cell.column.columnDef.cell}
context={cell.getContext()}
/>
</td>
{/each}
</tr>
{/each}
</tbody>
<tfoot>
{#each $table.getFooterGroups() as footerGroup}
{#each table.getFooterGroups() as footerGroup}
<tr>
{#each footerGroup.headers as header}
<th>
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.footer,
header.getContext()
)}
<FlexRender
content={header.column.columnDef.footer}
context={header.getContext()}
/>
{/if}
</th>
Expand All @@ -148,5 +137,4 @@
</tfoot>
</table>
<div class="h-4" />
<button on:click={() => rerender()} class="border p-2"> Rerender </button>
</div>
3 changes: 2 additions & 1 deletion examples/svelte/basic/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
// @ts-ignore
import App from './App.svelte'
import { mount } from 'svelte'

const app = new App({
const app = mount(App, {
target: document.getElementById('root')!,
})

Expand Down
42 changes: 15 additions & 27 deletions examples/svelte/column-groups/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<script lang="ts">
import { writable } from 'svelte/store'
import type { ColumnDef } from '@tanstack/svelte-table'
import {
createSvelteTable,
flexRender,
FlexRender,
getCoreRowModel,
} from '@tanstack/svelte-table'
import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
import './index.css'

type Person = {
Expand Down Expand Up @@ -96,17 +95,10 @@
},
]

const options = writable<TableOptions<Person>>({
const options = {
data: defaultData,
columns: defaultColumns,
getCoreRowModel: getCoreRowModel(),
})

const rerender = () => {
options.update(options => ({
...options,
data: defaultData,
}))
}

const table = createSvelteTable(options)
Expand All @@ -115,16 +107,14 @@
<div class="p-2">
<table>
<thead>
{#each $table.getHeaderGroups() as headerGroup}
{#each table.getHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th colSpan={header.colSpan}>
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
<FlexRender
content={header.column.columnDef.header}
context={header.getContext()}
/>
{/if}
</th>
Expand All @@ -133,29 +123,28 @@
{/each}
</thead>
<tbody>
{#each $table.getRowModel().rows as row}
{#each table.getRowModel().rows as row}
<tr>
{#each row.getVisibleCells() as cell}
<td>
<svelte:component
this={flexRender(cell.column.columnDef.cell, cell.getContext())}
<FlexRender
content={cell.column.columnDef.cell}
context={cell.getContext()}
/>
</td>
{/each}
</tr>
{/each}
</tbody>
<tfoot>
{#each $table.getFooterGroups() as footerGroup}
{#each table.getFooterGroups() as footerGroup}
<tr>
{#each footerGroup.headers as header}
<th colSpan={header.colSpan}>
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.footer,
header.getContext()
)}
<FlexRender
content={header.column.columnDef.footer}
context={header.getContext()}
/>
{/if}
</th>
Expand All @@ -165,5 +154,4 @@
</tfoot>
</table>
<div class="h-4" />
<button on:click={() => rerender()} class="border p-2"> Rerender </button>
</div>
3 changes: 2 additions & 1 deletion examples/svelte/column-groups/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
// @ts-ignore
import App from './App.svelte'
import { mount } from 'svelte'

const app = new App({
const app = mount(App, {
target: document.getElementById('root')!,
})

Expand Down
2 changes: 1 addition & 1 deletion examples/svelte/column-ordering/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@
"devDependencies": {
"@faker-js/faker": "^8.4.1",
"@rollup/plugin-replace": "^5.0.5",
"svelte": "5.0.0-next.78",
"@sveltejs/vite-plugin-svelte": "^3.1.0",
"@tanstack/svelte-table": "^9.0.0-alpha.0",
"@tsconfig/svelte": "^5.0.4",
"svelte": "^4.2.15",
"svelte-check": "^3.7.0",
"typescript": "5.4.5",
"vite": "^5.2.10"
Expand Down