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

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

#### Single Data Source

```ts
import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component.ts';

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});
```

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

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

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

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/angular/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/angular/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. |