TanStack
Table betabeta
Docs
Cloudflare
CodeRabbit
Railway
OpenRouter
Netlify
SerpAPI
Clerk
WorkOS
AG Grid
Unkey
Prisma
Electric
Sentry
Cloudflare
CodeRabbit
Railway
OpenRouter
Netlify
SerpAPI
Clerk
WorkOS
AG Grid
Unkey
Prisma
Electric
Sentry
Menu
Getting Started
Core Guides
Feature Guides
API Reference
Table API Reference
Column API Reference
Row API Reference
Cell API Reference
Header API Reference
Features API Reference
Static Functions API Reference
Basic Examples
Feature Examples
Specialized Examples
Table API Reference

TableController

Class: TableController<TFeatures, TData>

Defined in: TableController.ts:139

A Lit ReactiveController for TanStack Table integration.

Uses constructReactivityFeature from table-core to properly integrate with the TanStack Store reactivity system, matching the pattern used by all other framework adapters (React, Vue, Solid, Svelte, Angular).

Example

ts
@customElement('my-table')
class MyTable extends LitElement {
  private tableController = new TableController<typeof features, Person>(this)

  protected render() {
    const table = this.tableController.table(
      {
        features,
        rowModels: {},
        columns,
        data,
      },
      (state) => ({ sorting: state.sorting }),
    )
    // use table in your template...
  }
}
@customElement('my-table')
class MyTable extends LitElement {
  private tableController = new TableController<typeof features, Person>(this)

  protected render() {
    const table = this.tableController.table(
      {
        features,
        rowModels: {},
        columns,
        data,
      },
      (state) => ({ sorting: state.sorting }),
    )
    // use table in your template...
  }
}

Type Parameters

TFeatures

TFeatures extends TableFeatures

TData

TData extends RowData

Implements

  • ReactiveController

Constructors

Constructor

ts
new TableController<TFeatures, TData>(host): TableController<TFeatures, TData>;
new TableController<TFeatures, TData>(host): TableController<TFeatures, TData>;

Defined in: TableController.ts:150

Parameters

host

ReactiveControllerHost

Returns

TableController<TFeatures, TData>

Properties

host

ts
host: ReactiveControllerHost;
host: ReactiveControllerHost;

Defined in: TableController.ts:143

Methods

hostConnected()

ts
hostConnected(): void;
hostConnected(): void;

Defined in: TableController.ts:251

Called when the host is connected to the component tree. For custom element hosts, this corresponds to the connectedCallback() lifecycle, which is only called when the component is connected to the document.

Returns

void

Implementation of

ts
ReactiveController.hostConnected
ReactiveController.hostConnected

hostDisconnected()

ts
hostDisconnected(): void;
hostDisconnected(): void;

Defined in: TableController.ts:255

Called when the host is disconnected from the component tree. For custom element hosts, this corresponds to the disconnectedCallback() lifecycle, which is called the host or an ancestor component is disconnected from the document.

Returns

void

Implementation of

ts
ReactiveController.hostDisconnected
ReactiveController.hostDisconnected

table()

ts
table<TSelected>(tableOptions, selector?): LitTable<TFeatures, TData, TSelected>;
table<TSelected>(tableOptions, selector?): LitTable<TFeatures, TData, TSelected>;

Defined in: TableController.ts:170

Returns the Lit-backed table instance for the current render pass.

The first call constructs the table with Lit reactivity bindings and subscribes the host to table state/options changes. Later calls merge new options into the same table instance and expose selected state through table.state.

Type Parameters

TSelected

TSelected = TableState<TFeatures>

Parameters

tableOptions

TableOptions<TFeatures, TData>

selector?

(state) => TSelected

Returns

LitTable<TFeatures, TData, TSelected>

Example

ts
const table = this.tableController.table(
  { features, rowModels: {}, columns, data },
  (state) => ({ sorting: state.sorting }),
)
const table = this.tableController.table(
  { features, rowModels: {}, columns, data },
  (state) => ({ sorting: state.sorting }),
)
Edit on GitHub
DebugOptions
createTableHook
© 2026 TanStack LLC