Skip to content

Commit 924f434

Browse files
author
Mor Kadosh
committed
feat: initial integration for lit
1 parent 4fda521 commit 924f434

16 files changed

+569
-4
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ stats-hydration.json
3535
stats-react.json
3636
stats.html
3737
.vscode/settings.json
38+
.idea
3839

3940
*.log
4041
.DS_Store

‎examples/lit/basic/.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎examples/lit/basic/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn`
6+
- `npm run start` or `yarn start`

‎examples/lit/basic/index.html

+14
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>Vite App</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

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "tanstack-lit-table-example-basic",
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+
},
11+
"dependencies": {
12+
"@tanstack/lit-table": "workspace:*",
13+
"lit": "^3.1.3"
14+
},
15+
"devDependencies": {
16+
"@rollup/plugin-replace": "^5.0.5",
17+
"typescript": "5.4.5",
18+
"vite": "^5.2.10"
19+
}
20+
}

‎examples/lit/basic/src/index.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
html {
2+
font-family: sans-serif;
3+
font-size: 14px;
4+
}
5+
6+
table {
7+
border: 1px solid lightgray;
8+
}
9+
10+
tbody {
11+
border-bottom: 1px solid lightgray;
12+
}
13+
14+
th {
15+
border-bottom: 1px solid lightgray;
16+
border-right: 1px solid lightgray;
17+
padding: 2px 4px;
18+
}
19+
20+
tfoot {
21+
color: gray;
22+
}
23+
24+
tfoot th {
25+
font-weight: normal;
26+
}

‎examples/lit/basic/src/main.ts

+225
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
import { customElement } from 'lit/decorators.js'
2+
import { html, LitElement } from 'lit'
3+
import { repeat } from 'lit/directives/repeat.js'
4+
import {
5+
createColumnHelper,
6+
flexRender,
7+
getCoreRowModel,
8+
TableController,
9+
} from '@tanstack/lit-table'
10+
11+
type Person = {
12+
firstName: string
13+
lastName: string
14+
age: number
15+
visits: number
16+
status: string
17+
progress: number
18+
}
19+
20+
const defaultData: Person[] = [
21+
{
22+
firstName: 'tanner',
23+
lastName: 'linsley',
24+
age: 24,
25+
visits: 100,
26+
status: 'In Relationship',
27+
progress: 50,
28+
},
29+
{
30+
firstName: 'tandy',
31+
lastName: 'miller',
32+
age: 40,
33+
visits: 40,
34+
status: 'Single',
35+
progress: 80,
36+
},
37+
{
38+
firstName: 'joe',
39+
lastName: 'dirte',
40+
age: 45,
41+
visits: 20,
42+
status: 'Complicated',
43+
progress: 10,
44+
},
45+
]
46+
47+
const columnHelper = createColumnHelper<Person>()
48+
49+
const columns = [
50+
columnHelper.accessor('firstName', {
51+
cell: info => info.getValue(),
52+
footer: info => info.column.id,
53+
}),
54+
columnHelper.accessor(row => row.lastName, {
55+
id: 'lastName',
56+
cell: info => html`<i>${info.getValue()}</i>`,
57+
header: () => html`<span>Last Name</span>`,
58+
footer: info => info.column.id,
59+
}),
60+
columnHelper.accessor('age', {
61+
header: () => 'Age',
62+
cell: info => info.renderValue(),
63+
footer: info => info.column.id,
64+
}),
65+
columnHelper.accessor('visits', {
66+
header: () => html`<span>Visits</span>`,
67+
footer: info => info.column.id,
68+
}),
69+
columnHelper.accessor('status', {
70+
header: 'Status',
71+
footer: info => info.column.id,
72+
}),
73+
columnHelper.accessor('progress', {
74+
header: 'Profile Progress',
75+
footer: info => info.column.id,
76+
}),
77+
]
78+
79+
const data: Person[] = [
80+
{
81+
firstName: 'tanner',
82+
lastName: 'linsley',
83+
age: 24,
84+
visits: 100,
85+
status: 'In Relationship',
86+
progress: 50,
87+
},
88+
{
89+
firstName: 'tandy',
90+
lastName: 'miller',
91+
age: 40,
92+
visits: 40,
93+
status: 'Single',
94+
progress: 80,
95+
},
96+
{
97+
firstName: 'joe',
98+
lastName: 'dirte',
99+
age: 45,
100+
visits: 20,
101+
status: 'Complicated',
102+
progress: 10,
103+
},
104+
{
105+
firstName: 'mor',
106+
lastName: 'kadosh',
107+
age: 31,
108+
visits: 30,
109+
status: 'In Relationship',
110+
progress: 90,
111+
},
112+
]
113+
114+
@customElement('lit-table-example')
115+
class LitTableExample extends LitElement {
116+
private tableController = new TableController<Person>(this)
117+
118+
protected render(): unknown {
119+
const table = this.tableController.getTable({
120+
columns,
121+
data,
122+
getCoreRowModel: getCoreRowModel(),
123+
})
124+
125+
return html`
126+
<table>
127+
<thead>
128+
${repeat(
129+
table.getHeaderGroups(),
130+
headerGroup => headerGroup.id,
131+
headerGroup =>
132+
html`${repeat(
133+
headerGroup.headers,
134+
header => header.id,
135+
header =>
136+
html` <th>
137+
${header.isPlaceholder
138+
? null
139+
: flexRender(
140+
header.column.columnDef.header,
141+
header.getContext()
142+
)}
143+
</th>`
144+
)}`
145+
)}
146+
</thead>
147+
<tbody>
148+
${repeat(
149+
table.getRowModel().rows,
150+
row => row.id,
151+
row => html`
152+
<tr>
153+
${repeat(
154+
row.getVisibleCells(),
155+
cell => cell.id,
156+
cell =>
157+
html`<td>
158+
${flexRender(
159+
cell.column.columnDef.cell,
160+
cell.getContext()
161+
)}
162+
</td>`
163+
)}
164+
</tr>
165+
`
166+
)}
167+
</tbody>
168+
<tfoot>
169+
${repeat(
170+
table.getFooterGroups(),
171+
footerGroup => footerGroup.id,
172+
footerGroup => html`
173+
<tr>
174+
${repeat(
175+
footerGroup.headers,
176+
header => header.id,
177+
header => html`
178+
<th>
179+
${header.isPlaceholder
180+
? null
181+
: flexRender(
182+
header.column.columnDef.footer,
183+
header.getContext()
184+
)}
185+
</th>
186+
`
187+
)}
188+
</tr>
189+
`
190+
)}
191+
</tfoot>
192+
</table>
193+
<style>
194+
* {
195+
font-family: sans-serif;
196+
font-size: 14px;
197+
box-sizing: border-box;
198+
}
199+
200+
table {
201+
border: 1px solid lightgray;
202+
border-collapse: collapse;
203+
}
204+
205+
tbody {
206+
border-bottom: 1px solid lightgray;
207+
}
208+
209+
th {
210+
border-bottom: 1px solid lightgray;
211+
border-right: 1px solid lightgray;
212+
padding: 2px 4px;
213+
}
214+
215+
tfoot {
216+
color: gray;
217+
}
218+
219+
tfoot th {
220+
font-weight: normal;
221+
}
222+
</style>
223+
`
224+
}
225+
}

‎examples/lit/basic/tsconfig.json

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

‎examples/lit/basic/vite.config.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { defineConfig } from 'vite'
2+
import rollupReplace from '@rollup/plugin-replace'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [
7+
rollupReplace({
8+
preventAssignment: true,
9+
values: {
10+
__DEV__: JSON.stringify(true),
11+
'process.env.NODE_ENV': JSON.stringify('development'),
12+
},
13+
})
14+
],
15+
})

0 commit comments

Comments
 (0)