Data Grid

bin/rails g shadcnrb:component data_grid

<div class="@container min-w-80 max-w-full resize-x overflow-auto rounded-lg border border-dashed p-3">
  <%= sui.data_grid cards: true, selectable: true, editor: "cell-editor",
        class: "h-80 @xl:rounded-lg @xl:border" do |g| %>
    <%= g.header fixed: true do %>
      <%= g.row do %>
        <%= g.head "Order",    width: :fit, card: :title, fixed: true %>
        <%= g.head "Customer" %>
        <%= g.head "Notes",    width: 2, min: "12rem" %>
        <%= g.head "Ship to",  width: 1, min: "10rem" %>
        <%= g.head "Status",   width: :fit, card: :aside %>
        <%= g.head "Items",    width: :fit, align: :end %>
        <%= g.head "Total",    width: :fit, align: :end %>
        <%= g.head "Placed",   width: :fit, card: false %>
        <%= g.head "Actions",  width: :fit, card: :footer, heading: false, fixed: true %>
      <% end %>
    <% end %>
    <%= g.body id: "orders-body" do %>
      <%= render "demos/order_rows", g: g, orders: demo_orders(1) %>
      <%= render "demos/orders_loader", page: 2 %>
    <% end %>
  <% end %>
</div>
</div>

import { Controller } from "@hotwired/stimulus"

// Reference inline editor for the data grid docs. Named on the grid as
// `editor: "cell-editor"`, so the grid calls these by name; an app would
// load its editor from the server instead. Swaps the cell for an input.
export default class extends Controller {
  activate({ cell, via, key }) {
    if (cell.dataset.selectable === "false" || cell.querySelector("input")) return

    cell.dataset.original = cell.innerHTML
    const input = document.createElement("input")
    input.className = "w-full bg-transparent outline-none"
    input.value = via === "key" ? (key.length === 1 ? key : "") : cell.textContent.trim()
    cell.replaceChildren(input)
    input.focus()
    if (via !== "key") input.select()
  }

  commit({ cell }) {
    this.finish(cell, cell.querySelector("input")?.value)
  }

  cancel({ cell }) {
    this.finish(cell)
  }

  // Focus left mid-edit: this demo keeps the value; an app may discard.
  leave({ cell }) {
    this.finish(cell, cell.querySelector("input")?.value, { refocus: false })
  }

  // The original is taken before the swap: removing the input drops focus,
  // and the grid's reaction must find nothing left to finish.
  finish(cell, value = null, { refocus = true } = {}) {
    if (!("original" in cell.dataset)) return

    const original = cell.dataset.original
    delete cell.dataset.original
    cell.innerHTML = original
    if (value !== null) cell.textContent = value
    this.grid.stamp(cell.parentElement)
    if (refocus) this.grid.focusCell(cell)
  }

  get grid() {
    return this.application.getControllerForElementAndIdentifier(this.element, "shadcnrb--data-grid--component")
  }
}

<!-- Rows for the orders table: the page renders the first page inside the
     table, later pages arrive as a stream appended to its body. -->
<% g ||= sui.data_grid_proxy %>
<% orders.each do |order| %>
  <%= g.row do %>
    <%= g.cell order[:order] %>
    <%= g.cell order[:customer] %>
    <%= g.cell order[:notes] %>
    <%= g.cell order[:ship_to] %>
    <%= g.cell { sui.badge order[:status], variant: demo_badge_variant(order[:status]) } %>
    <%= g.cell order[:items] %>
    <%= g.cell order[:total] %>
    <%= g.cell order[:placed] %>
    <%= g.cell selectable: false do %>
      <div class="flex justify-end gap-1">
        <%= sui.button variant: :ghost, size: :"icon-sm", icon: :pencil, "aria-label": "Edit #{order[:order]}" %>
        <%= sui.button variant: :ghost, size: :"icon-sm", icon: :"trash-2", "aria-label": "Delete #{order[:order]}" %>
        <%= sui.button variant: :ghost, size: :"icon-sm", icon: :ellipsis, "aria-label": "More for #{order[:order]}" %>
      </div>
    <% end %>
  <% end %>
<% end %>

<%= turbo_stream.replace "orders-loader" do %>
  <%= render "demos/order_rows", orders: demo_orders(@page) %>
  <%= render "demos/orders_loader", page: @page + 1 if @page < TableDemoHelper::PAGES %>
<% end %>

<!-- Last child of the body: a lazy frame that fetches the next page once it
     scrolls into view. The stream replaces it with the page's rows and, if
     there is more, a fresh loader. -->
<%= turbo_frame_tag "orders-loader", src: more_orders_path(page: page, format: :turbo_stream), loading: :lazy, class: "block p-4 text-center text-sm text-muted-foreground animate-pulse" do %>Loading…<% end %>

# Replaces the orders grid's loader row with the next page and a fresh loader.
def more_orders
  sleep 1 # simulate server work
  @page = params[:page].to_i
end

get "demos/more_orders"                 => "demos#more_orders",             as: :more_orders

# Data for the data grid demo's orders, in pages the loader row fetches.
module TableDemoHelper
  PAGES = 3
  PER_PAGE = 20

  BADGE_VARIANT = { "Paid" => :default, "Pending" => :secondary, "Refunded" => :outline, "Failed" => :destructive }.freeze

  ORDER_SEEDS = [
    { customer: "Ada Lovelace",      notes: "Gift wrap requested, leave parcel with the concierge if nobody answers.", ship_to: "12 Analytical Row, Marylebone, London W1U 4AA, United Kingdom",              status: "Paid",     items: 3,  total: "$1,240.00" },
    { customer: "Grace Hopper",      notes: "Awaiting bank confirmation.",                                             ship_to: "1 Compiler Court, Arlington, VA 22201",                                    status: "Pending",  items: 1,  total: "$89.00" },
    { customer: "Hedy Lamarr",       notes: "Customer returned two items; refund issued to the original card.",         ship_to: "Frequency Hopping Studios, 88 Spread Spectrum Way, Vienna 1010, Austria", status: "Refunded", items: 7,  total: "$2,015.50" },
    { customer: "Katherine Johnson", notes: "Card declined twice.",                                                    ship_to: "Langley Research Center, Hampton, VA 23681",                               status: "Failed",   items: 2,  total: "$310.00" },
    { customer: "Margaret Hamilton", notes: "Split shipment: books ship now, the desk lamp follows next week.",         ship_to: "Draper Lab, 555 Technology Square, Cambridge, MA 02139",                   status: "Paid",     items: 12, total: "$4,780.25" }
  ].freeze

  def demo_orders(page)
    PER_PAGE.times.map do |n|
      i = (page - 1) * PER_PAGE + n
      ORDER_SEEDS[i % ORDER_SEEDS.size].merge(order: "ORD-#{10421 + i}", placed: (Date.new(2026, 9, 12) + i).iso8601)
    end
  end

  def demo_badge_variant(status) = BADGE_VARIANT[status]
end

<%= sui.data_grid size: :lg, class: "rounded-lg border" do |g| %>
  <%= g.header do %>
    <%= g.row do %>
      <%= g.head "Name" %>
      <%= g.head "Role" %>
    <% end %>
  <% end %>
  <%= g.body do %>
    <%= g.row { g.cell("Ada Lovelace", class: "font-medium") + g.cell("Engineer") } %>
    <%= g.row { g.cell("Grace Hopper", class: "font-medium") + g.cell("Admiral") } %>
  <% end %>
<% end %>