Overview
Data Driven Components render a dataset automatically — point one at your records and it handles display, filtering, sorting, search, and pagination. Reference each as an avonni-<name> tag in your own component and feed it data in one of two modes:
Query mode — set a
querydescriptor (objectApiName,orderBy,limit) and the component fetches and renders records. Amappingobject maps record fields onto the component's item properties using the{{Record.FieldApiName}}syntax.Static mode — provide an
items/columnsarray directly;queryis ignored.
Not all components support both modes — some are query-only (for example, Pivot Table). Each page's Overview states the modes it supports.
Data components, including the Data Table
This set, including the Avonni Data Table, is part of the Avonni LWC Components library.
Documented components
Carousel — records as horizontal sliding image/content panels.
Chat — records as a stream of chat messages.
Data Table — tabular records with editing, sorting, filtering, pagination.
Image List — records as a responsive image grid.
Kanban — records as draggable cards grouped into columns (query only).
Leaflet Map — records as markers on a Leaflet map, with clustering and drawing.
List — records as a list, check list, or single-line list.
Map — records as markers on Google Maps, with an optional list view.
Pivot Table — aggregated records in a pivot table (query only).
Scheduler — records as events in calendar, agenda, or timeline views (query only).
Timeline — records placed chronologically on a time axis.
Tree — related records as a hierarchical tree (query only).
What a component page covers
Each page opens with the component's avonni-* tag and a one-line description, then splits into two tabs:
Develop — overview, the field-mapping / column reference, query-vs-static examples, key considerations, and troubleshooting.
Specifications — the API reference: attributes, methods, custom events, and styling hooks (only the sections a component actually has).
Last updated
Was this helpful?