From 9a6f47213077293ebaef2f91c698ba4d62f26497 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Sat, 4 Jan 2025 20:52:09 -0600 Subject: [PATCH] fix lit adapter and lit examples --- examples/lit/column-sizing/src/main.ts | 4 +- examples/lit/filters/src/main.ts | 8 ++-- examples/lit/row-selection/src/main.ts | 10 ++--- examples/lit/sorting/src/main.ts | 17 ++++---- examples/lit/virtualized-rows/src/main.ts | 8 ++-- packages/lit-table/src/TableController.ts | 50 ++++++++++++----------- 6 files changed, 51 insertions(+), 46 deletions(-) diff --git a/examples/lit/column-sizing/src/main.ts b/examples/lit/column-sizing/src/main.ts index e64928c8a9..bd53572664 100644 --- a/examples/lit/column-sizing/src/main.ts +++ b/examples/lit/column-sizing/src/main.ts @@ -59,7 +59,7 @@ const data: Array = makeData(1000) @customElement('lit-table-example') class LitTableExample extends LitElement { @state() - private tableController = new TableController(this) + private tableController = new TableController(this) protected render() { const table = this.tableController.table({ @@ -118,7 +118,7 @@ class LitTableExample extends LitElement { (row) => html` ${row - .getVisibleCells() + .getAllCells() .map( (cell) => html` diff --git a/examples/lit/filters/src/main.ts b/examples/lit/filters/src/main.ts index 66978a4d15..df9f6b3c6c 100644 --- a/examples/lit/filters/src/main.ts +++ b/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 + private column!: Column 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(this) + private tableController = new TableController(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` ${row - .getVisibleCells() + .getAllCells() .map( (cell) => html` diff --git a/examples/lit/row-selection/src/main.ts b/examples/lit/row-selection/src/main.ts index 67a81dd998..de0222aeca 100644 --- a/examples/lit/row-selection/src/main.ts +++ b/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(this) + private tableController = new TableController(this) @state() - private _rowSelection: Record = {} + 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` ${row - .getVisibleCells() + .getAllCells() .map( (cell) => html` diff --git a/examples/lit/sorting/src/main.ts b/examples/lit/sorting/src/main.ts index 77157ccb6d..62b1c2cd21 100644 --- a/examples/lit/sorting/src/main.ts +++ b/examples/lit/sorting/src/main.ts @@ -6,6 +6,7 @@ import { TableController, createSortedRowModel, flexRender, + isFunction, rowSortingFeature, sortFns, tableFeatures, @@ -13,17 +14,17 @@ import { import { Person, makeData } from './makeData' import type { ColumnDef, SortFn, SortingState } from '@tanstack/lit-table' -const sortStatusFn: SortFn = (rowA, rowB, _columnId) => { +const _features = tableFeatures({ + rowSortingFeature, +}) + +const sortStatusFn: SortFn = (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> = [ { accessorKey: 'firstName', @@ -77,7 +78,7 @@ class LitTableExample extends LitElement { @state() private _sorting: SortingState = [] - private tableController = new TableController(this) + private tableController = new TableController(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` ${row - .getVisibleCells() + .getAllCells() .map( (cell) => html` diff --git a/examples/lit/virtualized-rows/src/main.ts b/examples/lit/virtualized-rows/src/main.ts index 9fe9cbdb85..45282f016d 100644 --- a/examples/lit/virtualized-rows/src/main.ts +++ b/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> = [ @@ -65,7 +67,7 @@ const data = makeData(50_000) @customElement('lit-table-example') class LitTableExample extends LitElement { - private tableController = new TableController(this) + private tableController = new TableController(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` | null = null - - private state: TableState = {} as TableState + private _features: TableFeatures | null = null + private _state: TableState | null = null + private _table: Table | null = null constructor(host: ReactiveControllerHost) { ;(this.host = host).addController(this) } - public table(tableOptions: TableOptions) { - if (!this.tableInstance) { - const _features = { ...coreFeatures, ...tableOptions._features } - - this.state = { - ...getInitialTableState(_features, tableOptions.initialState), - ...tableOptions.state, - } + public table( + tableOptions: TableOptions, + ): Table { + if (!this._table) { + this._features = { ...coreFeatures, ...tableOptions._features } + this._state = getInitialTableState( + this._features, + tableOptions.initialState, + ) - const statefulOptions: TableOptions = { + const initialOptions: TableOptions = { ...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>) => { + this._state = isFunction(updater) ? updater(this._state!) : updater + this.host.requestUpdate() + tableOptions.onStateChange?.(updater) + }, + })) - return this.tableInstance + return this._table } hostDisconnected() {}