Tanstack Solid Table With Tanstack Query

This skill builds on @tanstack/table-core#client-vs-server, getting-started, and table-state. Query owns remote data; Table receives already processed rows for each manual stage.

Setup

import { keepPreviousData, useQuery } from '@tanstack/solid-query'
import { createAtom, useSelector } from '@tanstack/solid-store'
import {
  createTable,
  rowPaginationFeature,
  tableFeatures,
} from '@tanstack/solid-table'

const features = tableFeatures({ rowPaginationFeature })
const emptyRows: Array<{ id: string }> = []
const paginationAtom = createAtom({ pageIndex: 0, pageSize: 20 })
const pagination = useSelector(paginationAtom)
const result = useQuery(() => ({
  queryKey: ['people', pagination()],
  queryFn: () => fetchPeople(pagination()),
  placeholderData: keepPreviousData,
}))
const table = createTable({
  features,
  columns,
  get data() {
    return result.data?.rows ?? emptyRows
  },
  get rowCount() {
    return result.data?.rowCount
  },
  atoms: { pagination: paginationAtom },
  manualPagination: true,
})

Core Patterns

Track every server-owned slice

const result = useQuery(() => ({
  queryKey: ['people', pagination(), sorting()],
  queryFn: () => fetchPeople({ pagination: pagination(), sorting: sorting() }),
}))

Expose query results through getters

const table = createTable({
  features,
  columns,
  get data() {
    return result.data?.rows ?? emptyRows
  },
})

Common Mistakes

HIGH Snapshotting the query key

Wrong:

useQuery({ queryKey: ['people', pagination()], queryFn: fetchPeople })

Correct:

useQuery(() => ({
  queryKey: ['people', pagination()],
  queryFn: () => fetchPeople(pagination()),
}))

Solid Query's options factory tracks signals read while constructing the key and request.

Source: examples/solid/with-tanstack-query

HIGH Copying React Query state glue

Wrong:

useEffect(() => setRows(result.data?.rows ?? []), [result.data])

Correct:

get data() { return result.data?.rows ?? emptyRows }

Solid getters connect the query result directly without a second synchronization layer.

Source: examples/solid/with-tanstack-query

HIGH Expecting manual mode to process

Wrong:

createTable({ features, columns, data, manualPagination: true })

Correct:

createTable({
  features,
  columns,
  get data() {
    return result.data?.rows ?? emptyRows
  },
  get rowCount() {
    return result.data?.rowCount
  },
  manualPagination: true,
})

Manual pagination bypasses the client row model; it does not fetch, page, or count data.

Source: docs/framework/solid/guide/pagination.md

API Discovery

Inspect installed node_modules/@tanstack/solid-table/dist/createTable.d.ts and the relevant core feature source; inspect @tanstack/solid-query source for reactive option shapes.