feat(refine-ui): add useEditableTable hook and shadcn/ui example (closes #7172)#7340
Closed
akkikhan wants to merge 4 commits into
Closed
feat(refine-ui): add useEditableTable hook and shadcn/ui example (closes #7172)#7340akkikhan wants to merge 4 commits into
akkikhan wants to merge 4 commits into
Conversation
…le example Closes refinedev#7172 ## What changed ### New hook \useEditableTable\ (shadcn/ui companion to \useTable\) Adds \packages/refine-ui/hooks/use-editable-table.ts\ and registers it in \packages/refine-ui/registry.json\ as a shadcn registry hook so users can install it with \shadcn add\. The hook is a companion to \useTable\ (from \@refinedev/react-table\) and mirrors the spirit of \@refinedev/antd\'s \useEditableTable\, adapted for headless / shadcn setups. API: \\\ s const { editingId, // BaseKey | undefined id of the row being edited editValues, // TVariables current draft values setEditValues, // Dispatch update draft values isEditing, // (id) => boolean editButtonProps, // (id, row?) => { onClick } cancelButtonProps, // { onClick } saveButtonProps, // { onClick, disabled } } = useEditableTable<IPost, HttpError, Partial<IPost>>({ resource: 'posts', mutationMode: 'optimistic', // default: 'pessimistic' autoSaveClose: true, // default: true }); \\\ Returns are stabilised with \useCallback\ / \useMemo\ to prevent unnecessary column rebuilds in the consuming \useMemo\ dep array. ### New example \examples/table-shadcn-editable\ Demonstrates the hook in a full Vite + React + Tailwind + shadcn/ui project against the public \�pi.fake-rest.refine.dev\ posts endpoint.
|
akkikhan
changed the title
There was a problem hiding this comment.
Pull request overview
Adds a new useEditableTable hook to the refine-ui shadcn registry (and package hooks) to enable inline row editing for TanStack Table-based shadcn/ui tables, plus a new Vite example demonstrating the workflow.
Changes:
- Introduces
useEditableTablehook implementation and registers it inpackages/refine-ui/registry.json. - Adds a full
examples/table-shadcn-editableproject showcasing inline editing, pagination, and refine integration. - Includes supporting shadcn/ui primitives (Button/Input/Select/Table/Pagination), styling, and config for the new example.
Reviewed changes
Copilot reviewed 30 out of 33 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/refine-ui/registry/new-york/refine-ui/data-table/use-editable-table.ts | Registry hook implementation for inline table editing |
| packages/refine-ui/registry.json | Registers the new use-editable-table hook in the shadcn registry |
| packages/refine-ui/hooks/use-editable-table.ts | Source hook implementation under refine-ui hooks |
| examples/table-shadcn-editable/vite.config.ts | Vite config + @ alias for the example |
| examples/table-shadcn-editable/tsconfig.node.json | TS config for Vite tooling in the example |
| examples/table-shadcn-editable/tsconfig.json | Main TS config for the example |
| examples/table-shadcn-editable/tailwind.config.js | Tailwind theme/config for the example |
| examples/table-shadcn-editable/src/vite-env.d.ts | Vite client typings |
| examples/table-shadcn-editable/src/pages/posts/list.tsx | Editable posts table page using useEditableTable + useTable |
| examples/table-shadcn-editable/src/pages/posts/index.ts | Barrel export for posts pages |
| examples/table-shadcn-editable/src/lib/utils.ts | cn() utility for className merging |
| examples/table-shadcn-editable/src/interfaces/index.d.ts | Example IPost type definition |
| examples/table-shadcn-editable/src/index.tsx | React app bootstrap for the example |
| examples/table-shadcn-editable/src/hooks/use-editable-table.ts | Example-local copy of the editable-table hook |
| examples/table-shadcn-editable/src/components/ui/table.tsx | shadcn/ui table primitives for the example |
| examples/table-shadcn-editable/src/components/ui/select.tsx | shadcn/ui select primitives for the example |
| examples/table-shadcn-editable/src/components/ui/pagination.tsx | shadcn/ui pagination primitives for the example |
| examples/table-shadcn-editable/src/components/ui/input.tsx | shadcn/ui input primitive for the example |
| examples/table-shadcn-editable/src/components/ui/button.tsx | shadcn/ui button primitive for the example |
| examples/table-shadcn-editable/src/components/menu/index.tsx | Example navigation menu |
| examples/table-shadcn-editable/src/components/layout/index.tsx | Example app layout wrapper |
| examples/table-shadcn-editable/src/components/breadcrumb/index.tsx | Example breadcrumb component |
| examples/table-shadcn-editable/src/App.tsx | Example refine app wiring (router/dataProvider/resources) |
| examples/table-shadcn-editable/src/App.css | Tailwind base + example layout styling |
| examples/table-shadcn-editable/public/manifest.json | Web app manifest for the example |
| examples/table-shadcn-editable/public/favicon.ico | Example favicon asset |
| examples/table-shadcn-editable/postcss.config.js | PostCSS config for Tailwind |
| examples/table-shadcn-editable/package.json | Example dependencies/scripts |
| examples/table-shadcn-editable/index.html | Vite HTML entry |
| examples/table-shadcn-editable/components.json | shadcn/ui generator config for the example |
| examples/table-shadcn-editable/README.md | Example documentation |
| examples/table-shadcn-editable/.npmrc | Example npm config |
| examples/table-shadcn-editable/.gitignore | Example gitignore |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
- Capture editingId as savedId before async mutate dispatch - Use functional setters in onSuccess so a concurrent row-edit is not accidentally closed when an older save completes - Fix README: replace 'Fully typed with TypeScript' with accurate note about @ts-nocheck usage for React 19 / Radix UI compatibility
- Fix package.json dep ranges to match actual installed v5/v6 refine packages (@refinedev/core ^5.0.10, react-table ^6.0.1, react-router ^2.0.4, simple-rest ^6.0.1, @tanstack/react-table ^8.21.3) - Remove legacy-peer-deps from .npmrc (Radix UI + React 19 peer ranges are compatible; no override needed) - Fix PaginationLink accessibility: render <button type=button> when no href is provided (avoids non-semantic <a> without href for JS-driven pagination) - Replace blanket @ts-nocheck in packages/refine-ui hook files with a narrower comment explaining the upstream constraint
|
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a useEditableTable hook for shadcn/ui tables in refine-ui.
This hook provides inline row editing functionality and serves as a companion to useTable, similar to @refinedev/antd’s useEditableTable, but adapted for headless/shadcn setups.
What’s Included
Location:
packages/refine-ui/hooks/use-editable-table.ts
Registered in:
packages/refine-ui/registry.json
This allows installation through the shadcn registry:
npx shadcn add https://ui.refine.dev/r/use-editable-table.json
2. Hook API
const {
editingId,
editValues,
setEditValues,
isEditing,
editButtonProps,
cancelButtonProps,
saveButtonProps,
} = useEditableTable<IPost, HttpError, Partial>({
resource: "posts",
mutationMode: "optimistic",
autoSaveClose: true,
});
Returned values
editingId – ID of the row currently being edited
editValues – draft row values
setEditValues – update draft values
isEditing(id) – checks if row is being edited
editButtonProps(id, row?) – edit button handler
cancelButtonProps – cancel editing
saveButtonProps – save edited values
The returned functions are stabilized with useCallback / useMemo to prevent unnecessary column rebuilds when used inside useMemo.
Added example:
examples/table-shadcn-editable
This demonstrates the hook using:
Vite
React
Tailwind
shadcn/ui
Connected to the public demo API:
https://api.fake-rest.refine.dev
Current Behavior
shadcn tables in refine-ui do not currently support inline row editing similar to the @refinedev/antd implementation.
New Behavior
useEditableTable enables inline editing support for shadcn tables using useTable.