docs: add experimental virtualization example (#5895)

* docs: add experimental virtualization example * work on experimental virtualized column examples --------- Co-authored-by: Kevin Van Cott <[email protected]>
TanStack · Feb 3, 2025 · 8d6e19f · 8d6e19f
1 parent 9763877
commit 8d6e19f
Show file tree

Hide file tree

Showing 27 changed files with 1,530 additions and 237 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -602,10 +602,18 @@
               "to": "framework/react/examples/virtualized-columns",
               "label": "Virtualized Columns"
             },
+            {
+              "to": "framework/react/examples/virtualized-columns-experimental",
+              "label": "Virtualized Columns (Experimental)"
+            },
             {
               "to": "framework/react/examples/virtualized-rows",
               "label": "Virtualized Rows"
             },
+            {
+              "to": "framework/react/examples/virtualized-rows-experimental",
+              "label": "Virtualized Rows (Experimental)"
+            },
             {
               "to": "framework/react/examples/virtualized-infinite-scrolling",
               "label": "Virtualized Infinite Scrolling"

diff --git a/examples/react/virtualized-columns-expiremental/.gitignore b/examples/react/virtualized-columns-expiremental/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/react/virtualized-columns-expiremental/README.md b/examples/react/virtualized-columns-expiremental/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/react/virtualized-columns-expiremental/index.html b/examples/react/virtualized-columns-expiremental/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/virtualized-columns-expiremental/package.json b/examples/react/virtualized-columns-expiremental/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "tanstack-table-example-virtualized-columns-experimental",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^8.4.1",
+    "@tanstack/react-table": "^8.20.6",
+    "@tanstack/react-virtual": "^3.12.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.7",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "5.4.5",
+    "vite": "^5.3.2"
+  }
+}
diff --git a/examples/react/virtualized-columns-expiremental/src/index.css b/examples/react/virtualized-columns-expiremental/src/index.css
@@ -0,0 +1,53 @@
+:root {
+  --virtual-padding-left: 0px;
+  --virtual-padding-right: 0px;
+}
+
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-family: arial, sans-serif;
+  table-layout: fixed;
+}
+
+thead {
+  background: lightgray;
+}
+
+tr {
+  border-bottom: 1px solid lightgray;
+}
+
+th {
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
+  padding: 2px 4px;
+  text-align: left;
+}
+
+td {
+  padding: 6px;
+}
+
+.container {
+  border: 1px solid lightgray;
+  margin: 1rem auto;
+}
+
+.app {
+  margin: 1rem auto;
+  text-align: center;
+}
+
+.left-column-spacer {
+  width: var(--virtual-padding-left);
+}
+
+.right-column-spacer {
+  width: var(--virtual-padding-right);
+}