@fragiola/grid-layout · React
Dashboards that move, and not a line of CSS from us.
A headless grid layout: items that drag and resize on a grid, push each other out of the way and settle. The keyboard and right-to-left come built in, and how it looks is up to you.
Drag and resize
One pointer path for mouse, touch and pen. Eight logical resize sides, a placeholder where the item will land, and a click that stays a click.
Collisions that settle
Items push what they land on, then settle: vertical, horizontal or not at all, with statics that never move and collisions you can prevent.
Keyboard and RTL
Grab, move, resize and drop from the keyboard, with events to announce each step. Right-to-left is a mirror, not a fork.
Every change a command
The layout lives in a typed model. Every change is a command your middleware can refuse or rewrite, from a drag, a key or your own code.
What it never ships
CSSIconsHandles you cannot restyleTextA design system
The state is exposed as data-* attributes and ARIA, so any styling solution works: Tailwind, plain CSS, CSS modules, CSS-in-JS. The examples use Fragiola UI and its palettes.
A layout is plain data
Items are objects in grid units. Render them how you like; the grid places them and moves them.
const layout = [
{ id: "revenue", x: 0, y: 0, w: 4, h: 2 },
{ id: "orders", x: 4, y: 0, w: 4, h: 2, minW: 2 },
{ id: "banner", x: 8, y: 0, w: 4, h: 1, static: true },
];
<GridLayout.Root defaultLayout={layout} onLayoutChange={save}>
<GridLayout.Items>
{(item) => <GridLayout.Item itemId={item.id}>{item.id}</GridLayout.Item>}
</GridLayout.Items>
</GridLayout.Root>