Editable grid
The editable grid is a spreadsheet-like control embedded inside record forms. Use it to manage multi-row data such as invoice line items, pricing tables, or bill-of-materials entries.
The editable grid is not the same as the main list view. The list view displays records across an app. The editable grid is a form field inside a single record, designed for entering and editing row-level detail.
Add and manage rows
Build your row data with several entry methods:
- Add a row - click the empty phantom row at the bottom of the grid to append a new entry
- Insert a row - place a new row at a specific position within the grid
- Duplicate a row - copy an existing row to create a similar entry quickly
- Delete a row - remove a row using the row toolbar action (soft delete - the row is flagged, not permanently erased)
- Cut and paste rows - move rows between positions
- Drag-drop reorder - drag rows to rearrange their order; position numbers update automatically
Edit cell values
Edit data directly in the grid or through supporting views:
- Inline editing - click a cell to type a value, just like a spreadsheet
- Modal editing - open a dialog for fields that need more space or have complex inputs
- Open in new tab - launch the full record form for a row when you need access to all fields
- Cancel changes - revert modifications on a row before saving
- Change indicators - modified cells display a visual marker so you can see what has changed
Column behavior
Columns in the editable grid can vary depending on how the app is configured:
- Required indicators - columns that require a value show a visual marker in the header
- Read-only columns - some columns may be locked and display values without allowing edits
- Dynamic width - columns resize to fit their content
- Column grouping - related columns can be merged under a shared header
Footer totals
The grid footer can display aggregate values for numeric columns:
- Sum - total of all values in the column
- Average - mean value across rows
- Count - number of rows with data
- Min / Max - lowest and highest values
These totals update automatically as you add, edit, or remove rows - useful for tracking invoice totals or pricing summaries at a glance.
Access modes
Your ability to interact with the grid depends on the access mode set by the app configuration:
| Mode | Description |
|---|---|
| Full edit | Add, edit, reorder, delete rows |
| Edit-only | Edit existing rows, no add/delete |
| Locked-with-delete | View and delete rows, no editing |
| Read-only | View-only, no modifications |
The available row toolbar actions adjust to match your current mode. Per-row action availability can also be controlled by transition conditions.
Performance with large datasets
The editable grid uses virtual scrolling (TanStack Virtual) to handle large numbers of rows efficiently. Only the rows visible on screen are fully rendered. Rows outside the viewport switch to a simplified dormant state, keeping the grid responsive even with hundreds of entries.
Navigation
- Tab between cells for fast data entry
- Sticky headers remain visible as you scroll
- Sticky scrollbar stays accessible for wide grids
- Filtering and pagination available for large datasets
Common use cases
- Invoice line items - enter products, quantities, and amounts with footer totals
- Pricing tables - manage tiered pricing or rate cards with drag-drop ordering
- Bill of materials - list components, quantities, and costs for a project
- Time entry rows - log hours against tasks or activities within a single record
- Order items - build order lines with inline editing and running totals