MosaicTile
Tiling

MosaicTile

One tile of a MosaicGrid: a card positioned by the grid, with a move grip and resize grips while the grid is editable.

Component behavior

MosaicTile displays a header and body at the position assigned by MosaicGrid. Editable grids add move and resize controls. A tile outside a grid or without a matching layout entry renders nothing.

The header is the default drag handle. dragHandle="tile" enables dragging from the tile body. Interactive controls retain their click handling.

Mosaic tile chrome

Props

MosaicTileProps props
PropTypeDefaultDescription
idstring—Matches an id in the grid's layout. With the grid's autoPlace on (default) an unknown id claims a cell from the size props below; with it off, it renders nothing.
wnumber4Starting width in columns, used only when the tile is auto-placed. The layout entry wins once it exists.
hnumber2Starting height in rows for auto-placement.
xnumber—Starting column for auto-placement. Omit to drop into the first free slot.
ynumber—Starting row for auto-placement.
minWnumber—Floor for width, seeded onto the auto-placed entry. A resize stops here.
minHnumber—Floor for height.
maxWnumber—Ceiling for width.
maxHnumber—Ceiling for height.
pinnedbooleanfalseInitial static state of the automatically placed layout entry.
barebooleanfalseRemoves the surface, header, and body padding. The full surface becomes the drag handle unless dragHandle is set.
titleReactNode—Header title. Also becomes the move grip's accessible name when it is a string.
subReactNode—Dim secondary label beside the title.
actionsReactNode—Right-aligned header content. Pointer presses in this area do not start dragging.
onRemove() => void—Displays a close button after actions in edit mode. The handler must remove the tile from application state.
dragHandle"header" | "tile" | "none""header" (or "tile" when bare)Pointer drag target. The none setting disables pointer dragging while retaining keyboard controls.
resizablebooleantrueSet false to pin the size while still allowing the tile to be moved.
labelstring—Accessible name for the move grip. Needed when title is not a string; falls back to "tile".
flushbooleanfalseDrops the body padding, for content that should meet the tile's edges.
scrollbooleanfalseMakes the body the scrolling region instead of letting content overflow the cell.
childrenReactNode—Tile content. Nothing is imposed.

Content

flush drops the body padding, for content that should meet the tile’s edges (a table, a map, a chart with its own margins). scroll makes the body the scrolling region; use it when a tile can be resized smaller than its content, otherwise the content overflows the cell and paints over the tile below.

Mosaic tile body

Content that fits its cell

Use useMosaicTile inside tile content to read current dimensions. Derive chart height from cellHeight or change content according to column width w.

Adaptive tile content

Removing a tile

Tiles are drawn from the layout, so removing one means removing its entry. Put the control in actions and splice on click; the tile stops rendering and, under vertical compaction, the board closes the gap behind it.

Removable tiles

Automatic placement

A tile does not need a layout entry to exist. Give it a size (w and h, optionally x/y and the min/max bounds), and the grid places it into the first free cell when it renders. This lets a board be written as plain markup with no defaultLayout array to maintain: the tiles are the layout.

Initial tile size applies only before a layout entry exists. Later position and size come from layout state. autoPlace={false} on the grid hides tiles without layout entries.

A board with no layout arrayTSX
<MosaicGrid editable>
  <MosaicTile id="traffic" w={8} h={3} title="Requests">
    …
  </MosaicTile>
  <MosaicTile id="errors" w={4} h={3} title="Error rate">
    …
  </MosaicTile>
  <MosaicTile id="hosts" w={6} h={4} pinned title="Hosts">
    …
  </MosaicTile>
</MosaicGrid>

Wrapping an existing component

bare removes the surface, header, and body padding. Positioning, dragging, resize controls, and layout animation remain enabled.

A bare tile uses its full surface as the default drag handle. Add MosaicGrip to use a specific handle instead.

Bare tiles

MosaicGrip can be placed anywhere inside a tile.

Import

ImportTSX
import { MosaicGrid, MosaicTile } from "@solarius/onset";

<MosaicGrid defaultLayout={layout} editable>
  <MosaicTile id="hosts" title="Hosts" sub="by CPU" flush scroll>
    <Table>…</Table>
  </MosaicTile>
</MosaicGrid>;