Skip to content

TableController.md

Latest commit

 

History

History
175 lines (112 loc) · 3.57 KB

TableController.md

File metadata and controls

175 lines (112 loc) · 3.57 KB
id TableController
title 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

@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

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

Defined in: TableController.ts:150

Parameters

host

ReactiveControllerHost

Returns

TableController<TFeatures, TData>

Properties

host

host: ReactiveControllerHost;

Defined in: TableController.ts:143

Methods

hostConnected()

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

ReactiveController.hostConnected

hostDisconnected()

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

ReactiveController.hostDisconnected

table()

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

const table = this.tableController.table(
  { _features, _rowModels: {}, columns, data },
  (state) => ({ sorting: state.sorting }),
)