Pro Components
Base Components
Data Table 4
Data table with inline cell editing (double-click), sortable columns, and dropdown for status.
Example
Virtualized Data Table With Cell Editing
This data table supports inline cell editing. Double-click any cell to edit its value. Right-click for copy and clear actions. Press Escape to cancel editing, Enter to save.
Loading orders…
| Purchased | Order Status | Payment Status | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Loading orders… | ||||||||||||||||||
Introduction
Data Table 4 supports inline editing:- Double-click to edit: Name and quantity cells switch to inputs on double-click; blur or Enter saves.
- Status: Dropdown menu to change status (Active, Pending, Inactive).
- Sortable: Column headers sort the data.
Usage
import { DataTable29 } from "@/components/ui/data-table29";
<DataTable29 data={editableRows} />;onChange callback if you need to persist edits to a server.