fix lit adapter and lit examples

Author: KevinVandy

examples/lit/column-sizing/src/main.ts

@@ -59,7 +59,7 @@ const data: Array<Person> = makeData(1000)
 @customElement('lit-table-example')
 class LitTableExample extends LitElement {
   @state()
-  private tableController = new TableController<any, Person>(this)
+  private tableController = new TableController<typeof _features, Person>(this)
 
   protected render() {
     const table = this.tableController.table({
@@ -118,7 +118,7 @@ class LitTableExample extends LitElement {
               (row) => html`
                 <tr>
                   ${row
-                    .getVisibleCells()
+                    .getAllCells()
                     .map(
                       (cell) => html`
                         <td>

examples/lit/filters/src/main.ts

@@ -94,7 +94,7 @@ const data = makeData(50_000)
 @customElement('column-filter')
 class ColumnFilter extends LitElement {
   @property()
-  private column!: Column<any, {}>
+  private column!: Column<typeof _features, Person>
 
   private onChange(evt: InputEvent) {
     this.column.setFilterValue((evt.target as HTMLInputElement).value)
@@ -153,12 +153,12 @@ class ColumnFilter extends LitElement {
 
 @customElement('lit-table-example')
 class LitTableExample extends LitElement {
-  private tableController = new TableController<any, any>(this)
+  private tableController = new TableController<typeof _features, Person>(this)
 
   @state()
   private _columnFilters: ColumnFiltersState = []
 
-  protected render(): unknown {
+  protected render() {
     const table = this.tableController.table({
       _features,
       _rowModels: {
@@ -242,7 +242,7 @@ class LitTableExample extends LitElement {
               (row) => html`
                 <tr>
                   ${row
-                    .getVisibleCells()
+                    .getAllCells()
                     .map(
                       (cell) => html`
                         <td>

examples/lit/row-selection/src/main.ts

@@ -13,7 +13,7 @@ import {
   tableFeatures,
 } from '@tanstack/lit-table'
 import { makeData } from './makeData'
-import type { ColumnDef } from '@tanstack/lit-table'
+import type { ColumnDef, RowSelectionState } from '@tanstack/lit-table'
 import type { Person } from './makeData'
 
 const _features = tableFeatures({
@@ -81,12 +81,12 @@ const data = makeData(50_000)
 
 @customElement('lit-table-example')
 class LitTableExample extends LitElement {
-  private tableController = new TableController<any, Person>(this)
+  private tableController = new TableController<typeof _features, Person>(this)
 
   @state()
-  private _rowSelection: Record<string, boolean> = {}
+  private _rowSelection: RowSelectionState = {}
 
-  protected render(): unknown {
+  protected render() {
     const table = this.tableController.table({
       _features,
       _rowModels: {
@@ -145,7 +145,7 @@ class LitTableExample extends LitElement {
               (row) => html`
                 <tr>
                   ${row
-                    .getVisibleCells()
+                    .getAllCells()
                     .map(
                       (cell) => html`
                         <td>

examples/lit/sorting/src/main.ts

@@ -6,24 +6,25 @@ import {
   TableController,
   createSortedRowModel,
   flexRender,
+  isFunction,
   rowSortingFeature,
   sortFns,
   tableFeatures,
 } from '@tanstack/lit-table'
 import { Person, makeData } from './makeData'
 import type { ColumnDef, SortFn, SortingState } from '@tanstack/lit-table'
 
-const sortStatusFn: SortFn<any, Person> = (rowA, rowB, _columnId) => {
+const _features = tableFeatures({
+  rowSortingFeature,
+})
+
+const sortStatusFn: SortFn<any, any> = (rowA, rowB, _columnId) => {
   const statusA = rowA.original.status
   const statusB = rowB.original.status
   const statusOrder = ['single', 'complicated', 'relationship']
   return statusOrder.indexOf(statusA) - statusOrder.indexOf(statusB)
 }
 
-const _features = tableFeatures({
-  rowSortingFeature,
-})
-
 const columns: Array<ColumnDef<typeof _features, Person>> = [
   {
     accessorKey: 'firstName',
@@ -77,7 +78,7 @@ class LitTableExample extends LitElement {
   @state()
   private _sorting: SortingState = []
 
-  private tableController = new TableController<any, Person>(this)
+  private tableController = new TableController<typeof _features, Person>(this)
 
   protected render() {
     const table = this.tableController.table({
@@ -91,7 +92,7 @@ class LitTableExample extends LitElement {
         sorting: this._sorting,
       },
       onSortingChange: (updaterOrValue) => {
-        if (typeof updaterOrValue === 'function') {
+        if (isFunction(updaterOrValue)) {
           this._sorting = updaterOrValue(this._sorting)
         } else {
           this._sorting = updaterOrValue
@@ -148,7 +149,7 @@ class LitTableExample extends LitElement {
               (row) => html`
                 <tr>
                   ${row
-                    .getVisibleCells()
+                    .getAllCells()
                     .map(
                       (cell) => html`
                         <td>

examples/lit/virtualized-rows/src/main.ts

@@ -6,6 +6,7 @@ import {
   columnSizingFeature,
   createSortedRowModel,
   flexRender,
+  rowSortingFeature,
   sortFns,
   tableFeatures,
 } from '@tanstack/lit-table'
@@ -17,6 +18,7 @@ import type { ColumnDef } from '@tanstack/lit-table'
 
 const _features = tableFeatures({
   columnSizingFeature,
+  rowSortingFeature,
 })
 
 const columns: Array<ColumnDef<typeof _features, Person>> = [
@@ -65,7 +67,7 @@ const data = makeData(50_000)
 
 @customElement('lit-table-example')
 class LitTableExample extends LitElement {
-  private tableController = new TableController<any, Person>(this)
+  private tableController = new TableController<typeof _features, Person>(this)
 
   private tableContainerRef: Ref = createRef()
 
@@ -81,7 +83,7 @@ class LitTableExample extends LitElement {
     super.connectedCallback()
   }
 
-  protected render(): unknown {
+  protected render() {
     const table = this.tableController.table({
       _features,
       _rowModels: {
@@ -173,7 +175,7 @@ class LitTableExample extends LitElement {
                       )}
                     >
                       ${repeat(
-                        row.getVisibleCells(),
+                        row.getAllCells(),
                         (cell) => cell.id,
                         (cell) => html`
                           <td

packages/lit-table/src/TableController.ts

@@ -10,6 +10,7 @@ import type {
   TableFeatures,
   TableOptions,
   TableState,
+  Updater,
 } from '@tanstack/table-core'
 import type { ReactiveController, ReactiveControllerHost } from 'lit'
 
@@ -20,42 +21,43 @@ export class TableController<
 {
   host: ReactiveControllerHost
 
-  private tableInstance: Table<TFeatures, TData> | null = null
-
-  private state: TableState<TFeatures> = {} as TableState<TFeatures>
+  private _features: TableFeatures | null = null
+  private _state: TableState<TFeatures> | null = null
+  private _table: Table<TFeatures, TData> | null = null
 
   constructor(host: ReactiveControllerHost) {
     ;(this.host = host).addController(this)
   }
 
-  public table(tableOptions: TableOptions<TFeatures, TData>) {
-    if (!this.tableInstance) {
-      const _features = { ...coreFeatures, ...tableOptions._features }
-
-      this.state = {
-        ...getInitialTableState(_features, tableOptions.initialState),
-        ...tableOptions.state,
-      }
+  public table(
+    tableOptions: TableOptions<TFeatures, TData>,
+  ): Table<TFeatures, TData> {
+    if (!this._table) {
+      this._features = { ...coreFeatures, ...tableOptions._features }
+      this._state = getInitialTableState(
+        this._features,
+        tableOptions.initialState,
+      )
 
-      const statefulOptions: TableOptions<TFeatures, TData> = {
+      const initialOptions: TableOptions<TFeatures, TData> = {
         ...tableOptions,
-        state: { ...this.state, ...tableOptions.state },
-        onStateChange: (updater) => {
-          this.state = isFunction(updater) ? updater(this.state) : updater
-          this.host.requestUpdate()
-          tableOptions.onStateChange?.(updater)
-        },
+        _features: this._features,
       }
 
-      this.tableInstance = constructTable(statefulOptions)
+      this._table = constructTable(initialOptions)
     }
 
-    // this.tableInstance.setOptions((prev) => ({
-    //   ...prev,
-    //   state: { ...this.state, ...tableOptions.state },
-    // }))
+    this._table.setOptions((prev) => ({
+      ...prev,
+      state: { ...this._state, ...tableOptions.state },
+      onStateChange: (updater: Updater<TableState<TFeatures>>) => {
+        this._state = isFunction(updater) ? updater(this._state!) : updater
+        this.host.requestUpdate()
+        tableOptions.onStateChange?.(updater)
+      },
+    }))
 
-    return this.tableInstance
+    return this._table
   }
 
   hostDisconnected() {}