Another Svelte 4 adapter idea

[noy4]

If you want to update the table state with the svelte adapter from @tanstack/svelte-table, you need to do it like options.update(), but I didn't like it. So I made a custom svelte adapter for my project, which updates the table state like table.setOptions().

(before)

const options = writable({ columns, data })
const table = createSvelteTable(options)
options.update(v => ({ ...v, data }))

(after)

const table = createSvelteTable({ columns, data })
table.setOptions(v => ({ ...v, data }))

Code

import type { RowData, Table, TableOptions } from '@tanstack/svelte-table'
import { createTable, functionalUpdate } from '@tanstack/svelte-table'
import { type Writable, writable } from 'svelte/store'

export type SvelteTable<T> = Writable<Table<T>> & {
  setOptions: Table<T>['setOptions']
}

export function createSvelteTable<TData extends RowData>(
  options: TableOptions<TData>,
): SvelteTable<TData> {
  const _table = createTable({
    state: {},
    onStateChange: () => {},
    renderFallbackValue: null,
    ...options,
  })
  const table = writable(_table)
  let state = _table.initialState

  const setOptions: Table<TData>['setOptions'] = (newOptions) => {
    _table.setOptions(newOptions)
    table.update(v => v)
  }

  _table.setOptions((prev) => {
    return {
      ...prev,
      state: { ...state, ...options.state },
      onStateChange: (updater) => {
        state = functionalUpdate(updater, state)
        setOptions(v => ({ ...v, state }))
        options.onStateChange?.(updater)
      },
    }
  })

  return {
    ...table,
    setOptions,
  }
}

[noy4]

refs:
#5403
#3872

[KevinVandy]

The Svelte adapter can use a lot of improvement, especially to make compatible with Svelte 5. New ideas welcome