> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# Repeater

> Render repeated inline visualizations for each data row with the Repeater component.

API reference: [Repeater()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.repeater/index.md) (function, beta), [IRepeaterProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.irepeaterprops/index.md) (interface, beta)

The Repeater component in GoodData.UI, similar to sparklines, displays one visualization in each of several rows, with each row varying by a key attribute. Use it to compare trends across many items in one grid, for example, one line chart of monthly franchise fees per state.

> **Warning:**
> Repeater is currently in the **beta** stage.

![Repeater with one row per product category, showing revenue as a line chart, average unit price as a number, and units returned as a column chart](https://www.gooddata.ai/docs/gooddata-ui/gd-ui/repeater_chart.png)

## [Buckets](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/repeater/#buckets)

| Prop | Required | Takes | What it does |
| --- | --- | --- | --- |
| `attribute` | Yes | One attribute | Sets the rows, one row per attribute value. |
| `columns` | No | Attributes and measures | Sets the columns. Attributes show as text, or as images and links when their label type is Image or Hyperlink. Measures show as numbers or inline charts (see [Example](#example)). Without at least one column, the repeater shows an error. |
| `viewBy` | No | One attribute | Slices the measures in inline charts, one data point per value. |
| `filters` | No | Filters | Limits the data the repeater shows. |

## [Sorting](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/repeater/#sorting)

[`Repeater`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.repeater/index.md) applies no sorting and has no `sortBy` prop.

## [Configuration](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/repeater/#configuration)

Pass these options in the `config` prop. See [Chart configuration](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/chart-config/index.md) for details.

| Option | What it changes |
| --- | --- |
| `colors`, `colorPalette`, `colorMapping` | Colors of the inline charts, one per measure. |
| `separators` | Thousands and decimal separators in the number format. |

## [Limits](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/repeater/#limits)

- Only attributes in `columns` can be drilled into.
- With `viewBy`, the repeater loads at most 1,000 values per row, counted as `viewBy` values times measures. It doesn't show the rest.

## [Structure](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/repeater/#structure)

```tsx
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { Repeater } from "@gooddata/sdk-ui-charts";

<Repeater
    attribute={<primaryAttribute>}
    columns={<attributesOrMeasures>}
    viewBy={<viewByAttribute>}
    config={<chart-config>}
    …
/>
```

## [Example](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/repeater/#example)

The following code sample shows an arrangement for a typical repeater:

```tsx
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { Repeater } from "@gooddata/sdk-ui-charts";
import { measureLocalId } from "@gooddata/sdk-model";
import * as Md from "./catalog.js";

const style = { height: 300 };

<div style={style}>
    <Repeater
        attribute={Md.LocationState}
        columns={[Md.LocationState, Md.$FranchiseFees]}
        viewBy={Md.DateDatasets.OrderDate.OrderDateMonthYear.Default}
        config={{
            inlineVisualizations: {
                [measureLocalId(Md.$FranchiseFees)]: {
                    type: "line",
                },
            },
        }}
    />
</div>;
```

The following code sample shows an arrangement for a repeater with advanced configuration

```tsx
import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { Repeater } from "@gooddata/sdk-ui-charts";
import { attributeLocalId, measureLocalId } from "@gooddata/sdk-model";
import * as Md from "./catalog.js";

const style = { height: 300 };

<div style={style}>
    <Repeater
        attribute={Md.LocationState}
        columns={[Md.LocationHyperlink, Md.$FranchiseFees]}
        viewBy={Md.DateDatasets.OrderDate.OrderDateMonthYear.Default}
        config={{
            hyperLinks: {
                [attributeLocalId(Md.LocationHyperlink)]: {
                    // Configure custom text to show for the hyperlink label
                    staticElementsText: "See location details",
                },
            },
            inlineVisualizations: {
                [measureLocalId(Md.$FranchiseFees)]: {
                    // Configure inline visualization type
                    type: "line",
                },
            },
            // Configure image sizing
            cellImageSizing: "fill",
            // Configure text wrapping
            cellTextWrapping: "wrap",
            // Configure vertical alignment of the repeater cells
            cellVerticalAlign: "middle",
        }}
    />
</div>;
```

## [Props](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/repeater/#props)

| Prop | Type | Required | Description | Inherited from |
|------|------|----------|-------------|----------------|
| [`drillableItems`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.irepeaterprops/index.md#irepeaterpropsdrillableitems) | [`ExplicitDrill`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.explicitdrill/index.md)`[]` | No | Configure drillability; e.g. which parts of the visualization can be interacted with. LIMITATION: For now only attributes in columns can be drilled into. | — |
| [`onDrill`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.irepeaterprops/index.md#irepeaterpropsondrill) | [`OnFiredDrillEvent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onfireddrillevent/index.md) | No | Called when user triggers a drill on a visualization. | — |
| [`attribute`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.irepeaterbucketprops/index.md#irepeaterbucketpropsattribute) | [`AttributeOrPlaceholder`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributeorplaceholder/index.md) | Yes | Main attribute that sets repeating frequency used for the computation. | [`IRepeaterBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.irepeaterbucketprops/index.md) |
| [`backend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibucketchartprops/index.md#ibucketchartpropsbackend) | [`IAnalyticalBackend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-backend-spi/sdk-backend-spi.ianalyticalbackend/index.md) | No | Analytical backend, from which the chart will obtain data to visualize If you do not specify instance of analytical backend using this prop, then you MUST have BackendProvider up in the component tree. | [`IBucketChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibucketchartprops/index.md) |
| [`columns`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.irepeaterbucketprops/index.md#irepeaterbucketpropscolumns) | [`AttributesMeasuresOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributesmeasuresorplaceholders/index.md) | No | Definition of columns which are sliced by the main attribute. | [`IRepeaterBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.irepeaterbucketprops/index.md) |
| [`config`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md#icommonchartpropsconfig) | [`IChartConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ichartconfig/index.md) | No | Configure chart's behavior and appearance. | [`ICommonChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md) |
| [`ErrorComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropserrorcomponent) | `ComponentType<`[`IErrorProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ierrorprops/index.md)`>` | No | React component to display in the event when there is an error with either obtaining the data from backend or with the data itself. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`execConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md#icommonchartpropsexecconfig) | [`IExecutionConfig`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.iexecutionconfig/index.md) | No | Execution configuration, will provide the execution with necessary config before initiating execution. | [`ICommonChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md) |
| [`exportTitle`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropsexporttitle) | `string` | No | Set title to use for exported files. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`filters`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.irepeaterbucketprops/index.md#irepeaterbucketpropsfilters) | [`NullableFiltersOrPlaceholders`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.nullablefiltersorplaceholders/index.md) | No | Specify filters to apply on the data to compute with. | [`IRepeaterBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.irepeaterbucketprops/index.md) |
| [`height`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md#icommonchartpropsheight) | `number` | No | Set height of the chart (in pixels). | [`ICommonChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md) |
| [`LoadingComponent`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropsloadingcomponent) | `ComponentType<`[`ILoadingProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.iloadingprops/index.md)`>` | No | React component to display while loading data from the backend. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`locale`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md#ivisualizationpropslocale) | `string` | No | Set Locale for visualization localization. | [`IVisualizationProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationprops/index.md) |
| [`onDataView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksondataview) | [`OnDataView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ondataview/index.md) | No | _(Alpha)_ Called when the visualization loads a DataView, i.e. it receives data from the backend. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonerror) | [`OnError`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onerror/index.md) | No | Called when an error occurs while loading data for the visualization. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onExportReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonexportready) | [`OnExportReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onexportready/index.md) | No | Called when the visualization is ready to be exported. | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`onLegendReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ichartcallbacks/index.md#ichartcallbacksonlegendready) | [`OnLegendReady`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.onlegendready/index.md) | No | Called when legend is rendered. | [`IChartCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ichartcallbacks/index.md) |
| [`onLoadingChanged`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md#ivisualizationcallbacksonloadingchanged) | [`OnLoadingChanged`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.onloadingchanged/index.md) | No | Called when loading status of the visualization changes - vis starts or stops loading | [`IVisualizationCallbacks`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.ivisualizationcallbacks/index.md) |
| [`placeholdersResolutionContext`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.irepeaterbucketprops/index.md#irepeaterbucketpropsplaceholdersresolutioncontext) | `any` | No | Resolution context for composed placeholders. | [`IRepeaterBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.irepeaterbucketprops/index.md) |
| [`viewBy`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.irepeaterbucketprops/index.md#irepeaterbucketpropsviewby) | [`AttributeOrPlaceholder`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.attributeorplaceholder/index.md) | No | View by attribute to be used for inline visualizations. | [`IRepeaterBucketProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.irepeaterbucketprops/index.md) |
| [`width`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md#icommonchartpropswidth) | `number` | No | Set width of the chart (in pixels). | [`ICommonChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.icommonchartprops/index.md) |
| [`workspace`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibucketchartprops/index.md#ibucketchartpropsworkspace) | `string` | No | Identifier of analytical workspace, from which the chart will obtain data to visualize. If you do not specify workspace identifier, then you MUST have WorkspaceProvider up in the component tree. | [`IBucketChartProps`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.ibucketchartprops/index.md) |