AB Data Grid
Public tabular data grid for listing, sorting, filtering, and row selection. Wraps an internal grid implementation; always use ab-data-grid in generated UI, never the impl component or data-grid-implementation variant.
HTML tag: c-eb5d38cc487674b86906485157ec4ba6f
When to use
Section titled “When to use”- tabular data with sortable columns
- pick one or many rows from a table
- backend-driven data table (not tree/list)
| Prop | Type | Default | Description |
|---|---|---|---|
items | Array | “ | |
columns | Array | “ | |
data_source__thing_id | String | ||
show_toolbar | Boolean | ||
multiple | Boolean | ||
label | String | ||
appearance | String | ||
tone | String | ||
size | String | ||
density | String | ||
data_source_input_params | Object | [object Object] | |
suppress_context_menu | Boolean | ||
context_menu_custom_callback | Object |
- Define columns in property/entity shape (property_id, property_display_name, …) — the wrapper maps them to the internal grid.
- Use .items for static row data OR data_source__thing_id (+ data_source_input_params) for backend-loaded rows, not both patterns without intent.
- Set .multiple for multi-select; single-select is the default.
- Call reload() on the ab-data-grid instance to refresh backend-backed data.
Events
Section titled “Events”| Event | Detail |
|---|---|
item-picked | value |
data-loaded | value |
selected-items-changed | value |
Methods
Section titled “Methods”| Signature | Description |
|---|---|
reload() |
What to avoid
Section titled “What to avoid”Do not instantiate impl/custom-element tags for end-user tables. Do not use impl column shape (column_id, header, sorter) unless intentionally bypassing the property_id mapper.