---
product: "AG Studio"
title: "Data Overview"
description: "Data is provided to Studio using the data property."
framework: javascript
version: "3.0.0"
related:
    - title: "Data Modelling"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/data-modelling/"
    - title: "Loading Data"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/loading-data/"
    - title: "Sharing & Caching Data"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/javascript/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/javascript/data-modelling/#relationships) describe how the tables are linked.

See [Loading Data](https://www.ag-grid.com/studio/archive/3.0.0/javascript/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/javascript/sharing-caching-data/) to reuse data sources across multiple instances of Studio.

#### Single Data Source

```ts
import {
  AgReportState,
  AgStudioApi,
  AgStudioProperties,
  createStudio,
  enableStudioDevValidations,
} from "ag-studio";

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

const initialState: 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 studioProperties: AgStudioProperties = {
  mode: "edit",
  initialState,
};

let studioApi: AgStudioApi;

// setup Studio after the page has finished loading
const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);

fetch("https://www.ag-grid.com/studio/archive/3.0.0/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) =>
    studioApi!.setProperty("data", { sources: [{ id: "medals", data }] }),
  );
```

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

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

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

    // other studio properties ...
}
```

See [Data Modelling](https://www.ag-grid.com/studio/archive/3.0.0/javascript/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/javascript/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. |