docs: update virtual rows example (#5237)

* update virtualized rows example * update lock file * fix virtual tbody
TanStack · Dec 28, 2023 · ff39428 · ff39428
1 parent 51a6fd7
commit ff39428
Show file tree

Hide file tree

Showing 45 changed files with 595 additions and 341 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -112,6 +112,10 @@
         {
           "label": "Row Selection",
           "to": "guide/row-selection"
+        },
+        {
+          "label": "Virtualization",
+          "to": "guide/virtualization"
         }
       ]
     },

diff --git a/docs/guide/virtualization.md b/docs/guide/virtualization.md
@@ -6,7 +6,8 @@ title: Virtualization
 
 Want to skip to the implementation? Check out these examples:
 
-- [virtualized-rows](../examples/react/virtualized-rows)
+- [virtualized-rows (dynamic row height)](../examples/react/virtualized-rows)
+- [virtualized-rows (fixed row height)](../../../../virtual/v3/docs/examples/react/table)
 - [virtualized-infinite-scrolling](../examples/react/virtualized-infinite-scrolling)
 
 ## API

diff --git a/examples/react/bootstrap/package.json b/examples/react/bootstrap/package.json
@@ -16,7 +16,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@rollup/plugin-replace": "^5.0.1",
     "@types/bootstrap": "^5.2.6",
     "@types/react-bootstrap": "^0.32.32",

diff --git a/examples/react/column-dnd/package.json b/examples/react/column-dnd/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",

diff --git a/examples/react/column-ordering/package.json b/examples/react/column-ordering/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/column-pinning/package.json b/examples/react/column-pinning/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/column-resizing-performant/package.json b/examples/react/column-resizing-performant/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/editable-data/package.json b/examples/react/editable-data/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/expanding/package.json b/examples/react/expanding/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/filters/package.json b/examples/react/filters/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/match-sorter-utils": "8.7.6",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",

diff --git a/examples/react/full-width-resizable-table/package.json b/examples/react/full-width-resizable-table/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/full-width-table/package.json b/examples/react/full-width-table/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/fully-controlled/package.json b/examples/react/fully-controlled/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/grouping/package.json b/examples/react/grouping/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/kitchen-sink/package.json b/examples/react/kitchen-sink/package.json
@@ -21,7 +21,7 @@
   "devDependencies": {
     "@emotion/babel-plugin": "^11.10.5",
     "@emotion/babel-plugin-jsx-pragmatic": "^0.2.0",
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@rollup/plugin-replace": "^5.0.1",
     "@vitejs/plugin-react": "^2.2.0",
     "vite": "^3.2.4"

diff --git a/examples/react/material-ui-pagination/package.json b/examples/react/material-ui-pagination/package.json
@@ -18,7 +18,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@rollup/plugin-replace": "^5.0.1",
     "@vitejs/plugin-react": "^2.2.0",
     "vite": "^3.2.3"

diff --git a/examples/react/pagination-controlled/package.json b/examples/react/pagination-controlled/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/examples/react/pagination/package.json b/examples/react/pagination/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/row-dnd/package.json b/examples/react/row-dnd/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",

diff --git a/examples/react/row-pinning/package.json b/examples/react/row-pinning/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/row-selection/package.json b/examples/react/row-selection/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/sorting/package.json b/examples/react/sorting/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/sorting/src/makeData.ts b/examples/react/sorting/src/makeData.ts
@@ -26,7 +26,7 @@ const newPerson = (): Person => {
     age: faker.number.int(40),
     visits: faker.number.int(1000),
     progress: faker.number.int(100),
-    createdAt: faker.datatype.datetime({ max: new Date().getTime() }),
+    createdAt: faker.date.anytime(),
     status: faker.helpers.shuffle<Person['status']>([
       'relationship',
       'complicated',

diff --git a/examples/react/sub-components/package.json b/examples/react/sub-components/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/examples/react/virtualized-infinite-scrolling/package.json b/examples/react/virtualized-infinite-scrolling/package.json
@@ -9,7 +9,7 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-query": "4.16.1",
     "@tanstack/react-table": "8.11.2",
     "react": "^18.2.0",

diff --git a/examples/react/virtualized-infinite-scrolling/src/index.css b/examples/react/virtualized-infinite-scrolling/src/index.css
@@ -11,12 +11,6 @@ table {
   width: 100%;
 }
 
-thead {
-  background: lightgray;
-  margin: 0;
-  position: sticky;
-  top: 0;
-}
 
 th {
   border-bottom: 1px solid lightgray;

diff --git a/examples/react/virtualized-infinite-scrolling/src/makeData.ts b/examples/react/virtualized-infinite-scrolling/src/makeData.ts
@@ -35,7 +35,7 @@ const newPerson = (index: number): Person => {
     age: faker.number.int(40),
     visits: faker.number.int(1000),
     progress: faker.number.int(100),
-    createdAt: faker.datatype.datetime({ max: new Date().getTime() }),
+    createdAt: faker.date.anytime(),
     status: faker.helpers.shuffle<Person['status']>([
       'relationship',
       'complicated',

diff --git a/examples/react/virtualized-rows/package.json b/examples/react/virtualized-rows/package.json
@@ -9,15 +9,15 @@
     "start": "vite"
   },
   "dependencies": {
-    "@faker-js/faker": "^8.0.2",
+    "@faker-js/faker": "^8.3.1",
     "@tanstack/react-table": "8.11.2",
+    "@tanstack/react-virtual": "^3.0.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-virtual": "^2.10.4"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@rollup/plugin-replace": "^5.0.1",
-    "@vitejs/plugin-react": "^2.2.0",
-    "vite": "^3.2.3"
+    "@rollup/plugin-replace": "^5.0.5",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.0.10"
   }
 }
diff --git a/examples/react/virtualized-rows/src/index.css b/examples/react/virtualized-rows/src/index.css
@@ -8,14 +8,14 @@ table {
   border-spacing: 0;
   font-family: arial, sans-serif;
   table-layout: fixed;
-  width: 100%;
 }
 
 thead {
   background: lightgray;
-  margin: 0;
-  position: sticky;
-  top: 0;
+}
+
+tr {
+  border-bottom: 1px solid lightgray;
 }
 
 th {
@@ -31,7 +31,10 @@ td {
 
 .container {
   border: 1px solid lightgray;
-  height: 500px;
-  max-width: 900px !important;
-  overflow: auto;
+  margin: 1rem auto;
 }
+
+.app {
+  margin: 1rem auto;
+  text-align: center;
+}