Skip to content

Commit e93729a

Browse files
marceloverdijkKevinVandy
marceloverdijk
and
KevinVandy
authored
docs: Added Vanilla examples (basic + pagination) (#5853)
Co-authored-by: Kevin Van Cott <[email protected]>
1 parent a55ea5d commit e93729a

22 files changed

+1201
-304
lines changed

‎docs/config.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -734,6 +734,15 @@
734734
"label": "Virtualized Rows"
735735
}
736736
]
737+
},
738+
{
739+
"label": "vanilla",
740+
"children": [
741+
{
742+
"to": "framework/vanilla/examples/basic",
743+
"label": "Basic"
744+
}
745+
]
737746
}
738747
]
739748
}

‎examples/vanilla/basic/.gitignore‎

Lines changed: 5 additions & 0 deletions
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/vanilla/basic/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/vanilla/basic/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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 + TS</title>
7+
<script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
8+
</head>
9+
<body>
10+
<div id="root" class="p-2">
11+
<div id="wrapper"></div>
12+
</div>
13+
<script type="module" src="/src/main.ts"></script>
14+
</body>
15+
</html>

‎examples/vanilla/basic/package.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "tanstack-table-example-vanilla-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+
"devDependencies": {
12+
"@rollup/plugin-replace": "^5.0.7",
13+
"typescript": "5.4.5",
14+
"vite": "^5.3.2"
15+
},
16+
"dependencies": {
17+
"@tanstack/table-core": "^8.20.5",
18+
"nanostores": "^0.11.3"
19+
}
20+
}

‎examples/vanilla/basic/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/vanilla/basic/src/main.ts‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import './index.css'
2+
3+
import {
4+
createColumnHelper,
5+
getCoreRowModel,
6+
} from '@tanstack/table-core'
7+
8+
import { flexRender, useTable } from './useTable'
9+
10+
type Person = {
11+
firstName: string
12+
lastName: string
13+
age: number
14+
visits: number
15+
status: string
16+
progress: number
17+
}
18+
19+
const data: Person[] = [
20+
{
21+
firstName: 'tanner',
22+
lastName: 'linsley',
23+
age: 24,
24+
visits: 100,
25+
status: 'In Relationship',
26+
progress: 50,
27+
},
28+
{
29+
firstName: 'tandy',
30+
lastName: 'miller',
31+
age: 40,
32+
visits: 40,
33+
status: 'Single',
34+
progress: 80,
35+
},
36+
{
37+
firstName: 'joe',
38+
lastName: 'dirte',
39+
age: 45,
40+
visits: 20,
41+
status: 'Complicated',
42+
progress: 10,
43+
},
44+
]
45+
46+
const columnHelper = createColumnHelper<Person>()
47+
48+
const columns = [
49+
columnHelper.accessor('firstName', {
50+
cell: info => info.getValue(),
51+
footer: info => info.column.id,
52+
}),
53+
columnHelper.accessor(row => row.lastName, {
54+
id: 'lastName',
55+
cell: info => `<i>${info.getValue()}</i>`,
56+
header: () => '<span>Last Name</span>',
57+
footer: info => info.column.id,
58+
}),
59+
columnHelper.accessor('age', {
60+
header: () => 'Age',
61+
cell: info => info.renderValue(),
62+
footer: info => info.column.id,
63+
}),
64+
columnHelper.accessor('visits', {
65+
header: () => '<span>Visits</span>',
66+
footer: info => info.column.id,
67+
}),
68+
columnHelper.accessor('status', {
69+
header: 'Status',
70+
footer: info => info.column.id,
71+
}),
72+
columnHelper.accessor('progress', {
73+
header: 'Profile Progress',
74+
footer: info => info.column.id,
75+
}),
76+
]
77+
78+
const renderTable = () => {
79+
80+
// Create table elements
81+
const tableElement = document.createElement('table')
82+
const theadElement = document.createElement('thead')
83+
const tbodyElement = document.createElement('tbody')
84+
const tfootElement = document.createElement('tfoot')
85+
86+
tableElement.appendChild(theadElement)
87+
tableElement.appendChild(tbodyElement)
88+
tableElement.appendChild(tfootElement)
89+
90+
// Render table headers
91+
table.getHeaderGroups().forEach((headerGroup) => {
92+
const trElement = document.createElement('tr')
93+
headerGroup.headers.forEach((header) => {
94+
const thElement = document.createElement('th')
95+
thElement.innerHTML = header.isPlaceholder
96+
? ''
97+
: flexRender(header.column.columnDef.header, header.getContext())
98+
trElement.appendChild(thElement)
99+
})
100+
theadElement.appendChild(trElement)
101+
})
102+
103+
// Render table rows
104+
table.getRowModel().rows.forEach((row) => {
105+
const trElement = document.createElement('tr')
106+
row.getVisibleCells().forEach((cell) => {
107+
const tdElement = document.createElement('td')
108+
tdElement.innerHTML = flexRender(cell.column.columnDef.cell, cell.getContext())
109+
trElement.appendChild(tdElement)
110+
})
111+
tbodyElement.appendChild(trElement)
112+
})
113+
114+
// Render table footers
115+
table.getFooterGroups().forEach((footerGroup) => {
116+
const trElement = document.createElement('tr')
117+
footerGroup.headers.forEach((header) => {
118+
const thElement = document.createElement('th')
119+
thElement.innerHTML = header.isPlaceholder
120+
? ''
121+
: flexRender(header.column.columnDef.footer, header.getContext())
122+
trElement.appendChild(thElement)
123+
})
124+
tfootElement.appendChild(trElement)
125+
})
126+
127+
// Clear previous content and append new content
128+
const wrapperElement = document.getElementById('wrapper') as HTMLDivElement
129+
wrapperElement.innerHTML = ''
130+
wrapperElement.appendChild(tableElement)
131+
}
132+
133+
const table = useTable<Person>({
134+
data,
135+
columns,
136+
getCoreRowModel: getCoreRowModel(),
137+
})
138+
139+
renderTable()

