Keyboard shortcuts drive Studio without the mouse.
They apply while your focus is inside Studio. If you tab or click into the surrounding application, its own shortcuts take over.
Layout Interactions Copy Link
The following interactions are possible within the layout:
- ⇥ Tab / ⇧ Shift+⇥ Tab - Move focus between widgets on the canvas.
- ↵ Enter - Move focus into the focused widget if there is focusable content (e.g. into the cells of a grid).
- ⎋ Esc - When focus is within a widget, move focus back to the widget container.
- ␣ Space - Select the focused widget (e.g. display the widget details in the Edit Panel).
- Delete / ⌫ Backspace - Delete the focused widget (Edit Mode only).
- ⇧ Shift + ↑/↓/←/→ - move the focused widget (Edit Mode only).
- ⌥ Alt + ↑/↓/←/→ - resize the focused widget (Edit Mode only).
When dragging a widget with the pointer (Edit Mode only), hold a modifier key to change the action:
- ⇧ Shift + drag - Duplicate the widget at the drop location.
- ⌥ Alt + drag - Swap the widget with the one at the drop location.
When focus is within a widget, ⇥ Tab / ⇧ Shift+⇥ Tab will keep cycling focus within the widget until ⎋ Esc is pressed.
Try using the interactions in the example below.
"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,
AgReportState,
AgStudioApi,
AgStudioApiReadyEvent,
AgStudioMode,
AgStudioProperties,
enableStudioDevValidations,
} 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>(() => {
return {
pages: [
{
id: "a",
widgets: {
a: {
type: "value",
dataMapping: {
value: [{ id: "medals.gold", aggregation: "sum" }],
},
format: {
caption: {
enabled: true,
text: "Gold Medals",
},
},
},
b: {
type: "column-chart-grouped",
dataMapping: {
categoryKey: [{ id: "medals.year" }],
valueKey: [{ id: "medals.silver", aggregation: "sum" }],
},
},
c: {
type: "grid",
dataMapping: {
cols: [
{ id: "medals.country" },
{ id: "medals.bronze", aggregation: "sum" },
],
},
},
},
widgetLayout: {
a: {
xTrack: 0,
yTrack: 0,
xSpan: 8,
ySpan: 8,
},
b: {
xTrack: 12,
yTrack: 0,
xSpan: 8,
ySpan: 16,
},
c: {
xTrack: 0,
yTrack: 16,
xSpan: 8,
ySpan: 16,
},
},
},
],
selectedPageId: "a",
panels: {
filters: {
collapsed: true,
},
data: {
collapsed: true,
},
},
};
}, []);
const onApiReady = useCallback((params: AgStudioApiReadyEvent) => {
fetch("https://www.ag-grid.com/studio/archive/3.0.0/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"}
onApiReady={onApiReady}
/>
</div>
</div>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<StudioExample />
</StrictMode>,
);
Undo & Redo Copy Link
Anywhere in Studio, unless your application has turned these off:
- ⌃ Ctrl/⌘ Cmd + Z - Undo the last change to the report.
- ⌃ Ctrl/⌘ Cmd + ⇧ Shift + Z - Redo.
Undo and redo cover changes to the report itself. While you are typing in a text field, these shortcuts undo your typing instead.
Field Configuration Copy Link
When you configure a widget, each field is shown as a pill with action buttons. With a field pill focused:
- ↑ / ↓ - Move focus between field pills.
- ⇧ Shift + ↑/↓ - Reorder the focused pill within its group.
- ↵ Enter - Move focus to the pill's action buttons (such as aggregation and remove).
- ⇥ Tab / ⇧ Shift+⇥ Tab - Move between a pill's action buttons.
- ⎋ Esc - Return focus from an action button to the pill.
Filters Copy Link
With a filter card focused in the filters panel:
- ↑ / ↓ - Move focus between filter cards.
- ⇧ Shift + ↑/↓ - Reorder the focused filter.
- ↵ Enter - Move focus into the focused filter.
- ← / → - Collapse or expand the focused filter.
- ⎋ Esc - Return focus from within a filter to its card.