TanStack
Table alphaalpha
Docs
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
CodeRabbit
Cloudflare
AG Grid
SerpAPI
Netlify
OpenRouter
WorkOS
Clerk
Electric
PowerSync
Sentry
Railway
Prisma
Strapi
Unkey
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:132

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:143

Parameters

host

ReactiveControllerHost

Returns

TableController<TFeatures, TData>

Properties

host

ts
host: ReactiveControllerHost;
host: ReactiveControllerHost;

Defined in: TableController.ts:136

Methods

hostConnected()

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

Defined in: TableController.ts:244

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:248

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:163

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