DataGrid
An editable table: people click a cell to add or change its content, like rule conditions, line items or mappings.
Master
Click a cell to edit it: Field opens the formula editor, Condition is a select, Value is text. Enter saves, Escape cancels. Add and remove rows.
| # | Field | Condition | Value | Remove |
|---|---|---|---|---|
| 1 | Remove row 1 | |||
| 2 | Remove row 2 |
Usage
Use DataGrid when people enter or change data in rows, not just read it. It is one component: pass columns and rows as data. Each column has a type: text and number cells edit in place with a kit Input, select cells are a kit Select, formula cells open a kit FormulaEditor in the cell, date cells are a kit DatePicker, and readOnly columns only show. Click a cell or press Enter to edit; Enter or leaving the cell saves, Escape cancels, Tab moves to the next cell. rowNumbers adds a # column. canAddRows adds an Add row button under the grid, canInsertRows a + at the start of each row that adds a row under it, and canRemoveRows a remove button on each row. Columns are at least 160 wide unless they hug. The first column (and #) stays pinned when the grid scrolls sideways. setForAll on a column adds a Set for all menu under its title. detail makes rows expandable, with settings or sub-rows under each row. Inside a Form with columns, the grid spans the row, and with start labels it starts at the section's edge, since its column headers stand in for a label. For read-only lists use Table. See contracts/datagrid.json for the full contract.
Do's
- People build or change rows of data in place: rule conditions, price tiers, field mappings, line items.
- Short editable lists where a form per row would be slow.
Don'ts
- Do not use it to show data people only read. Use Table.
- Do not invent an EditableCell, GridRow or a table of loose inputs. Pass columns with a type.
- Do not build your own expand arrows or a second table under a row. Pass detail.
- Do not put a Form around each row. Save the rows from onRowsChange.
- Do not use raw hex.
<DataGrid
columns={conditionColumns}
defaultRows={conditions}
onRowsChange={setRules}
size="md"
line="medium"
canAddRows
canRemoveRows
label="Conditions"
defaultExpanded={[]}
/>