👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Inline Edit Table
CRUD table with inline editing allowing users to click cells to edit values directly without opening separate forms
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Switching between list and edit views for small changes wastes time. This React CRUD table enables inline editing—click any cell to edit text, numbers, or select values directly in the table. Built with shadcn/ui Table, Input, Select components with automatic save on blur or enter key, changes persist immediately with loading indicators. Editable cells, validation feedback, and keyboard navigation—perfect for admin panels, inventory management, or data entry interfaces where quick edits to multiple records improve productivity without constant navigation.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/crud-inline-edit-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/crud-inline-edit-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/crud-inline-edit-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/crud-inline-edit-01.jsonRelated blocks you will also like
Data Table
Table with sorting and filtering
User List Management
User list with search and actions
Bulk Edit Products
Update multiple items simultaneously
Edit Product Form
CRUD form for product inventory
Product Detail View
Comprehensive detail view with tabs
Delete Confirmation
Confirmation dialog for deletions