From dbc39710c3582e1c972532f7efdbb6ac12a8bc2e Mon Sep 17 00:00:00 2001
From: Peter Lycos <plycos@gmail.com>
Date: Wed, 11 Feb 2026 18:53:58 -0500
Subject: [PATCH 1/2] fix lit code example in TableLanding.tsx

---
 src/components/landing/TableLanding.tsx | 64 +++++++++++++++++--------
 1 file changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/components/landing/TableLanding.tsx b/src/components/landing/TableLanding.tsx
index a0ab189b..a6fbe403 100644
--- a/src/components/landing/TableLanding.tsx
+++ b/src/components/landing/TableLanding.tsx
@@ -210,31 +210,57 @@ const table = useVueTable({ data, columns, getCoreRowModel: getCoreRowModel() })
     },
     lit: {
       lang: 'ts',
-      code: `import { LitElement, customElement, html } from 'lit'
-import { createLitTable, getCoreRowModel, flexRender } from '@tanstack/lit-table'
+      code: `
+import { html, LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import {
+	flexRender,
+	getCoreRowModel,
+	TableController,
+} from '@tanstack/lit-table'
 
 const data = [{ id: 1, name: 'Ada' }]
 const columns = [{ accessorKey: 'name', header: 'Name' }]
 
 @customElement('simple-table')
 export class SimpleTable extends LitElement {
-  table = createLitTable({ data, columns, getCoreRowModel: getCoreRowModel() })
-
-  render() {
-    return html\`<table>
-      <thead>
-        \${this.table.getHeaderGroups().map((hg) => html\`<tr>
-          \${hg.headers.map((header) => html\`<th>\${flexRender(header.column.columnDef.header, header.getContext())}</th>\`)}
-        </tr>\`)}
-      </thead>
-      <tbody>
-        \${this.table.getRowModel().rows.map((row) => html\`<tr>
-          \${row.getVisibleCells().map((cell) => html\`<td>\${flexRender(cell.column.columnDef.cell, cell.getContext())}</td>\`)}
-        </tr>\`)}
-      </tbody>
-    </table>\`
-  }
-}`,
+	private tableController = new TableController(this)
+
+	render() {
+		const table = this.tableController.table({
+			columns,
+			data,
+			getCoreRowModel: getCoreRowModel(),
+		})
+		return html\`
+			<table>
+				<thead>
+					\${table.getHeaderGroups().map((hg) => html\`
+						<tr>
+							\${hg.headers.map((header) => html\`
+								<th>
+									\${flexRender(header.column.columnDef.header, header.getContext())}
+								</th>
+							\`)}
+						</tr>
+					\`)}
+				</thead>
+				<tbody>
+					\${table.getRowModel().rows.map((row) => html\`
+						<tr>
+							\${row.getVisibleCells().map((cell) => html\`
+								<td>
+									\${flexRender(cell.column.columnDef.cell, cell.getContext())}
+								</td>
+							\`)}
+						</tr>
+					\`)}
+				</tbody>
+			</table>
+		\`
+	}
+}
+      `,
     },
     qwik: {
       lang: 'tsx',

From 9c253095f5fd53523f26746071ee800f3cb3b005 Mon Sep 17 00:00:00 2001
From: Peter Lycos <plycos@gmail.com>
Date: Wed, 11 Feb 2026 18:54:03 -0500
Subject: [PATCH 2/2] fix leading newline

---
 src/components/landing/TableLanding.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/landing/TableLanding.tsx b/src/components/landing/TableLanding.tsx
index a6fbe403..be663944 100644
--- a/src/components/landing/TableLanding.tsx
+++ b/src/components/landing/TableLanding.tsx
@@ -210,8 +210,7 @@ const table = useVueTable({ data, columns, getCoreRowModel: getCoreRowModel() })
     },
     lit: {
       lang: 'ts',
-      code: `
-import { html, LitElement } from 'lit'
+      code: `import { html, LitElement } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import {
 	flexRender,