Skip to content

Commit 64a8904

Browse files
KevinVandyKevinVandy
committed
fix: update lit adapter and examples. fix column order bug too
1 parent 02c9033 commit 64a8904

File tree

204 files changed

+11757
-978
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

204 files changed

+11757
-978
lines changed

‎examples/lit/basic-app-table/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>TanStack Lit Table - Basic App Table</title>
7+
<script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
<lit-table-example></lit-table-example>
13+
</body>
14+
</html>

examples/lit/basic/package.json renamed to examples/lit/basic-app-table/package.json

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "tanstack-lit-table-example-basic",
2+
"name": "tanstack-lit-table-example-basic-app-table",
33
"version": "0.0.0",
44
"private": true,
55
"scripts": {
@@ -10,11 +10,8 @@
1010
"lint": "eslint ./src"
1111
},
1212
"dependencies": {
13+
"@lit/context": "^1.1.6",
1314
"@tanstack/lit-table": "^9.0.0-alpha.10",
14-
"@twind/core": "^1.1.3",
15-
"@twind/preset-autoprefix": "^1.0.7",
16-
"@twind/preset-tailwind": "^1.1.4",
17-
"@twind/with-web-components": "^1.1.3",
1815
"lit": "^3.3.2"
1916
},
2017
"devDependencies": {

‎examples/lit/basic-app-table/src/main.ts‎

Lines changed: 263 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,263 @@
1+
import { customElement, state } from 'lit/decorators.js'
2+
import { LitElement, html } from 'lit'
3+
import { repeat } from 'lit/directives/repeat.js'
4+
import {
5+
createTableHook,
6+
createSortedRowModel,
7+
rowSortingFeature,
8+
sortFns,
9+
tableFeatures,
10+
} from '@tanstack/lit-table'
11+
12+
// This example uses the new `createTableHook` method to create a re-usable table hook factory instead of independently using the standalone `TableController` and `createColumnHelper` method. You can choose to use either way.
13+
14+
// 1. Define what the shape of your data will be for each row
15+
type Person = {
16+
firstName: string
17+
lastName: string
18+
age: number
19+
visits: number
20+
status: string
21+
progress: number
22+
}
23+
24+
// 2. Create some dummy data with a stable reference (this could be an API response stored in @state or similar)
25+
const defaultData: Array<Person> = [
26+
{
27+
firstName: 'tanner',
28+
lastName: 'linsley',
29+
age: 24,
30+
visits: 100,
31+
status: 'In Relationship',
32+
progress: 50,
33+
},
34+
{
35+
firstName: 'tandy',
36+
lastName: 'miller',
37+
age: 40,
38+
visits: 40,
39+
status: 'Single',
40+
progress: 80,
41+
},
42+
{
43+
firstName: 'joe',
44+
lastName: 'dirte',
45+
age: 45,
46+
visits: 20,
47+
status: 'Complicated',
48+
progress: 10,
49+
},
50+
{
51+
firstName: 'kevin',
52+
lastName: 'vandy',
53+
age: 28,
54+
visits: 100,
55+
status: 'Single',
56+
progress: 70,
57+
},
58+
]
59+
60+
// 3. New in V9! Tell the table which features and row models we want to use. In this case, we want sorting.
61+
const { useAppTable, createAppColumnHelper } = createTableHook({
62+
_features: tableFeatures({
63+
rowSortingFeature,
64+
}),
65+
_rowModels: {
66+
sortedRowModel: createSortedRowModel(sortFns),
67+
},
68+
debugTable: true,
69+
})
70+
71+
// 4. Create a helper object to help define our columns
72+
const columnHelper = createAppColumnHelper<Person>()
73+
74+
// 5. Define the columns for your table with a stable reference (in this case, defined statically outside of a Lit component)
75+
const columns = columnHelper.columns([
76+
// accessorKey method (most common for simple use-cases)
77+
columnHelper.accessor('firstName', {
78+
cell: (info) => info.getValue(),
79+
footer: (info) => info.column.id,
80+
}),
81+
// accessorFn used (alternative) along with a custom id
82+
columnHelper.accessor((row) => row.lastName, {
83+
id: 'lastName',
84+
cell: (info) => html`<i>${info.getValue()}</i>`,
85+
header: () => html`<span>Last Name</span>`,
86+
footer: (info) => info.column.id,
87+
}),
88+
// accessorFn used to transform the data
89+
columnHelper.accessor((row) => Number(row.age), {
90+
id: 'age',
91+
header: () => 'Age',
92+
cell: (info) => info.renderValue(),
93+
footer: (info) => info.column.id,
94+
}),
95+
columnHelper.accessor('visits', {
96+
header: () => html`<span>Visits</span>`,
97+
footer: (info) => info.column.id,
98+
}),
99+
columnHelper.accessor('status', {
100+
header: 'Status',
101+
footer: (info) => info.column.id,
102+
}),
103+
columnHelper.accessor('progress', {
104+
header: 'Profile Progress',
105+
footer: (info) => info.column.id,
106+
}),
107+
])
108+
109+
@customElement('lit-table-example')
110+
class LitTableExample extends LitElement {
111+
@state()
112+
private data = [...defaultData]
113+
114+
// 6. Store data with a reactive reference
115+
// (in Lit, we use @state() for reactive properties)
116+
117+
// 7. Create the table instance with the required columns and data.
118+
// Features and row models are already defined in the createTableHook call above
119+
// NOTE: Capture `this` as `host` because inside the getter, `this` refers
120+
// to the options object (not the LitElement), which would cause infinite recursion.
121+
private appTable = (() => {
122+
const host = this
123+
return useAppTable(
124+
this,
125+
{
126+
columns,
127+
get data() {
128+
return host.data
129+
},
130+
},
131+
(state) => ({ sorting: state.sorting }),
132+
)
133+
})()
134+
135+
private rerender() {
136+
this.data = this.data.slice().sort((a: Person, b: Person) => a.age - b.age)
137+
}
138+
139+
// 8. Render your table markup from the table instance APIs
140+
protected render(): unknown {
141+
const table = this.appTable.table()
142+
143+
return html`
144+
<div class="p-2">
145+
<table>
146+
<thead>
147+
${repeat(
148+
table.getHeaderGroups(),
149+
(headerGroup) => headerGroup.id,
150+
(headerGroup) => html`
151+
<tr>
152+
${headerGroup.headers.map((header) =>
153+
table.AppHeader(
154+
header,
155+
(h) => html`
156+
<th colspan=${h.colSpan}>
157+
${h.isPlaceholder
158+
? null
159+
: html`<div
160+
title=${h.column.getCanSort()
161+
? h.column.getNextSortingOrder() === 'asc'
162+
? 'Sort ascending'
163+
: h.column.getNextSortingOrder() === 'desc'
164+
? 'Sort descending'
165+
: 'Clear sort'
166+
: ''}
167+
@click=${h.column.getToggleSortingHandler()}
168+
style="cursor: ${h.column.getCanSort()
169+
? 'pointer'
170+
: 'not-allowed'}"
171+
>
172+
${h.FlexRender()}
173+
${{ asc: ' \u{1F53C}', desc: ' \u{1F53D}' }[
174+
h.column.getIsSorted() as string
175+
] ?? null}
176+
</div>`}
177+
</th>
178+
`,
179+
),
180+
)}
181+
</tr>
182+
`,
183+
)}
184+
</thead>
185+
<tbody>
186+
${table.getRowModel().rows.map(
187+
(row) => html`
188+
<tr>
189+
${row
190+
.getAllCells()
191+
.map((cell) =>
192+
table.AppCell(
193+
cell,
194+
(c) => html` <td>${c.FlexRender()}</td> `,
195+
),
196+
)}
197+
</tr>
198+
`,
199+
)}
200+
</tbody>
201+
<tfoot>
202+
${repeat(
203+
table.getFooterGroups(),
204+
(footerGroup) => footerGroup.id,
205+
(footerGroup) => html`
206+
<tr>
207+
${footerGroup.headers.map((header) =>
208+
table.AppFooter(
209+
header,
210+
(h) => html`
211+
<th>${h.isPlaceholder ? null : h.FlexRender()}</th>
212+
`,
213+
),
214+
)}
215+
</tr>
216+
`,
217+
)}
218+
</tfoot>
219+
</table>
220+
<div class="h-4"></div>
221+
<button @click=${() => this.rerender()} class="border p-2">
222+
Rerender (sort by age)
223+
</button>
224+
<pre>${JSON.stringify(table.state, null, 2)}</pre>
225+
</div>
226+
<style>
227+
* {
228+
font-family: sans-serif;
229+
font-size: 14px;
230+
box-sizing: border-box;
231+
}
232+
233+
table {
234+
border: 1px solid lightgray;
235+
border-collapse: collapse;
236+
}
237+
238+
tbody {
239+
border-bottom: 1px solid lightgray;
240+
}
241+
242+
th {
243+
border-bottom: 1px solid lightgray;
244+
border-right: 1px solid lightgray;
245+
padding: 2px 4px;
246+
}
247+
248+
td {
249+
border-right: 1px solid lightgray;
250+
padding: 2px 4px;
251+
}
252+
253+
tfoot {
254+
color: gray;
255+
}
256+
257+
tfoot th {
258+
font-weight: normal;
259+
}
260+
</style>
261+
`
262+
}
263+
}

