👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Table with Inline Editing
Inline editable table where users can click cells to edit values directly with input fields and save/cancel buttons
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Need to edit table data without opening separate forms? This React inline editing table lets users double-click cells to switch into edit mode with input fields appearing directly in the table. Built with shadcn/ui Table, Input, and Button components with Lucide React icons, each editable cell shows a pencil icon on hover and becomes an input when clicked. Save or cancel changes per row with check/x buttons—perfect for inventory management, price lists, or any interface where quick inline edits beat navigating to separate edit screens.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/table-inline-edit-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/table-inline-edit-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/table-inline-edit-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/table-inline-edit-01.jsonRelated blocks you will also like
Task Table with Actions
Action buttons with status badges
Table with Row Menu
Dropdown menu for row actions
Table with Row Selection
Select and bulk edit rows
Table with Expandable Rows
Edit in expandable panel
Table with Sortable Columns
Column sorting functionality
Searchable Filterable Data Table
Search before editing