---
product: "AG Studio"
title: "Data Overview"
description: "Data is provided to Studio using the data property."
framework: vue
version: "3.0.0"
related:
    - title: "Data Modelling"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/vue/data-modelling/"
    - title: "Loading Data"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/vue/loading-data/"
    - title: "Sharing & Caching Data"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/vue/sharing-caching-data/"
llms: "https://www.ag-grid.com/studio/archive/3.0.0/llms.txt"
---

# Data Overview

Data is provided to Studio using the `data` property.

Data is retrieved from data sources. A data source represents one or more tables of data.

When multiple tables are provided, [Relationships](https://www.ag-grid.com/studio/archive/3.0.0/vue/data-modelling/#relationships) describe how the tables are linked.

See [Loading Data](https://www.ag-grid.com/studio/archive/3.0.0/vue/loading-data/) for how to provide data directly or have Studio fetch it on demand, and [Sharing & Caching Data](https://www.ag-grid.com/studio/archive/3.0.0/vue/sharing-caching-data/) to reuse data sources across multiple instances of Studio.

#### Single Data Source

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
  enableStudioDevValidations,
} from "ag-studio";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :initialState="initialState"
        :mode="mode"
        :data="data"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const initialState = ref<AgReportState>({
      pages: [
        {
          id: "page1",
          widgets: {
            "1": {
              type: "grid",
              dataMapping: {
                cols: [
                  { id: "medals.country" },
                  { id: "medals.sport" },
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                  { id: "medals.total", aggregation: "sum" },
                ],
              },
            },
            "2": {
              type: "column-chart-grouped",
              dataMapping: {
                categoryKey: [{ id: "medals.country" }],
                valueKey: [
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                ],
                tooltipKey: [],
              },
            },
          },
          widgetLayout: {
            "1": {
              xTrack: 0,
              yTrack: 0,
              xSpan: 24,
              ySpan: 16,
            },
            "2": {
              xTrack: 0,
              yTrack: 16,
              xSpan: 24,
              ySpan: 16,
            },
          },
        },
      ],
      selectedPageId: "page1",
      panels: {
        filters: {
          collapsed: true,
        },
        edit: {
          collapsed: true,
        },
      },
    });
    const mode = ref<AgStudioMode>("edit");
    const data = ref<AgDataSourcesDefinition | AgDataEngine>(null);

    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;

      const toStudioData = (data) => ({ sources: [{ id: "medals", data }] });

      fetch("https://www.ag-grid.com/studio/archive/3.0.0/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((respData) => (data.value = toStudioData(respData)));
    };

    return {
      studioApi,
      initialState,
      mode,
      data,
      onApiReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Single Data Source](https://www.ag-grid.com/studio/archive/3.0.0/examples/data/single-data-source/vue3/)

The example above demonstrates [Loading Data](https://www.ag-grid.com/studio/archive/3.0.0/vue/loading-data/) from a single data source.

```ts
<ag-studio
    :data="data"
    /* other studio properties ... */>
</ag-studio>

this.data = {
    sources: [{
        id: 'medals',
        data: [
            {
                year: 2000,
                sport: 'Swimming',
                country: 'United States',
                // ... other fields
            },
            // ... other rows
        ],
    }],
};
```

See [Data Modelling](https://www.ag-grid.com/studio/archive/3.0.0/vue/data-modelling/) for relationships, joining dates, schema design, and fan-out detection.

If your data can't be shipped to the browser at all - it's too large, or you want your own backend executing queries directly - see the separate [Server-Side Data](https://www.ag-grid.com/studio/archive/3.0.0/vue/server-side-data/) section.

## Data API

Properties available on the `AgDataSourcesDefinition&lt;TRegistry extends AgBaseRegistry = AgDefaultRegistry&gt;` interface.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `sources` | `AgDataSource<TRegistry>[]` |  | One or more data sources. |
| `relationships` | `AgRelationDefinition[]` |  | When using multiple related tables, this describes the fields that link the tables together. |
| `expressions` | `AgExpressionFieldDefinition<TRegistry, AgFormat<TRegistry>, any>[]` |  | Expression field definitions for calculated columns. |
| `formats` | `TRegistry["formats"]` |  | Overrides to existing formats, or additional custom formats. |
| `description` | `string` |  | AI-facing overview of the entire dataset: what it contains, what it's for, domain quirks. |
| `calendars` | `AgCalendar[]` |  | Named time dimensions (calendars) that supply date fragments and a continuous date spine. |
| `buckets` | `TRegistry["buckets"]` |  | Additional date-fragment bucket definitions to register alongside the built-in set (year, quarter, month, week, day, monthOfYear, dayOfWeek, …). Use this to add project-specific groupings such as `weekend`, `dayOfMonth`, or `hour` that the built-in registry does not include. Provide via createBuckets so type-level registry inference works correctly. |
| `options` | `AgDataSourcesOptions` |  | Engine-wide behavioural options, such as fan-out detection policy. |