Skip to content

Commit 2612dbc

Browse files
KevinVandyKevinVandy
committed
Merge branch 'main' into alpha
2 parents fac92bc + 5de0729 commit 2612dbc

File tree

14 files changed

+437
-548
lines changed

14 files changed

+437
-548
lines changed

‎docs/config.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -745,6 +745,10 @@
745745
{
746746
"to": "framework/vanilla/examples/pagination",
747747
"label": "Pagination"
748+
},
749+
{
750+
"to": "framework/vanilla/examples/sorting",
751+
"label": "Sorting"
748752
}
749753
]
750754
}

‎docs/guide/columns.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Columns Guide
44

55
## API
66

7-
[Header API](../../api/core/column)
7+
[Column API](../../api/core/column)
88

99
## Columns Guide
1010

‎examples/vanilla/pagination/src/makeData.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ export type Person = {
77
visits: number
88
progress: number
99
status: 'relationship' | 'complicated' | 'single'
10-
subRows?: Person[]
10+
subRows?: Array<Person>
1111
}
1212

1313
const range = (len: number) => {
14-
const arr: number[] = []
14+
const arr: Array<number> = []
1515
for (let i = 0; i < len; i++) {
1616
arr.push(i)
1717
}
@@ -29,14 +29,14 @@ const newPerson = (): Person => {
2929
'relationship',
3030
'complicated',
3131
'single',
32-
])[0]!,
32+
])[0],
3333
}
3434
}
3535

