feat(refine-ui): add useEditableTable hook and shadcn/ui example (closes #7172)

[akkikhan]

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

1. useEditableTable Hook

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.

3. Example Project

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.

[changeset-bot]

⚠️ No Changeset found

Latest commit: a324456

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[Copilot]

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 useEditableTable hook implementation and registers it in packages/refine-ui/registry.json.
• Adds a full examples/table-shadcn-editable project 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.