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 describe how the tables are linked.
See Loading Data for how to provide data directly or have Studio fetch it on demand, and Sharing & Caching Data to reuse data sources across multiple instances of Studio.
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/example-assets/olympic-winners.json")
.then((response) => response.json())
.then((data) =>
studioApi!.setProperty("data", { sources: [{ id: "medals", data }] }),
);
<div style="display: flex; flex-direction: column; height: 100%">
<div id="myStudio" class="my-studio-container"></div>
</div>
The example above demonstrates Loading Data from a single data source.
const studioProperties = {
data: {
sources: [{
id: 'medals',
data: [
{
year: 2000,
sport: 'Swimming',
country: 'United States',
// ... other fields
},
// ... other rows
],
}],
},
// other studio properties ...
}See 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 section.
Data API Copy Link
Properties available on the AgDataSourcesDefinition<TRegistry extends AgBaseRegistry = AgDefaultRegistry> interface.
One or more data sources.
|
When using multiple related tables, this describes the fields that link the tables together.
|
Expression field definitions for calculated columns.
|
Overrides to existing formats, or additional custom formats.
|
AI-facing overview of the entire dataset: what it contains, what it's for, domain quirks.
|
Named time dimensions (calendars) that supply date fragments and a continuous date spine.
|
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.
|
Engine-wide behavioural options, such as fan-out detection policy.
|