Skip to content

Commit 8d6e19f

Browse files
KevinVandyKevin Van Cott
KevinVandy
and
Kevin Van Cott
authored
docs: add experimental virtualization example (#5895)
* docs: add experimental virtualization example * work on experimental virtualized column examples --------- Co-authored-by: Kevin Van Cott <kevin.vancott@rentvision.com>
1 parent 9763877 commit 8d6e19f

File tree

27 files changed

+1530
-237
lines changed

27 files changed

+1530
-237
lines changed

‎docs/config.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -602,10 +602,18 @@
602602
"to": "framework/react/examples/virtualized-columns",
603603
"label": "Virtualized Columns"
604604
},
605+
{
606+
"to": "framework/react/examples/virtualized-columns-experimental",
607+
"label": "Virtualized Columns (Experimental)"
608+
},
605609
{
606610
"to": "framework/react/examples/virtualized-rows",
607611
"label": "Virtualized Rows"
608612
},
613+
{
614+
"to": "framework/react/examples/virtualized-rows-experimental",
615+
"label": "Virtualized Rows (Experimental)"
616+
},
609617
{
610618
"to": "framework/react/examples/virtualized-infinite-scrolling",
611619
"label": "Virtualized Infinite Scrolling"

‎examples/react/virtualized-columns-expiremental/.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/react/virtualized-columns-expiremental/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/react/virtualized-columns-expiremental/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+
<body>
10+
<div id="root"></div>
11+
<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
12+
<script type="module" src="/src/main.tsx"></script>
13+
</body>
14+
</html>

‎examples/react/virtualized-columns-expiremental/package.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "tanstack-table-example-virtualized-columns-experimental",
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+
"@faker-js/faker": "^8.4.1",
13+
"@tanstack/react-table": "^8.20.6",
14+
"@tanstack/react-virtual": "^3.12.0",
15+
"react": "^18.3.1",
16+
"react-dom": "^18.3.1"
17+
},
18+
"devDependencies": {
19+
"@rollup/plugin-replace": "^5.0.7",
20+
"@types/react": "^18.3.3",
21+
"@types/react-dom": "^18.3.0",
22+
"@vitejs/plugin-react": "^4.3.1",
23+
"typescript": "5.4.5",
24+
"vite": "^5.3.2"
25+
}
26+
}

‎examples/react/virtualized-columns-expiremental/src/index.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
:root {
2+
--virtual-padding-left: 0px;
3+
--virtual-padding-right: 0px;
4+
}
5+
6+
html {
7+
font-family: sans-serif;
8+
font-size: 14px;
9+
}
10+
11+
table {
12+
border-collapse: collapse;
13+
border-spacing: 0;
14+
font-family: arial, sans-serif;
15+
table-layout: fixed;
16+
}
17+
18+
thead {
19+
background: lightgray;
20+
}
21+
22+
tr {
23+
border-bottom: 1px solid lightgray;
24+
}
25+
26+
th {
27+
border-bottom: 1px solid lightgray;
28+
border-right: 1px solid lightgray;
29+
padding: 2px 4px;
30+
text-align: left;
31+
}
32+
33+
td {
34+
padding: 6px;
35+
}
36+
37+
.container {
38+
border: 1px solid lightgray;
39+
margin: 1rem auto;
40+
}
41+
42+
.app {
43+
margin: 1rem auto;
44+
text-align: center;
45+
}
46+
47+
.left-column-spacer {
48+
width: var(--virtual-padding-left);
49+
}
50+
51+
.right-column-spacer {
52+
width: var(--virtual-padding-right);
53+
}

0 commit comments

Comments
 (0)