Skip to content

Commit 6a318e3

Browse files
KevinVandyKevinVandy
committed
start on svelte tableHelper
1 parent a5faaa4 commit 6a318e3

File tree

15 files changed

+344
-6
lines changed

15 files changed

+344
-6
lines changed

‎examples/svelte/basic-table-helper/.gitignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local
6+
7+
src/**/*.d.ts
8+
src/**/*.map

‎examples/svelte/basic-table-helper/README.md‎

Lines changed: 6 additions & 0 deletions
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/svelte/basic-table-helper/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>Vite App</title>
7+
<script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
8+
</head>
9+
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="/src/main.ts"></script>
13+
</body>
14+
</html>

‎examples/svelte/basic-table-helper/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "tanstack-table-example-svelte-basic-table-helper",
3+
"version": "0.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"serve": "vite preview",
10+
"test:types": "svelte-check --tsconfig ./tsconfig.json",
11+
"lint": "eslint ./src"
12+
},
13+
"devDependencies": {
14+
"@rollup/plugin-replace": "^6.0.1",
15+
"@sveltejs/vite-plugin-svelte": "^4.0.0",
16+
"@tanstack/svelte-table": "^9.0.0-alpha.10",
17+
"@tsconfig/svelte": "^5.0.4",
18+
"svelte": "^5.1.16",
19+
"svelte-check": "^4.0.7",
20+
"typescript": "5.6.3",
21+
"vite": "^5.4.11"
22+
}
23+
}

‎examples/svelte/basic-table-helper/src/App.svelte‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<script lang="ts">
2+
import {
3+
createTableHelper,
4+
FlexRender,
5+
} from '@tanstack/svelte-table'
6+
import './index.css'
7+
8+
// This example uses the new `createTableHelper` method to create a re-usable table helper object instead of independently using the standalone `createTable` hook and `createColumnHelper` method. You can choose to use either way.
9+
10+
// 1. Define what the shape of your data will be for each row
11+
type Person = {
12+
firstName: string
13+
lastName: string
14+
age: number
15+
visits: number
16+
status: string
17+
progress: number
18+
}
19+
20+
// 2. Create some dummy data with a stable reference (this could be an API response stored in useState or similar)
21+
const data: Person[] = [
22+
{
23+
firstName: 'tanner',
24+
lastName: 'linsley',
25+
age: 24,
26+
visits: 100,
27+
status: 'In Relationship',
28+
progress: 50,
29+
},
30+
{
31+
firstName: 'tandy',
32+
lastName: 'miller',
33+
age: 40,
34+
visits: 40,
35+
status: 'Single',
36+
progress: 80,
37+
},
38+
{
39+
firstName: 'joe',
40+
lastName: 'dirte',
41+
age: 45,
42+
visits: 20,
43+
status: 'Complicated',
44+
progress: 10,
45+
},
46+
]
47+
48+
// 3. New in V9! Tell the table which features and row models we want to use. In this case, this will be a basic table with no additional features
49+
const tableHelper = createTableHelper({
50+
_features: {},
51+
_rowModels: {}, // client-side row models. `Core` row model is now included by default, but you can still override it here
52+
_processingFns: {}, // client-side processing functions used by the row models (sorting, filtering, etc.). Not needed in this basic example
53+
TData: {} as Person,
54+
debugTable: true,
55+
})
56+
57+
// 4. Create a helper object to help define our columns
58+
const { columnHelper } = tableHelper
59+
60+
// 5. Define the columns for your table with a stable reference (in this case, defined statically outside of a react component)
61+
const columns = columnHelper.columns([
62+
// accessorKey method (most common for simple use-cases)
63+
columnHelper.accessor('firstName', {
64+
cell: (info) => info.getValue(),
65+
footer: (info) => info.column.id,
66+
}),
67+
// accessorFn used (alternative) along with a custom id
68+
columnHelper.accessor((row) => row.lastName, {
69+
id: 'lastName',
70+
cell: (info) => info.getValue(),
71+
header: () => 'Last Name',
72+
footer: (info) => info.column.id,
73+
}),
74+
// accessorFn used to transform the data
75+
columnHelper.accessor((row) => Number(row.age), {
76+
id: 'age',
77+
header: () => 'Age',
78+
cell: (info) => info.renderValue(),
79+
footer: (info) => info.column.id,
80+
}),
81+
columnHelper.accessor('visits', {
82+
header: () => 'Visits',
83+
footer: (info) => info.column.id,
84+
}),
85+
columnHelper.accessor('status', {
86+
header: 'Status',
87+
footer: (info) => info.column.id,
88+
}),
89+
columnHelper.accessor('progress', {
90+
header: 'Profile Progress',
91+
footer: (info) => info.column.id,
92+
}),
93+
])
94+
95+
// 7. Create the table instance with the required columns and data.
96+
// Features and row models are already defined in the table helper object above
97+
const table = tableHelper.createTable({
98+
columns,
99+
data,
100+
// add additional table options here or in the table helper above
101+
})
102+
</script>
103+
104+
<div class="p-2">
105+
<table>
106+
<thead>
107+
{#each table.getHeaderGroups() as headerGroup}
108+
<tr>
109+
{#each headerGroup.headers as header}
110+
<th>
111+
{#if !header.isPlaceholder}
112+
<FlexRender
113+
content={header.column.columnDef.header}
114+
context={header.getContext()}
115+
/>
116+
{/if}
117+
</th>
118+
{/each}
119+
</tr>
120+
{/each}
121+
</thead>
122+
<tbody>
123+
{#each table.getRowModel().rows as row}
124+
<tr>
125+
{#each row.getAllCells() as cell}
126+
<td>
127+
<FlexRender
128+
content={cell.column.columnDef.cell}
129+
context={cell.getContext()}
130+
/>
131+
</td>
132+
{/each}
133+
</tr>
134+
{/each}
135+
</tbody>
136+
<tfoot>
137+
{#each table.getFooterGroups() as footerGroup}
138+
<tr>
139+
{#each footerGroup.headers as header}
140+
<th>
141+
{#if !header.isPlaceholder}
142+
<FlexRender
143+
content={header.column.columnDef.footer}
144+
context={header.getContext()}
145+
/>
146+
{/if}
147+
</th>
148+
{/each}
149+
</tr>
150+
{/each}
151+
</tfoot>
152+
</table>
153+
<div class="h-4"></div>
154+
</div>

‎examples/svelte/basic-table-helper/src/index.css‎

Lines changed: 26 additions & 0 deletions
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/svelte/basic-table-helper/src/main.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// @ts-ignore
2+
import { mount } from 'svelte'
3+
import App from './App.svelte'
4+
5+
const app = mount(App, {
6+
target: document.getElementById('root')!,
7+
})
8+
9+
export default app

‎examples/svelte/basic-table-helper/svelte.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
2+
3+
export default {
4+
preprocess: vitePreprocess(),
5+
}

‎examples/svelte/basic-table-helper/tsconfig.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"extends": "@tsconfig/svelte/tsconfig.json",
3+
"compilerOptions": {
4+
"target": "esnext",
5+
"useDefineForClassFields": true,
6+
"module": "esnext",
7+
"resolveJsonModule": true,
8+
"allowJs": true,
9+
"checkJs": true,
10+
"isolatedModules": true
11+
},
12+
"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
13+
}

‎examples/svelte/basic-table-helper/vite.config.js‎

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

0 commit comments

Comments
 (0)