docs: add shadcn-kitchen-sink example (#5952)

* chore: add shadcn * chore: add components * feat: update checkbox * feat: add sorting * chore: cleanup * feat: add data-table-pagination * feat: update view-options * feat: update columns * feat: add column-visibility * feat: hide header for invisible column * feat: add column dnd * chore: sync * feat: add column sizing * feat: add alt ordering * feat: add sort list * feat: update sort list * feat: accessible sort-list * feat: better list * feat: add fitler list * chore: cleanup props * feat: update filter-list * chore: sync * feat: update filter-list * chore: sync * feat: update filter row * feat: default fitler operator * feat: update filter list * feat: update column resizing * feat: add column resizing * feat: cleanup sorting * feat: add filter uitls * feat: cleanup filters * feat: cleanup filters again * chore: cleanup filters * feat: working filters * feat: dont transform * chore: cleanup filters * chore: rimraf * feat: add falsy check * feat: update filter list * feat: update filter-list * feat: add better date filter * feat: update filters * feat: better data * feat: add date fitler * feat: add date filters * feat: update filters * feat: update filters list * feat: better date fitler * chore: track lib * feat: better date filter * feat: update fitlers * feat: add facted-filters * feat: update facted filters * feat: update filters * feat: add array filters * feat: add joining * feat: accesible table * feat: better filter list * feat: cleaner styels * feat: add fitlers * feat: update filters * chore: add debugger back * chore: sync * chore: use grid * chore: bump tailwindcss v4 * chore: sync * chore: revert to tailwindcss v3 * feat: update list
TanStack · Mar 9, 2025 · f3c947c · f3c947c
1 parent b5339c5
commit f3c947c
Show file tree

Hide file tree

Showing 38 changed files with 7,382 additions and 452 deletions.
diff --git a/examples/react/shadcn-basic/.gitignore b/examples/react/shadcn-basic/.gitignore
@@ -3,3 +3,4 @@ node_modules
 dist
 dist-ssr
 *.local
+!lib
diff --git a/examples/react/shadcn-basic/src/lib/utils.ts b/examples/react/shadcn-basic/src/lib/utils.ts
@@ -0,0 +1,7 @@
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import type { ClassValue } from 'clsx'
+
+export function cn(...inputs: Array<ClassValue>) {
+  return twMerge(clsx(inputs))
+}
diff --git a/examples/react/shadcn-kitchen-sink/.gitignore b/examples/react/shadcn-kitchen-sink/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+!lib
diff --git a/examples/react/shadcn-kitchen-sink/README.md b/examples/react/shadcn-kitchen-sink/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/shadcn-kitchen-sink/components.json b/examples/react/shadcn-kitchen-sink/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/examples/react/shadcn-kitchen-sink/index.html b/examples/react/shadcn-kitchen-sink/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/shadcn-kitchen-sink/package.json b/examples/react/shadcn-kitchen-sink/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "tanstack-table-example-shadcn-kitchen-sink",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite",
+    "lint": "eslint ./src",
+    "shadcn": "pnpm dlx shadcn@latest"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "@tanstack/react-table": "^9.0.0-alpha.10",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.475.0",
+    "react": "^19.0.0",
+    "react-day-picker": "8.10.1",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^6.0.1",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "typescript": "5.6.3",
+    "vite": "^5.4.11"
+  }
+}
diff --git a/examples/react/shadcn-kitchen-sink/postcss.config.js b/examples/react/shadcn-kitchen-sink/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,3 +3,4 @@ node_modules @@
     dist
     dist-ssr
     *.local
+    !lib