Inline Editing

Rowstack supports powerful inline editing, allowing users to update data directly within the grid without opening separate modals or forms.

#Enabling Editing

Editing can be enabled globally or on a per-column basis.

#Global Control

You can disable all editing by setting the table to read-only mode:

const config = {
  readOnly: {
    enabled: true
  }
};

#Column-Level Control

Each column definition can specify whether it is editable:

const columns = [
  {
    id: "name",
    name: "Name",
    isEditable: true // Defaults to true if not specified
  },
  {
    id: "id",
    name: "ID",
    isEditable: false // Users cannot edit this column
  }
];

#User Experience

#Starting an Edit

• Mouse: Double-click any cell to enter edit mode.
• Keyboard: Press Enter or start typing when a cell is focused.

#Navigating During Edit

• Tab: Save current changes and move to the next cell.
• Shift + Tab: Save and move to the previous cell.
• Enter: Save and move to the cell below.
• Esc: Cancel the current edit and discard changes.

#Data Syncing (onChange)

When a user finishes an edit, Rowstack triggers the onChange callback. This is where you should update your application's state or sync the changes to your database.

<Table 
  data={data} 
  columns={columns} 
  onChange={(updatedData) => {
    console.log("New table state:", updatedData);
    // Save to database here
  }} 
/>

#Supported Editors

Rowstack automatically chooses the right editor based on the Cell Type:

• Text/Number: Standard input field.
• Select/Multi-Select: Dropdown menu.
• Date: Calendar date picker.
• Checkbox: Simple toggle.