start rewriting svelte5 adapter

examples/react/basic/src/main.tsx

@@ -110,6 +110,8 @@ function App() {
     // add additional table options here
   })
 
+  console.log('table', table)
+
   // 7. Render your table markup from the table instance APIs
   return (
     <div className="p-2">

examples/svelte/basic/src/App.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
   import type { ColumnDef, TableOptions } from '@tanstack/svelte-table'
   import {
-    createCoreRowModel,
     createTable,
     FlexRender,
+    tableFeatures,
   } from '@tanstack/svelte-table'
   import './index.css'
 
+  // This example uses the classic standalone `createTable` util to create a table without the new `createTableHelper` util.
+
+  // 1. Define what the shape of your data will be for each row
   type Person = {
     firstName: string
     lastName: string
@@ -16,7 +19,8 @@
     progress: number
   }
 
-  const defaultData: Person[] = [
+  // 2. Create some dummy data with a stable reference (this could be an API response stored in useState or similar)
+  const data: Person[] = [
     {
       firstName: 'tanner',
       lastName: 'linsley',
@@ -43,7 +47,11 @@
     },
   ]
 
-  const defaultColumns: ColumnDef<any, Person>[] = [
+  // 3. New in V9! Tell the table which features and row models we want to use. In this case, this will be a basic table with no additional features
+  const _features = tableFeatures({})
+
+  // 4. Define the columns for your table. This uses the new `ColumnDef` type to define columns. Alternatively, check out the createTableHelper/createColumnHelper util for an even more type-safe way to define columns.
+  const columns: ColumnDef<typeof _features, Person>[] = [
     {
       accessorKey: 'firstName',
       cell: (info) => info.getValue(),
@@ -78,13 +86,14 @@
     },
   ]
 
-  let options: TableOptions<any, Person> = {
-    data: defaultData,
-    columns: defaultColumns,
-    getCoreRowModel: createCoreRowModel(),
-  }
-
-  const table = createTable(options)
+  // 5. Create the table instance with required _features, columns, and data
+  const table = createTable({
+    _features, // new required option in V9. Tell the table which features you are importing and using (better tree-shaking)
+    _rowModels: {}, // `Core` row model is now included by default, but you can still override it here
+    columns,
+    data,
+    // add additional table options here
+  })
 </script>
 
 <div class="p-2">
@@ -108,7 +117,7 @@
     <tbody>
       {#each table.getRowModel().rows as row}
         <tr>
-          {#each row.getVisibleCells() as cell}
+          {#each row.getAllCells() as cell}
             <td>
               <FlexRender
                 content={cell.column.columnDef.cell}

packages/react-table/src/useTable.ts

@@ -1,8 +1,8 @@
-import { useState, useRef } from 'react'
+import { useRef, useState } from 'react'
 import {
   constructTable,
-  getInitialTableState,
   coreFeatures,
+  getInitialTableState,
 } from '@tanstack/table-core'
 import type {
   RowData,

packages/svelte-table/src/table.svelte.ts → packages/svelte-table/src/createTable.svelte.ts

@@ -1,68 +1,56 @@
-import { constructTable } from '@tanstack/table-core'
+import {
+  constructTable,
+  coreFeatures,
+  getInitialTableState,
+} from '@tanstack/table-core'
 import type {
   RowData,
   TableFeatures,
   TableOptions,
   TableState,
 } from '@tanstack/table-core'
 
-/**
- * Creates a reactive TanStack table object for Svelte.
- * @param options Table options to create the table with.
- * @returns A reactive table object.
- * @example
- * ```svelte
- * <script>
- *   const table = createTable({ ... })
- * </script>
- *
- * <table>
- *   <thead>
- *     {#each table.getHeaderGroups() as headerGroup}
- *       <tr>
- *         {#each headerGroup.headers as header}
- *           <th colspan={header.colSpan}>
- *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
- *         	 </th>
- *         {/each}
- *       </tr>
- *     {/each}
- *   </thead>
- * 	 <!-- ... -->
- * </table>
- * ```
- */
 export function createTable<
   TFeatures extends TableFeatures,
   TData extends RowData,
->(options: TableOptions<TFeatures, TData>) {
-  const resolvedOptions: TableOptions<TFeatures, TData> = mergeObjects(
+>(tableOptions: TableOptions<TFeatures, TData>) {
+  const _features = { ...coreFeatures, ...tableOptions._features }
+
+  console.log('features', _features)
+
+  let state = $state<Partial<TableState<TFeatures>>>(
+    getInitialTableState(_features, tableOptions.initialState),
+  )
+
+  const statefulOptions: TableOptions<TFeatures, TData> = mergeObjects(
     {
-      state: {},
-      onStateChange() {},
-      renderFallbackValue: null,
+      _features,
+      state: { ...state, ...tableOptions.state },
       mergeOptions: (
         defaultOptions: TableOptions<TFeatures, TData>,
         newOptions: Partial<TableOptions<TFeatures, TData>>,
       ) => {
         return mergeObjects(defaultOptions, newOptions)
       },
     },
-    options,
+    tableOptions,
   )
 
-  const table = constructTable(resolvedOptions)
-  let state = $state<Partial<TableState<TFeatures>>>(table.initialState)
+  console.log('statefulOptions', statefulOptions)
+
+  const table = constructTable(statefulOptions)
+
+  console.log('table', table)
 
   function updateOptions() {
     table.setOptions((prev) => {
-      return mergeObjects(prev, options, {
-        state: mergeObjects(state, options.state || {}),
+      return mergeObjects(prev, tableOptions, {
+        state: mergeObjects(state, tableOptions.state || {}),
         onStateChange: (updater: any) => {
           if (updater instanceof Function) state = updater(state)
           else state = mergeObjects(state, updater)
 
-          options.onStateChange?.(updater)
+          tableOptions.onStateChange?.(updater)
         },
       })
     })
@@ -71,7 +59,7 @@ export function createTable<
   updateOptions()
 
   $effect.pre(() => {
-    updateOptions()
+    updateOptions() // re-render the table whenever the state or options change
   })
 
   return table

packages/svelte-table/src/index.ts

@@ -1,4 +1,4 @@
 export * from '@tanstack/table-core'
-export { default as FlexRender } from './flex-render.svelte'
+export { default as FlexRender } from './FlexRender.svelte'
 export { renderComponent } from './render-component'
-export { createTable } from './table.svelte'
+export { createTable } from './createTable.svelte'

packages/table-core/src/core/table/constructTable.test.ts

@@ -1,10 +1,11 @@
 import { describe, expect, it } from 'vitest'
-import { constructTable, coreFeatures } from './constructTable'
+import { stockFeatures } from '../../features/stockFeatures'
+import { constructTable } from './constructTable'
 
-describe('createTable', () => {
+describe('constructTable', () => {
   it('should create a table with all core table APIs and properties', () => {
     const table = constructTable({
-      _features: coreFeatures,
+      _features: stockFeatures,
       columns: [],
       data: [],
     })