TanStack · KevinVandy · Jan 27, 2023 · Jan 27, 2023 · Feb 2, 2023 · Feb 2, 2023
diff --git a/examples/react/row-pinning/.gitignore b/examples/react/row-pinning/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/react/row-pinning/README.md b/examples/react/row-pinning/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/row-pinning/index.html b/examples/react/row-pinning/index.html
@@ -0,0 +1,13 @@
+<!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 type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/row-pinning/package.json b/examples/react/row-pinning/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "tanstack-table-example-row-pinning",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview --port 3000",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^7.6.0",
+    "@tanstack/react-table": "8.7.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.1",
+    "@vitejs/plugin-react": "^2.2.0",
+    "vite": "^3.2.3"
+  }
+}
diff --git a/examples/react/row-pinning/src/index.css b/examples/react/row-pinning/src/index.css
@@ -0,0 +1,56 @@
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+.app {
+  padding: 1rem;
+}
+
+.container {
+  border: 1px solid lightgray;
+  max-height: 500px;
+  max-width: 1200px !important;
+  overflow: auto;
+}
+
+table {
+  border: 1px solid lightgray;
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+
+thead {
+  background: lightgray;
+  margin: 0;
+  position: sticky;
+  top: 0;
+}
+
+tbody {
+  border-bottom: 1px solid lightgray;
+  overflow: auto;
+  min-height: 500px;
+}
+
+th {
+  padding: 2px 4px;
+}
+
+td {
+  border-bottom: 1px solid lightgray;
+  padding: 2px 4px;
+}
+
+td:last-child {
+  border-right: 0;
+}
+
+tfoot {
+  color: gray;
+}
+
+tfoot th {
+  font-weight: normal;
+}