> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/lwc-components/data-driven-components/data-driven-components.md).

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

{% hint style="info" %}

#### Data components, including the Data Table

This set, including the [Avonni Data Table](https://www.avonni.app/components/data-table), is part of the [Avonni LWC Components library](https://www.avonni.app/product/lwc-components).
{% endhint %}

## Documented components

* [Carousel](/lwc-components/data-driven-components/carousel.md) — records as horizontal sliding image/content panels.
* [Chat](/lwc-components/data-driven-components/chat.md) — records as a stream of chat messages.
* [Data Table](/lwc-components/data-driven-components/datatable.md) — tabular records with editing, sorting, filtering, pagination.
* [Image List](/lwc-components/data-driven-components/image-list.md) — records as a responsive image grid.
* [Kanban](/lwc-components/data-driven-components/kanban.md) — records as draggable cards grouped into columns (query only).
* [Leaflet Map](/lwc-components/data-driven-components/leaflet-map.md) — records as markers on a Leaflet map, with clustering and drawing.
* [List](/lwc-components/data-driven-components/list.md) — records as a list, check list, or single-line list.
* [Map](/lwc-components/data-driven-components/map.md) — records as markers on Google Maps, with an optional list view.
* [Pivot Table](/lwc-components/data-driven-components/pivot-table.md) — aggregated records in a pivot table (query only).
* [Scheduler](/lwc-components/data-driven-components/scheduler.md) — records as events in calendar, agenda, or timeline views (query only).
* [Timeline](/lwc-components/data-driven-components/timeline.md) — records placed chronologically on a time axis.
* [Tree](/lwc-components/data-driven-components/tree.md) — 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).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/lwc-components/data-driven-components/data-driven-components.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.