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