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 query descriptor (objectApiName, orderBy, limit) and the component fetches and renders records. A mapping object maps record fields onto the component's item properties using the {{Record.FieldApiName}} syntax.
• Static mode — provide an items/columns array directly; query is ignored.

Not all components support both modes — some are query-only (for example, Pivot Table). Each page's Overview states the modes it supports.

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).