‎examples/vanilla/basic/src/useTable.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { atom } from 'nanostores'
2+
3+
import {
4+
type RowData,
5+
type TableOptions,
6+
type TableOptionsResolved,
7+
createTable,
8+
} from '@tanstack/table-core'
9+
10+
export const flexRender = <TProps extends object>(comp: any, props: TProps) => {
11+
if (typeof comp === 'function') {
12+
return comp(props)
13+
}
14+
return comp
15+
}
16+
17+
export const useTable = <TData extends RowData>(options: TableOptions<TData>) => {
18+
// Compose in the generic options to the user options
19+
const resolvedOptions: TableOptionsResolved<TData> = {
20+
state: {}, // Dummy state
21+
onStateChange: () => {}, // noop
22+
renderFallbackValue: null,
23+
...options,
24+
}
25+
26+
// Create a new table
27+
const table = createTable<TData>(resolvedOptions)
28+
29+
// By default, manage table state here using the table's initial state
30+
const state = atom(table.initialState)
31+
32+
// Subscribe to state changes
33+
state.subscribe((currentState) => {
34+
table.setOptions((prev) => ({
35+
...prev,
36+
...options,
37+
state: {
38+
...currentState,
39+
...options.state,
40+
},
41+
// Similarly, we'll maintain both our internal state and any user-provided state
42+
onStateChange: (updater) => {
43+
if (typeof updater === 'function') {
44+
const newState = updater(currentState)
45+
state.set(newState)
46+
} else {
47+
state.set(updater)
48+
}
49+
options.onStateChange?.(updater)
50+
},
51+
}))
52+
})
53+
54+
return table
55+
}

‎examples/vanilla/basic/tsconfig.json‎

Lines changed: 26 additions & 0 deletions
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/vanilla/basic/vite.config.js‎

Lines changed: 15 additions & 0 deletions
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)