Inline Editable Data Grid

A spreadsheet-style data grid where cells become editable on click, with row add/delete and CSV export.

Tables & Data Grids tables-grids interactive spreadsheet shadcn complex

Prompt

Create an inline editable data grid with:
- Spreadsheet-style layout with row numbers on the left
- 5 columns: Name (text), Department (select), Start Date (date picker), Salary (number), Active (checkbox)
- Click any cell to edit it inline — shows appropriate input type
- Edited cells highlighted in yellow until saved
- "Save Changes" button appears when edits are pending
- Add row button at the bottom
- Delete row: hover to show delete icon
- Export to CSV button in the toolbar
- Sticky header row
- Use shadcn/ui, Tailwind CSS

Share:Share on X