Browse docs
Browse docs
A thin, gating-aware override of MUI's Grid (the modern CSS-Grid based Grid, with container, size and offset). Every native Grid prop is forwarded unchanged, on a container or an item alike. On top of that it adds the same two gating props the Dashforge form components carry: access (RBAC) and visibleWhen (form-engine reactive).
With neither prop set, it behaves exactly like MUI's Grid.
xs=12 · md=6
xs=12 · md=6
xs=6 · md=4
xs=6 · md=4
xs=12 · md=4
<Grid container spacing={2}>
<Grid size={{ xs: 12, md: 6 }}><Cell /></Grid>
<Grid size={{ xs: 12, md: 6 }}><Cell /></Grid>
<Grid size={{ xs: 6, md: 4 }}><Cell /></Grid>
</Grid>container, spacing and the responsive size prop behave as they do on MUI's Grid — this wrapper only adds gating.
Current role — switch it and watch the Revenue tile drop out:
// A gated grid item. For a role without 'read' on 'revenue',
// onUnauthorized: 'hide' drops the item and the row reflows.
<Grid container spacing={2}>
<Grid size={{ xs: 12, sm: 4 }}><Tile label="Visitors" /></Grid>
<Grid size={{ xs: 12, sm: 4 }} access={{ action: 'read', resource: 'revenue', onUnauthorized: 'hide' }}>
<Tile label="Revenue" />
</Grid>
<Grid size={{ xs: 12, sm: 4 }}><Tile label="Signups" /></Grid>
</Grid>Put access on a single grid item to gate just that cell. onUnauthorized: 'hide' drops the item and the surrounding cells reflow; 'disable' / 'readonly' dim it in place. Gating works on the container too, if you want to gate the whole block.
import { Grid } from '@dashforge/ui';
// Responsive 12-column layout
<Grid container spacing={2}>
<Grid size={{ xs: 12, md: 6 }}><MetricCard /></Grid>
<Grid size={{ xs: 12, md: 6 }}><MetricCard /></Grid>
</Grid>
// A tile only visible to users who may read revenue
<Grid size={{ xs: 12, md: 4 }} access={{ resource: 'revenue', action: 'read', onUnauthorized: 'hide' }}>
<RevenueCard />
</Grid>Grid accepts all MUI Grid props (container, size, offset, spacing, columns, direction, wrap, …), forwarded unchanged. It adds:
| Prop | Type | Default | Description |
|---|---|---|---|
access | AccessRequirement | — | RBAC gate for this node (container or item). hide → not rendered; disable / readonly → dimmed + aria-disabled. Resolved against the nearest RbacProvider. |
visibleWhen | (engine: Engine) => boolean | — | Reactive visibility predicate against the form engine. Renders only when it returns true. No-op outside a <DashForm>. |
sx | SxProps<Theme> | — | MUI style override on the root. Merged after the dimmed treatment, so it can override it. |
...rest | MuiGridProps | — | Every native MUI Grid prop, forwarded to the underlying element. |
import Grid from '@mui/material/Grid' for import { Grid } from '@dashforge/ui' — identical behavior until you add access / visibleWhen.hide removes just that cell (the row reflows); on a container, it removes the whole block.hide removes, disable / readonly dim (opacity: 0.6 + pointer-events: none, plus aria-disabled).RbacProvider mounted, access resolves to fully-visible (with a dev warning).