Data Grid

• columns + rows for flat lists. columns entries can supply render(row, i) for custom cells and bar(row) (returns 0-100) for inline bar charts.
• groups for the grouped variant — each group has label + rows + collapsed?.
• toolbar and pagination are slot ReactNodes — provide your own controls and the grid renders them in the chrome.

Pass selectedIds (a Set) + onSelectionChange for the bulk variant. rowId(row) tells the grid how to key each row.

Every Diamond component shares the same prop conventions, so once you learn one you can predict the others.

• variant — discriminated union of every visual option. Categories shown above are docs-only metadata; the prop is a flat string union.
• accent — any CSS color string. Overrides --diamond-accent just for that instance via inline style. Cascades into hover, ring, and selection states.
• asChild (when present) — renders the underlying primitive via @radix-ui/react-slot, letting you compose with <Link>, motion.button, etc.
• className — merged with internal Tailwind classes via cn(). Use it to override layout, spacing, or colors.
• Native HTML attributes (onClick, aria-*, data-*, ref, etc.) flow through to the root element without any whitelist.
• Diamond is the skin: zero domain state, zero fetch, zero providers. You wire data and reactions in your app code; the components just render and emit events.