36-
export function makeData(...lens: number[]) {
37-
const makeDataLevel = (depth = 0): Person[] => {
38-
const len = lens[depth]!
39-
return range(len).map((d): Person => {
36+
export function makeData(...lens: Array<number>) {
37+
const makeDataLevel = (depth = 0): Array<Person> => {
38+
const len = lens[depth]
39+
return range(len).map((_d): Person => {
4040
return {
4141
...newPerson(),
4242
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,

‎examples/vanilla/sorting/.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/sorting/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/sorting/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/sorting/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "tanstack-table-example-vanilla-sorting",
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+
"@faker-js/faker": "^9.3.0",
13+
"@rollup/plugin-replace": "^6.0.1",
14+
"@types/node": "^22.10.1",
15+
"typescript": "5.6.3",
16+
"vite": "^5.4.11"
17+
},
18+
"dependencies": {
19+
"@tanstack/table-core": "^9.0.0-alpha.10",
20+
"nanostores": "^0.11.3"
21+
}
22+
}

‎examples/vanilla/sorting/src/createTable.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { atom } from 'nanostores'
2+
import {
3+
constructTable,
4+
coreFeatures,
5+
getInitialTableState,
6+
} from '@tanstack/table-core'
7+
import type {
8+
RowData,
9+
Table,
10+
TableFeatures,
11+
TableOptions,
12+
TableState,
13+
} from '@tanstack/table-core'
14+
15+
export const flexRender = <TProps extends object>(comp: any, props: TProps) => {
16+
if (typeof comp === 'function') {
17+
return comp(props)
18+
}
19+
return comp
20+
}
21+
22+
export const createTable = <
23+
TFeatures extends TableFeatures,
24+
TData extends RowData,
25+
>(
26+
tableOptions: TableOptions<TFeatures, TData>,
27+
): Table<TFeatures, TData> => {
28+
const _features = { ...coreFeatures, ...tableOptions._features }
29+
30+
// const initialState = getInitialTableState(_features)
31+
const state = atom(getInitialTableState(_features, tableOptions.initialState))
32+
33+
// Compose in the generic options to the user options
34+
const statefulOptions: TableOptions<TFeatures, TData> = {
35+
...tableOptions,
36+
_features,
37+
state: { ...state, ...tableOptions.state },
38+
}
39+
40+
// Create a new table
41+
const table = constructTable(statefulOptions)
42+
43+
// Subscribe to state changes
44+
state.subscribe((currentState) => {
45+
table.setOptions((prev) => ({
46+
...prev,
47+
...tableOptions,
48+
state: {
49+
...(currentState as TableState<TFeatures>),
50+
...tableOptions.state,
51+
},
52+
// Similarly, we'll maintain both our internal state and any user-provided state
53+
onStateChange: (updater) => {
54+
if (typeof updater === 'function') {
55+
const newState = updater(currentState as TableState<TFeatures>)
56+
state.set(newState)
57+
} else {
58+
state.set(updater)
59+
}
60+
tableOptions.onStateChange?.(updater)
61+
},
62+
}))
63+
})
64+
65+
return table
66+
}

‎examples/vanilla/sorting/src/index.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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+
}
27+
28+
button:disabled {
29+
opacity: 0.5;
30+
}

‎examples/vanilla/sorting/src/main.ts‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
import './index.css'
2+
import {
3+
constructTableHelper,
4+
createSortedRowModel,
5+
rowSortingFeature,
6+
sortFns,
7+
} from '@tanstack/table-core'
8+
import { makeData } from './makeData'
9+
import { createTable, flexRender } from './createTable'
10+
import type { SortFn } from '@tanstack/table-core'
11+
12+
const data = makeData(1000)
13+
14+
// Custom sorting logic for one of our enum columns
15+
const sortStatusFn: SortFn<any, any> = (rowA, rowB, _columnId) => {
16+
const statusA = rowA.original.status
17+
const statusB = rowB.original.status
18+
const statusOrder = ['single', 'complicated', 'relationship']
19+
return statusOrder.indexOf(statusA) - statusOrder.indexOf(statusB)
20+
}
21+
22+
const tableHelper = constructTableHelper(createTable, {
23+
_features: {
24+
rowSortingFeature,
25+
},
26+
_rowModels: {
27+
sortedRowModel: createSortedRowModel(sortFns),
28+
},
29+
})
30+
31+
const { columnHelper } = tableHelper
32+
33+
const columns = [
34+
columnHelper.accessor('firstName', {
35+
cell: (info) => info.getValue(),
36+
// This column will sort in ascending order by default since it is a string column
37+
}),
38+
columnHelper.accessor((row) => row.lastName, {
39+
id: 'lastName',
40+
cell: (info) => `<i>${info.getValue()}</i>`,
41+
header: () => '<span>Last Name</span>',
42+
sortUndefined: 'last', // Force undefined values to the end
43+
sortDescFirst: false, // First sort order will be ascending (nullable values can mess up auto detection of sort order)
44+
}),
45+
columnHelper.accessor('age', {
46+
header: () => 'Age',
47+
cell: (info) => info.renderValue(),
48+
// This column will sort in descending order by default since it is a number column
49+
}),
50+
columnHelper.accessor('visits', {
51+
header: () => '<span>Visits</span>',
52+
sortUndefined: 'last', // Force undefined values to the end
53+
}),
54+
columnHelper.accessor('status', {
55+
header: 'Status',
56+
sortFn: sortStatusFn, // Use our custom sorting function for this enum column
57+
}),
58+
columnHelper.accessor('progress', {
59+
header: 'Profile Progress',
60+
enableSorting: false, // Disable sorting for this column
61+
}),
62+
columnHelper.accessor('rank', {
63+
header: 'Rank',
64+
invertSorting: true, // Invert the sorting order (golf score-like where smaller is better)
65+
}),
66+
columnHelper.accessor('createdAt', {
67+
header: 'Created At',
68+
}),
69+
]
70+
71+
const renderTable = () => {
72+
// Create table elements
73+
const tableElement = document.createElement('table')
74+
const theadElement = document.createElement('thead')
75+
const tbodyElement = document.createElement('tbody')
76+
77+
tableElement.classList.add('mb-2')
78+
79+
tableElement.appendChild(theadElement)
80+
tableElement.appendChild(tbodyElement)
81+
82+
// Render table headers
83+
table.getHeaderGroups().forEach((headerGroup) => {
84+
const trElement = document.createElement('tr')
85+
headerGroup.headers.forEach((header) => {
86+
const thElement = document.createElement('th')
87+
thElement.colSpan = header.colSpan
88+
const divElement = document.createElement('div')
89+
divElement.classList.add(
90+
'w-36',
91+
...(header.column.getCanSort()
92+
? ['cursor-pointer', 'select-none']
93+
: []),
94+
)
95+
;(divElement.onclick = (e) =>
96+
header.column.getToggleSortingHandler()?.(e)),
97+
(divElement.innerHTML = header.isPlaceholder
98+
? ''
99+
: flexRender(header.column.columnDef.header, header.getContext()))
100+
divElement.innerHTML +=
101+
{
102+
asc: ' 🔼',
103+
desc: ' 🔽',
104+
}[header.column.getIsSorted() as string] ?? ''
105+
thElement.appendChild(divElement)
106+
trElement.appendChild(thElement)
107+
})
108+
theadElement.appendChild(trElement)
109+
})
110+
111+
// Render table rows
112+
table
113+
.getRowModel()
114+
.rows.slice(0, 10)
115+
.forEach((row) => {
116+
const trElement = document.createElement('tr')
117+
row.getAllCells().forEach((cell) => {
118+
const tdElement = document.createElement('td')
119+
tdElement.innerHTML = flexRender(
120+
cell.column.columnDef.cell,
121+
cell.getContext(),
122+
)
123+
trElement.appendChild(tdElement)
124+
})
125+
tbodyElement.appendChild(trElement)
126+
})
127+
128+
// Render table state info
129+
const stateInfoElement = document.createElement('pre')
130+
stateInfoElement.textContent = JSON.stringify(
131+
{
132+
sorting: table.getState().sorting,
133+
},
134+
null,
135+
2,
136+
)
137+
138+
// Clear previous content and append new content
139+
const wrapperElement = document.getElementById('wrapper') as HTMLDivElement
140+
wrapperElement.innerHTML = ''
141+
wrapperElement.appendChild(tableElement)
142+
wrapperElement.appendChild(stateInfoElement)
143+
}
144+
145+
const table = tableHelper.tableCreator({
146+
data,
147+
columns,
148+
onStateChange: () => renderTable(),
149+
debugTable: true,
150+
})
151+
152+
renderTable()

0 commit comments

Comments
 (0)