-
Notifications
You must be signed in to change notification settings - Fork 2.1k
docs(dashboards): document the Grid container widget #11556
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
mngr
wants to merge
3
commits into
master
Choose a base branch
from
mngr/dashboard-grid-container-widget-docs
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
68 changes: 68 additions & 0 deletions
68
docs-mintlify/docs/explore-analyze/dashboards/widgets/container.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| --- | ||
| title: Grid container | ||
| description: Group widgets into a nested grid so you can arrange, resize, and move them together on a dashboard. | ||
| --- | ||
|
|
||
| <Warning> | ||
|
|
||
| The grid container widget is currently in preview, and its behavior may still change. Reach out to the [Cube support team](/admin/account-billing/support) to activate it for your account. | ||
|
|
||
| </Warning> | ||
|
|
||
| A grid container is a widget that holds other widgets in its own grid. Use it to group related tiles — a chart with its controls, a section of KPIs, a labelled block of text and visuals — so they can be arranged, moved, and resized as a unit. Containers can be nested, letting you build structured, multi-section layouts on a single dashboard. | ||
|
|
||
| ## Adding a grid container | ||
|
|
||
| In the [dashboard builder][ref-workbooks], open the **Add Widgets** menu in the toolbar and choose **Grid**. The container is added with an empty inner grid, and its settings panel opens so you can size the grid right away. | ||
|
|
||
| <Steps> | ||
| <Step> | ||
| Open the **Add Widgets** menu in the toolbar and choose **Grid**. If [drag-to-place](/docs/explore-analyze/dashboards/widgets) is enabled for your account, you can instead drag the **Grid** entry to drop the container exactly where you want it. | ||
| </Step> | ||
| <Step title="Set the inner grid size"> | ||
| In the settings panel that opens, set the number of **Columns** and **Rows** for the container's inner grid. It starts as a 2 × 2 grid. | ||
| </Step> | ||
| <Step title="Add widgets into it"> | ||
| Drag charts and other widgets straight into the container — see [Adding widgets to a container](#adding-widgets-to-a-container) below. | ||
| </Step> | ||
| </Steps> | ||
|
|
||
| ## The inner grid | ||
|
|
||
| Each container has its own grid, independent of the dashboard's grid. The **Columns** and **Rows** you set describe that inner grid, and it fills the whole container surface — so the container's cells resize with it rather than being tied to the dashboard's column width. Grid lines are shown while you're editing so you can see where widgets will land. | ||
|
|
||
| The grid grows a new row automatically when a widget is placed or resized past the current bottom edge, so you never run out of room while arranging. | ||
|
|
||
| ## Adding widgets to a container | ||
|
|
||
| You can add most widget types to a container — charts, text, AI summaries, controls, spacers, and dividers, as well as other grid containers. | ||
|
mngr marked this conversation as resolved.
|
||
|
|
||
| - **From the toolbar** — drag a widget from the **Add Widgets** menu or the **Add Controls** group and drop it directly onto the container, in one step. | ||
| - **Charts** — pick a report from the **Charts** picker and drop it onto the container. | ||
| - **Move an existing widget in** — drag a widget already on the dashboard into the container to move it inside. | ||
|
|
||
| Dropped widgets snap to the container's grid cells, and you can resize and rearrange them afterwards like any other widget. | ||
|
|
||
| ## Arranging widgets | ||
|
|
||
| - **Move the container** — drag the container on the dashboard; its child widgets keep their positions relative to each other. | ||
| - **Resize the container** — drag the resize grip on its bottom-right corner. Shrinking the container scales its children down to keep them in view. | ||
| - **Resize a child** — drag a child widget's resize grip to change its width or height within the grid. | ||
| - **Move a widget out** — drag a child out of the container and onto the dashboard to promote it back to a top-level widget. The dashboard reflows to make room below the drop point. | ||
|
|
||
| ## Distribute evenly | ||
|
|
||
| Turn on **Distribute evenly** in the container's settings to give every child the same width and height, laying them out as an even grid. This is handy when a container holds a set of comparable tiles — for example a row of KPIs — that should all be the same size. With it off, each child keeps the size you gave it. | ||
|
|
||
| ## Nesting containers | ||
|
|
||
| A grid container can hold another grid container. Drop a **Grid** into an existing container the same way you'd add any other widget, then add widgets into the nested grid. Use nesting to build sections within sections — for example, a top-level container per dashboard area, each holding its own arranged set of charts and controls. | ||
|
|
||
| ## Editing and removing | ||
|
|
||
| Every container shows a settings gear on its top-right corner. Click it to open the menu: | ||
|
|
||
| - **Edit** — open the settings panel to change the **Columns**, **Rows**, or **Distribute evenly** options. | ||
| - **Delete** — remove the container and everything inside it from the dashboard. | ||
|
|
||
| [ref-workbooks]: /docs/explore-analyze/workbooks | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Two small artifacts from applying my earlier suggestion:
<Steps>block, not both with duplicate content.title. Steps 2 and 3 do, and every<Step>elsewhere in the dashboards docs (controls.mdx:49,52,55) is titled — an untitled step renders with a blank heading next to two titled ones.Folding the lead-in's outcome into the step body fixes both:
Fix this →