A standalone layout is a page layout for a page that holds exactly one widget. The widget fills the width and height of the page canvas, so it suits pages such as a full-page grid or a single detail chart.
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgStudio, AgStudioRef } from "ag-studio-react";
import {
AgDataEngine,
AgDataSourcesDefinition,
AgReportHistory,
AgReportState,
AgStudioApi,
AgStudioApiReadyEvent,
AgStudioMode,
AgStudioProperties,
AgStudioTheme,
enableStudioDevValidations,
studioTheme,
} from "ag-studio";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableStudioDevValidations();
}
const StudioExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const studioStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [data, setData] = useState<AgDataSourcesDefinition | AgDataEngine>();
const initialState = useMemo<AgReportState | AgReportHistory>(() => {
return {
pages: [
{
id: "a",
layout: {
type: "standalone",
},
widgets: {
grid: {
type: "grid",
dataMapping: {
cols: [
{ id: "medals.country" },
{ id: "medals.gold", aggregation: "sum" },
{ id: "medals.silver", aggregation: "sum" },
{ id: "medals.bronze", aggregation: "sum" },
{ id: "medals.total", aggregation: "sum" },
],
},
sort: [
{
field: { id: "medals.total", aggregation: "sum" },
direction: "desc",
},
],
},
},
},
],
selectedPageId: "a",
panels: {
filters: { collapsed: true },
edit: { collapsed: true },
data: { collapsed: true },
},
};
}, []);
const theme = useMemo<AgStudioTheme>(() => {
return studioTheme.withParams({ studioMinWidth: 0, studioMinHeight: 0 });
}, []);
const onApiReady = useCallback((params: AgStudioApiReadyEvent) => {
fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data: any[]) => setData({ sources: [{ id: "medals", data }] }));
}, []);
return (
<div style={containerStyle}>
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
<AgStudio
style={studioStyle}
className="my-studio-container"
data={data}
initialState={initialState}
mode={"edit"}
theme={theme}
onApiReady={onApiReady}
/>
</div>
</div>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<StudioExample />
</StrictMode>,
);
Setting a Standalone Layout Copy Link
Set type to 'standalone' in the layout of a page in the report state:
const initialState = useMemo(() => {
return {
pages: [
{
id: 'medals',
layout: {
type: 'standalone',
},
widgets: {
grid: {
type: 'grid',
dataMapping: {
cols: [{ id: 'medals.country' }, { id: 'medals.gold', aggregation: 'sum' }],
},
},
},
},
],
selectedPageId: 'medals',
};
}, []);
<AgStudio initialState={initialState} />To use a standalone layout for every page, set type in the Studio-wide layout property instead. A page's own layout takes precedence over the Studio-wide value. For a page that holds more than one widget, see More Than One Widget.
const layout = {
type: 'standalone',
};
<AgStudio layout={layout} />In a standalone layout:
- The widget cannot be moved or resized.
- The page's
widgetLayoutis not used, so it can be left out. - The
columnsandrowHeightproperties have no effect, because the widget is not placed on a grid.
Width and Height Copy Link
The outer Studio component has a default Min Width and Min Height of 600px. In a standalone layout, consider overriding the studioMinWidth and studioMinHeight theme parameters (for example, setting them to 0) to avoid double scrollbars when the widget fills the page.
Canvas Width Copy Link
A standalone layout takes its default canvas width from two theme parameters, in place of the Canvas Min Width and Canvas Max Width used by other pages:
- Canvas Standalone Min Width (
studioCanvasStandaloneMinWidth) defaults to0, so there is no minimum width. - Canvas Standalone Max Width (
studioCanvasStandaloneMaxWidth) defaults to the value ofstudioCanvasMaxWidth, which has no maximum unless set.
The minWidth and maxWidth layout properties override these theme parameters. A value set on the page is used first, then a value set in the Studio-wide layout property, then the theme parameter.
More Than One Widget Copy Link
A page with a standalone layout must hold exactly one widget. This applies whether the page sets the layout in its own layout or inherits it from the Studio-wide layout property.
When such a page holds more than one widget, Studio reports a state error and shows only the first widget. What happens to the other widgets in the report state depends on the mode:
- In edit mode, they are removed from the report state.
- In view mode, they are kept in the report state but are not shown, and the state error is fatal.
See Invalid State for how to handle state errors.