feat: svelte 5 adapter

.gitignore

@@ -25,6 +25,7 @@ coverage
 .env.test.local
 .env.production.local
 .next
+.svelte-kit
 
 npm-debug.log*
 yarn-debug.log*

examples/svelte/basic/package.json

@@ -11,10 +11,10 @@
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.5",
+    "svelte": "5.0.0-next.153",
     "@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"

examples/svelte/basic/src/App.svelte

@@ -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 = {
@@ -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)
@@ -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>
@@ -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>
@@ -148,5 +137,4 @@
     </tfoot>
   </table>
   <div class="h-4" />
-  <button on:click={() => rerender()} class="border p-2"> Rerender </button>
 </div>

examples/svelte/basic/src/main.ts

@@ -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')!,
 })
 

examples/svelte/column-groups/package.json

@@ -14,7 +14,7 @@
     "@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": "5.0.0-next.153",
     "svelte-check": "^3.7.0",
     "typescript": "5.4.5",
     "vite": "^5.2.10"

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

@@ -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 = {
@@ -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)
@@ -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>
@@ -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>
@@ -165,5 +154,4 @@
     </tfoot>
   </table>
   <div class="h-4" />
-  <button on:click={() => rerender()} class="border p-2"> Rerender </button>
 </div>

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

@@ -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')!,
 })
 

examples/svelte/column-ordering/package.json

@@ -12,10 +12,10 @@
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
     "@rollup/plugin-replace": "^5.0.5",
+    "svelte": "5.0.0-next.153",
     "@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"