‎examples/lit/basic-app-table/tsconfig.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
5+
"module": "ESNext",
6+
"skipLibCheck": true,
7+
"moduleResolution": "bundler",
8+
"allowImportingTsExtensions": true,
9+
"resolveJsonModule": true,
10+
"isolatedModules": true,
11+
"emitDecoratorMetadata": true,
12+
"noEmit": true,
13+
"jsx": "react-jsx",
14+
"experimentalDecorators": true,
15+
"useDefineForClassFields": false,
16+
"strict": true,
17+
"noUnusedLocals": false,
18+
"noUnusedParameters": true,
19+
"noFallthroughCasesInSwitch": true
20+
},
21+
"include": ["src"]
22+
}

examples/lit/basic/vite.config.js renamed to examples/lit/basic-app-table/vite.config.js

File renamed without changes.

‎examples/lit/basic-external-state/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>TanStack Lit Table - Basic External State</title>
7+
<script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
<lit-table-example></lit-table-example>
13+
</body>
14+
</html>

‎examples/lit/basic-external-state/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "tanstack-lit-table-example-basic-external-state",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"serve": "vite preview",
9+
"start": "vite",
10+
"lint": "eslint ./src"
11+
},
12+
"dependencies": {
13+
"@faker-js/faker": "^10.4.0",
14+
"@tanstack/lit-table": "^9.0.0-alpha.10",
15+
"lit": "^3.3.2"
16+
},
17+
"devDependencies": {
18+
"@rollup/plugin-replace": "^6.0.3",
19+
"typescript": "6.0.2",
20+
"vite": "^8.0.7"
21+
}
22+
}

0 commit comments

Comments
 (0)