table-state

Load intent load @tanstack/table-core#table-state first for shared ownership, initialization, updater, and reset rules.

TableController selects all registered state by default and requests host updates when selected state changes. table.state is the selected render value. table.atoms.<slice>.get() and table.store.state are snapshots; those reads do not create a template subscription.

Controlled property setup

<!-- skill-snippet:check tsconfig=examples/lit/basic-table-controller/tsconfig.json -->

import { LitElement, html } from 'lit'
import { customElement, state } from 'lit/decorators.js'
import {
  TableController,
  rowPaginationFeature,
  tableFeatures,
  type PaginationState,
} from '@tanstack/lit-table'

const features = tableFeatures({ rowPaginationFeature })
const columns = [{ accessorKey: 'id' }]
const data = [{ id: '1' }]

@customElement('page-status')
export class PageStatus extends LitElement {
  @state() private pagination: PaginationState = { pageIndex: 0, pageSize: 10 }
  private controller = new TableController<typeof features, { id: string }>(
    this,
  )

  protected render() {
    const table = this.controller.table({
      features,
      columns,
      data,
      state: { pagination: this.pagination },
      onPaginationChange: (next) => {
        this.pagination =
          typeof next === 'function' ? next(this.pagination) : next
      },
    })
    return html`<button @click=${() => table.nextPage()}>
      Page ${table.state.pagination.pageIndex + 1}
    </button>`
  }
}

Reactive boundaries

• Keep one controller on the host and pass current options during render. Keep features, columns, and data references stable across host updates.
• A second controller.table(options, selector) argument changes the shape of table.state and gates host updates. Keep reused selectors stable.
• Use table.subscribe(source, selector, renderCallback) for a template region that should update independently. Cache selector functions as host fields or module functions.
• Feed every controlled callback result into the corresponding reactive property and pass it back through state. Use stable external atoms through atoms when sharing state outside the host.

Read for the task

For advanced reactive boundaries, shared atoms, or detailed subscription examples, read reactivity. For construction or rendering setup, read getting-started.

API discovery

Inspect node_modules/@tanstack/lit-table/dist/index.d.ts, then TableController.d.ts, flexRender.d.ts, or the relevant exported declaration. Core feature APIs are in node_modules/@tanstack/table-core/dist/features/.