129. Data Table - Inline Editing

Build a production-ready Data Table component that extends the base Data Table with inline editing functionality. This builds on top of the sorting feature from the base Data Table.

Requirements

1. Inline Editing

• Click on cell to edit
• Input field appears for editing
• Save changes on Enter or blur
• Cancel editing on Escape
• Visual feedback for edited cells
• Validation (optional)

2. Data Structure

interface Column {
  key: string;
  label: string;
  sortable?: boolean;
  editable?: boolean;
}

interface DataTableProps {
  data: Record<string, any>[];
  columns: Column[];
  onDataChange?: (rowIndex: number, columnKey: string, value: any) => void;
}

Example Usage

<DataTable 
  data={data} 
  columns={columns}
  onDataChange={(rowIndex, columnKey, value) => {
    // Handle data update
  }}
/>