{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "grid", "type": "registry:ui", "title": "Grid", "description": "An interactive data grid built on a real : a single tab stop with 2-D arrow-key cell navigation (roving tabindex), Home/End to row ends, and Ctrl+Home/End to the grid corners.", "registryDependencies": [ "utils" ], "files": [ { "path": "registry/ui/grid.tsx", "type": "registry:ui", "target": "components/ui/grid.tsx", "content": "/** @jsxImportSource hono/jsx */\nimport type { PropsWithChildren } from \"hono/jsx\"\nimport { cn, type ClassValue } from \"@/registry/lib/cn\"\n\n// Grid — shadcn-htmx, htmx v4 + Tailwind v4.\n//\n// An INTERACTIVE data grid: a single tab stop with 2-D arrow-key cell\n// navigation (roving tabindex). This is deliberately distinct from the\n// static
component — Table is the right choice for read-only\n// tabular data (every focusable link/button stays in the tab sequence and\n// AT gets native row/column navigation). Reach for Grid only when you want\n// spreadsheet-style cell focus and a SHORTER tab sequence (the whole grid\n// is one tab stop). See the APG comparison of the two patterns.\n//\n// shadcn/ui has no Grid component — this maps to the WAI-ARIA APG Grid\n// pattern, built on a real
so we inherit the semantic table model\n// and only layer the grid roles + roving tabindex on top.\n//\n// Refs (read before editing):\n// repos/aria-practices/content/patterns/grid/grid-pattern.html\n// — keyboard contract + roles/states. Arrow keys move one cell; Home/End\n// jump to row ends; Ctrl+Home/End jump to the grid's first/last cell.\n// repos/aria-practices/content/patterns/grid/examples/js/dataGrid.js\n// — the reference roving-tabindex implementation we model (one cell at\n// tabindex=\"0\", the rest at -1; setFocusPointer rolls the 0).\n// repos/mdn/files/en-us/web/html/reference/elements/table/index.md\n// repos/mdn/files/en-us/web/accessibility/aria/reference/roles/grid_role/index.md\n//\n// The ARIA contract:\n// - The container is a
with an accessible name\n// (aria-label or aria-labelledby). role=\"grid\" switches screen readers\n// into application mode so the arrow-key contract is exposed.\n// - Native carries the implicit role=\"row\";
the\n// implicit role=\"columnheader\"; the implicit role=\"gridcell\". We\n// keep the native elements and do NOT add aria-rowspan/colspan — per the\n// APG note, a grid built from a must use HTML rowspan/colspan.\n// - Every focusable cell is marked [data-grid-cell] so the keyboard layer\n// can build its 2-D map. Exactly one carries tabindex=\"0\"; the rest -1.\n// - If a cell contains a single interactive widget (link/button), grid\n// navigation focuses that widget directly (APG \"focus an element inside\n// the cell\"); otherwise it focuses the cell itself. We expose that via\n// / interactive children — the cell stays the\n// [data-grid-cell] hook and is the thing that gets tabindex.\n// - aria-sort lives on a header cell when the column is sortable (the sort\n// control routes through htmx, exactly like
).\n//\n// A tiny inline boot \n\n{%- endmacro %}\n\n{% macro ghead_open() %}{% endmacro %}\n{% macro ghead_close() %}{% endmacro %}\n\n{% macro gbody_open() %}{% endmacro %}\n{% macro gbody_close() %}{% endmacro %}\n\n{% macro grow_open(aria_rowindex=none, aria_colindex=none, selected=false, extra_class=\"\", attrs={}) -%}\n\n{%- endmacro %}\n{% macro grow_close() %}{% endmacro %}\n\n{%- set CELL = \"border-b border-r px-3 py-2 align-middle outline-none focus-visible:relative focus-visible:z-10 focus-visible:ring-[2px] focus-visible:ring-ring/50 data-[grid-active=true]:bg-muted/50\" -%}\n{%- set HEAD = CELL ~ \" border-t bg-muted/50 text-left font-medium text-muted-foreground first:rounded-tl-md last:rounded-tr-md\" -%}\n{%- set DATA = CELL ~ \" bg-background text-foreground\" -%}\n\n{% macro gcolheader(label, sort=none, aria_colindex=none, extra_class=\"\", attrs={}) -%}\n\n{%- endmacro %}\n\n{% macro growheader(label, aria_colindex=none, extra_class=\"\", attrs={}) -%}\n\n{%- endmacro %}\n\n{% macro gcell(content, aria_colindex=none, selected=false, aria_readonly=false, extra_class=\"\", attrs={}) -%}\n\n{%- endmacro %}\n" }, { "path": "registry/go-templates/grid.tmpl", "type": "registry:file", "target": "components/grid.tmpl", "content": "{{/*\n Grid templates — shadcn-htmx, htmx v4 + Tailwind v4.\n Mirrors registry/ui/grid.tsx. An INTERACTIVE data grid:
{{ label|safe }}{% if sort == \"ascending\" %}{% elif sort == \"descending\" %}{% elif sort == \"none\" %}{% endif %}{{ label|safe }}{{ content|safe }}
\n that is a SINGLE tab stop with 2-D arrow-key cell navigation (roving\n tabindex). Distinct from the static \"table\" component.\n\n Named templates:\n - \"grid\" — wrapper +
+ boot script (pass .Body)\n - \"grid_row\" — one (pass .Body HTML)\n - \"grid_colheader\" — a focusable {{.Body}}\n{{end}}\n\n{{define \"grid_colheader\"}}\n{{- $cell := \"border-b border-r px-3 py-2 align-middle outline-none focus-visible:relative focus-visible:z-10 focus-visible:ring-[2px] focus-visible:ring-ring/50 data-[grid-active=true]:bg-muted/50\" -}}\n{{- $head := printf \"%s border-t bg-muted/50 text-left font-medium text-muted-foreground first:rounded-tl-md last:rounded-tr-md\" $cell -}}\n\n{{end}}\n\n{{define \"grid_rowheader\"}}\n{{- $cell := \"border-b border-r px-3 py-2 align-middle outline-none focus-visible:relative focus-visible:z-10 focus-visible:ring-[2px] focus-visible:ring-ring/50 data-[grid-active=true]:bg-muted/50\" -}}\n{{- $head := printf \"%s border-t bg-muted/50 text-left font-medium text-muted-foreground first:rounded-tl-md last:rounded-tr-md font-medium text-foreground\" $cell -}}\n\n{{end}}\n\n{{define \"grid_cell\"}}\n{{- $cell := \"border-b border-r px-3 py-2 align-middle outline-none focus-visible:relative focus-visible:z-10 focus-visible:ring-[2px] focus-visible:ring-ring/50 data-[grid-active=true]:bg-muted/50\" -}}\n{{- $data := printf \"%s bg-background text-foreground\" $cell -}}\n\n{{end}}\n" }, { "path": "registry/phoenix/grid.ex", "type": "registry:file", "target": "lib/my_app_web/components/grid.ex", "content": "defmodule ShadcnHtmx.Components.Grid do\n @moduledoc \"\"\"\n Grid — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.\n\n An INTERACTIVE data grid: a `
(optional .Sort)\n - \"grid_rowheader\" — a focusable \n - \"grid_cell\" — a focusable (pass .Body)\n\n The boot script sets the roving tabindex (single tab stop) on first paint;\n public/site.js (keyed on data-slot=\"grid\") owns the arrow / Home / End /\n Ctrl+Home / Ctrl+End contract.\n\n Accessibility contract:\n repos/aria-practices/content/patterns/grid/grid-pattern.html\n repos/aria-practices/content/patterns/grid/examples/js/dataGrid.js\n\n Hand-compose the inner HTML (rows of headers/cells), then pass it as .Body\n (template.HTML via htmlSafe).\n*/}}\n\n{{define \"grid\"}}\n
\n \n {{.Body}}\n
\n \n
\n{{end}}\n\n{{define \"grid_row\"}}\n
{{.Label}}{{if eq .Sort \"ascending\"}}{{else if eq .Sort \"descending\"}}{{else if eq .Sort \"none\"}}{{end}}{{.Label}}{{.Body}}
` that is a SINGLE tab stop\n with 2-D arrow-key cell navigation (roving tabindex). Distinct from the\n static `table` component — reach for `grid` only when you want\n spreadsheet-style cell focus and a shorter tab sequence.\n\n Mirrors registry/ui/grid.tsx. Function components: `grid`, `grid_header`,\n `grid_body`, `grid_row`, `grid_columnheader`, `grid_rowheader`, `grid_cell`.\n\n A boot `\n \n \"\"\"\n end\n\n slot :inner_block, required: true\n def grid_header(assigns), do: ~H\"{render_slot(@inner_block)}\"\n\n slot :inner_block, required: true\n def grid_body(assigns), do: ~H\"{render_slot(@inner_block)}\"\n\n attr :\"aria-rowindex\", :integer, default: nil\n # contiguous-columns form: aria-colindex once on the row. w3c.github.io/aria/#aria-colindex\n attr :\"aria-colindex\", :integer, default: nil\n attr :selected, :boolean, default: false\n attr :class, :string, default: nil\n attr :rest, :global\n slot :inner_block, required: true\n\n def grid_row(assigns) do\n ~H\"\"\"\n \n {render_slot(@inner_block)}\n \n \"\"\"\n end\n\n attr :sort, :string, default: nil, values: [nil, \"none\", \"ascending\", \"descending\"]\n attr :\"aria-colindex\", :integer, default: nil\n attr :class, :string, default: nil\n attr :rest, :global\n slot :inner_block, required: true\n\n def grid_columnheader(assigns) do\n assigns = assign(assigns, head: @head)\n\n ~H\"\"\"\n \n \n {render_slot(@inner_block)}\n \n \n \n \n \n \n \n \n \n \n \n \"\"\"\n end\n\n attr :\"aria-colindex\", :integer, default: nil\n attr :class, :string, default: nil\n attr :rest, :global\n slot :inner_block, required: true\n\n def grid_rowheader(assigns) do\n assigns = assign(assigns, head: @head)\n\n ~H\"\"\"\n \n {render_slot(@inner_block)}\n \n \"\"\"\n end\n\n attr :\"aria-colindex\", :integer, default: nil\n attr :selected, :boolean, default: false\n attr :\"aria-readonly\", :boolean, default: false\n attr :class, :string, default: nil\n attr :rest, :global\n slot :inner_block, required: true\n\n def grid_cell(assigns) do\n assigns = assign(assigns, data: @data)\n\n ~H\"\"\"\n \n {render_slot(@inner_block)}\n \n \"\"\"\n end\nend\n" }, { "path": "registry/html/grid.html", "type": "registry:file", "target": "snippets/grid.html", "content": "\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Name\n \n \n \n Amount\n
Ada Lovelace$120.00
Grace Hopper$87.50
\n \n\n" } ] }