refinedev · akkikhan · Mar 8, 2026 · Mar 8, 2026 · Mar 8, 2026 · Mar 19, 2026
diff --git a/examples/table-shadcn-editable/.gitignore b/examples/table-shadcn-editable/.gitignore
@@ -0,0 +1,17 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+/dist
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/table-shadcn-editable/.npmrc b/examples/table-shadcn-editable/.npmrc
@@ -0,0 +1,2 @@
+# Radix UI and React 19 ship compatible peer-dep ranges since early 2025.
+# No overrides needed — keep this file for any future registry config.
diff --git a/examples/table-shadcn-editable/README.md b/examples/table-shadcn-editable/README.md
@@ -0,0 +1,26 @@
+# Editable Table with shadcn/ui
+
+A refine example demonstrating an **inline editable table** built with [shadcn/ui](https://ui.shadcn.com/) components and TanStack Table.
+
+## Features
+
+- Inline row editing without navigation
+- Edit title and status fields directly in the table
+- Optimistic mutation updates via `useUpdate`
+- Pagination with shadcn/ui Pagination components
+- TypeScript-typed hook API; component files use `// @ts-nocheck` for React 19 / Radix UI compatibility
+
+## Getting Started
+
+```bash
+npm install
+npm run dev
+```
+
+## Stack
+
+- [refine](https://refine.dev) – React framework for CRUD apps
+- [shadcn/ui](https://ui.shadcn.com/) – Accessible component collection
+- [TanStack Table v8](https://tanstack.com/table/v8) – Headless table library
+- [Tailwind CSS](https://tailwindcss.com/) – Utility-first CSS
+- [Vite](https://vitejs.dev/) – Build tool
diff --git a/examples/table-shadcn-editable/components.json b/examples/table-shadcn-editable/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "./src/App.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
diff --git a/examples/table-shadcn-editable/index.html b/examples/table-shadcn-editable/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="refine | Build your React-based CRUD applications, without constraints."
+    />
+    <title>
+      refine - Editable Table with shadcn/ui
+    </title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/table-shadcn-editable/package.json b/examples/table-shadcn-editable/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "table-shadcn-editable",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@refinedev/core": "^5.0.10",
+    "@refinedev/react-router": "^2.0.4",
+    "@refinedev/react-table": "^6.0.1",
+    "@refinedev/simple-rest": "^6.0.1",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.468.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.0.2",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.1",
+    "postcss": "^8.1.4",
+    "tailwindcss": "^3.0.11",
+    "typescript": "^5.8.3",
+    "vite": "^5.4.15"
+  }
+}
diff --git a/examples/table-shadcn-editable/postcss.config.js b/examples/table-shadcn-editable/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/examples/table-shadcn-editable/public/favicon.ico b/examples/table-shadcn-editable/public/favicon.ico
diff --git a/examples/table-shadcn-editable/public/manifest.json b/examples/table-shadcn-editable/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Editable Table",
+  "name": "refine Editable Table - shadcn/ui",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/examples/table-shadcn-editable/src/App.css b/examples/table-shadcn-editable/src/App.css
@@ -0,0 +1,110 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  .layout {
+    @apply flex flex-col md:flex-row gap-1;
+  }
+
+  .layout .content {
+    @apply flex flex-col flex-grow;
+  }
+
+  .breadcrumb {
+    @apply flex gap-6 p-2 border-b;
+    list-style-type: "/  ";
+  }
+
+  .breadcrumb a {
+    @apply text-primary;
+    text-decoration: none;
+  }
+
+  .menu {
+    @apply md:max-w-48 md:min-w-48 md:max-h-fit md:min-h-screen mx-2 py-2 px-1 flex justify-between items-center md:px-0 md:flex-col md:justify-start md:items-start bg-slate-100 border-gray-400;
+  }
+
+  .menu a {
+    @apply text-gray-950;
+  }
+
+  .menu .active {
+    @apply font-bold;
+  }
+
+  .menu ul {
+    @apply pl-4 flex md:flex-col md:justify-end;
+  }
+}
diff --git a/examples/table-shadcn-editable/src/App.tsx b/examples/table-shadcn-editable/src/App.tsx
@@ -0,0 +1,60 @@
+// @ts-nocheck — suppresses React 19 JSX type mismatches
+import { GitHubBanner, Refine } from "@refinedev/core";
+import routerProvider, {
+  DocumentTitleHandler,
+  NavigateToResource,
+  UnsavedChangesNotifier,
+} from "@refinedev/react-router";
+import dataProvider from "@refinedev/simple-rest";
+import { BrowserRouter, Outlet, Route, Routes } from "react-router";
+import "./App.css";
+import { Layout } from "./components/layout";
+import { PostList } from "./pages/posts";
+import { TableIcon } from "lucide-react";
+
+const API_URL = "https://api.fake-rest.refine.dev";
+
+function App() {
+  return (
+    <BrowserRouter>
+      <GitHubBanner />
+      <Refine
+        dataProvider={dataProvider(API_URL)}
+        routerProvider={routerProvider}
+        resources={[
+          {
+            name: "posts",
+            list: "/posts",
+            meta: {
+              icon: <TableIcon size={16} />,
+            },
+          },
+        ]}
+        options={{
+          syncWithLocation: true,
+          warnWhenUnsavedChanges: true,
+        }}
+      >
+        <Routes>
+          <Route
+            element={
+              <Layout>
+                <Outlet />
+              </Layout>
+            }
+          >
+            <Route
+              index
+              element={<NavigateToResource resource="posts" />}
+            />
+            <Route path="/posts" element={<PostList />} />
+          </Route>
+        </Routes>
+        <UnsavedChangesNotifier />
+        <DocumentTitleHandler />
+      </Refine>
+    </BrowserRouter>
+  );
+}
+
+export default App;
diff --git a/examples/table-shadcn-editable/src/components/breadcrumb/index.tsx b/examples/table-shadcn-editable/src/components/breadcrumb/index.tsx
@@ -0,0 +1,25 @@
+// @ts-nocheck — suppresses React 19 JSX type mismatches
+import { useBreadcrumb } from "@refinedev/core";
+import { Link } from "react-router";
+
+export const Breadcrumb = () => {
+  const { breadcrumbs } = useBreadcrumb();
+
+  return (
+    <ul className="breadcrumb text-sm text-gray-600">
+      {breadcrumbs.map((breadcrumb) => {
+        return (
+          <li key={`breadcrumb-${breadcrumb.label}`}>
+            {breadcrumb.href ? (
+              <Link to={breadcrumb.href}>
+                {breadcrumb.label.toLocaleLowerCase()}
+              </Link>
+            ) : (
+              <span>{breadcrumb.label.toLocaleLowerCase()}</span>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
diff --git a/examples/table-shadcn-editable/src/components/layout/index.tsx b/examples/table-shadcn-editable/src/components/layout/index.tsx
@@ -0,0 +1,16 @@
+// @ts-nocheck — suppresses React 19 JSX type mismatches
+import { type FC, type PropsWithChildren } from "react";
+import { Breadcrumb } from "../breadcrumb";
+import { Menu } from "../menu";
+
+export const Layout: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <div className="layout">
+      <Menu />
+      <div className="content">
+        <Breadcrumb />
+        <div>{children}</div>
+      </div>
+    </div>
+  );
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Radix UI and React 19 ship compatible peer-dep ranges since early 2025.
		# No overrides needed — keep this file for any future registry config.