shadcn_view_component 0.3.3

data/app/components/shadcn/chart/pie/component.rb

@@ -0,0 +1,169 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Chart
+    module Pie
+      # A pie, drawn on the server.
+      #
+      # **Ours.** `chart.tsx` has no markup for a shape — the caller writes
+      # `<PieChart><Pie …/></PieChart>` and `recharts` renders it. What is
+      # reproduced instead is the *contract* around it: each slice is filled
+      # from `--color-<key>`, which the container publishes from `config`, so
+      # the same stylesheet that themes upstream's chart themes this one.
+      #
+      # An arc is trigonometry and an SVG path, which is why the pie is the
+      # shape to draw first: no scales, no ticks, no axis labels to collide.
+      #
+      #   render(Shadcn::Chart::Component.new(config:)) do |chart|
+      #     chart.with_pie(data: { chrome: 275, safari: 200, firefox: 187 })
+      #   end
+      #
+      # `data:` is a Hash of key to number, which is what `group(:x).sum(:y)`
+      # already hands back.
+      class Component < ApplicationViewComponent
+        include Focusable
+
+        SIZE = 250
+        PADDING = 4
+        # Twelve o'clock, where a reader starts. SVG angles start at three.
+        START = -90
+
+        default_tag :svg
+        slot_name :"chart-pie"
+
+        style do
+          base { "mx-auto aspect-square max-h-[250px]" }
+        end
+
+        attr_reader :data, :config, :inner_radius, :percentage, :label
+
+        # `inner_radius:` is a fraction of the radius, as upstream's own
+        # examples pass one — 0 is a pie and 0.6 is the donut the docs show.
+        def initialize(data: {}, config: {}, inner_radius: 0, percentage: false, label: nil, **attributes)
+          @data = data.to_h.transform_keys(&:to_s).select { |_, value| value.to_f.positive? }
+          @config = config
+          @inner_radius = inner_radius.to_f.clamp(0, 0.95)
+          @percentage = percentage
+          @label = label
+          super(**attributes)
+        end
+
+        # No SVG `<title>`: it would say what the table says and then be drawn
+        # by the browser as a native tooltip on every hover, over this
+        # component's own. Reported from a screenshot — the grey box covering
+        # the panel was Chrome's, not ours.
+        def element_attributes(**defaults)
+          super(**{ viewBox: "0 0 #{SIZE} #{SIZE}" }.merge(keyboard).merge(defaults))
+        end
+
+        # The table follows the graphic it describes, which is the order a
+        # reader meets them in.
+        def call
+          safe_join([ render_element(body: tag.g(safe_join(slices), "aria-hidden": "true")), table ])
+        end
+
+        private
+
+        def drawn? = data.any?
+
+        # A pie of nothing draws nothing, and a table of nothing announces a
+        # name and then leaves a reader in an empty grid. A filtered scope
+        # reaches this.
+        def table
+          return unless drawn?
+
+          render(Table::Component.new(caption: label, columns: [ value_heading ], rows: table_rows))
+        end
+
+        def table_rows
+          data.map { |key, value| [ label_for(key), display_for(value, value.to_f / total) ] }
+        end
+
+        # One column, and it needs a name: a pie's numbers are counts, or the
+        # shares `percentage:` turns them into. The chart's own label heads it
+        # where there is one, since "Visitors" says more than "Value".
+        def value_heading = label.presence || shadcn_t("chart.value")
+
+        def total = @total ||= data.values.sum(&:to_f)
+
+        # Each slice carries what the tooltip needs, so the controller reads the
+        # DOM rather than being handed the series a second time as JSON.
+        def slices
+          angle = START
+
+          data.map do |key, value|
+            share = value.to_f / total
+            from = angle
+            angle += share * 360
+
+            tag.path(
+              d: path_for(from, angle),
+              fill: "var(--color-#{key.parameterize.underscore.dasherize})",
+              "data-shadcn--chart-target": "mark",
+              "data-action": "pointerenter->shadcn--chart#show pointermove->shadcn--chart#move " \
+                             "pointerleave->shadcn--chart#hide",
+              "data-key": key,
+              "data-label": label_for(key),
+              "data-display": display_for(value, share)
+            )
+          end
+        end
+
+        def label_for(key) = config.dig(key.to_sym, :label) || config.dig(key.to_s, :label) || key.to_s.humanize
+
+        # What the tooltip shows. A share where one was asked for, because a
+        # pie's question is usually "how much of the whole" — and doing it here
+        # keeps the tooltip's own markup 1:1 with upstream, which has one cell
+        # for a value and no room for a second number.
+        def display_for(value, share)
+          return "#{(share * 100).round(1).to_s.delete_suffix('.0')}%" if percentage
+
+          ActiveSupport::NumberHelper.number_to_delimited(value)
+        end
+
+        def centre = SIZE / 2.0
+
+        def radius = centre - PADDING
+
+        # A full circle has no arc: its two ends are the same point, so the path
+        # would draw nothing at all. One slice is the case a Rails application
+        # reaches by filtering, not an odd one.
+        def path_for(from, to)
+          return ring if (to - from) >= 359.999
+
+          outer_start = point(from, radius)
+          outer_end = point(to, radius)
+          large = (to - from) > 180 ? 1 : 0
+
+          return "M #{centre} #{centre} L #{outer_start} A #{radius} #{radius} 0 #{large} 1 #{outer_end} Z" if hole.zero?
+
+          inner_start = point(to, hole)
+          inner_end = point(from, hole)
+
+          "M #{outer_start} A #{radius} #{radius} 0 #{large} 1 #{outer_end} " \
+            "L #{inner_start} A #{hole} #{hole} 0 #{large} 0 #{inner_end} Z"
+        end
+
+        def ring
+          top = "#{centre} #{centre - radius}"
+          bottom = "#{centre} #{centre + radius}"
+          circle = "M #{top} A #{radius} #{radius} 0 1 1 #{bottom} A #{radius} #{radius} 0 1 1 #{top} Z"
+          return circle if hole.zero?
+
+          inner_top = "#{centre} #{centre - hole}"
+          inner_bottom = "#{centre} #{centre + hole}"
+
+          "#{circle} M #{inner_top} A #{hole} #{hole} 0 1 0 #{inner_bottom} A #{hole} #{hole} 0 1 0 #{inner_top} Z"
+        end
+
+        def hole = @hole ||= (radius * inner_radius).round(2)
+
+        def point(degrees, distance)
+          radians = degrees * Math::PI / 180
+
+          "#{(centre + distance * Math.cos(radians)).round(2)} #{(centre + distance * Math.sin(radians)).round(2)}"
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/chart/plot.rb

@@ -0,0 +1,147 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Chart
+    # The arithmetic a cartesian chart needs, and nothing that draws.
+    #
+    # This is the part the pie did not have and the reason the todo said the
+    # axis is the work: a bar is a rectangle, but *where* it goes is a scale, a
+    # nice maximum, a set of ticks and a band per category. A plain object, so
+    # all of that is asserted directly rather than through a browser — the same
+    # trade `Calendar::Month` makes.
+    #
+    # `data` is a Hash of category to a Hash of series to number, which is what
+    # a `group(:month, :platform).sum(:visits)` becomes after one `each_with_object`:
+    #
+    #   { "January" => { desktop: 186, mobile: 80 },
+    #     "February" => { desktop: 305, mobile: 200 } }
+    class Plot
+      SIZE = { width: 560, height: 240 }.freeze
+      # Room for the tick labels on the left and the category labels below.
+      PADDING = { left: 34, right: 8, top: 12, bottom: 24 }.freeze
+      TICKS = 4
+      # The share of a band left empty, so neighbouring categories do not touch.
+      INSET = 0.15
+
+      attr_reader :data, :series, :stacked, :width, :height
+
+      def initialize(data: {}, series: nil, stacked: false, width: SIZE[:width], height: SIZE[:height])
+        @data = data.to_h { |category, values| [ category.to_s, values.to_h.transform_keys(&:to_s) ] }
+        @series = (series || @data.values.flat_map(&:keys).uniq).map(&:to_s)
+        @stacked = stacked
+        @width = width
+        @height = height
+      end
+
+      def categories = data.keys
+
+      # The tallest thing the chart has to fit: one bar's value, or a whole
+      # stack's, rounded up to something a person would choose as a maximum.
+      def max
+        @max ||= nice(data.values.map { |values| tallest(values) }.max.to_f)
+      end
+
+      def ticks = @ticks ||= (0..TICKS).map { |step| max * step / TICKS }
+
+      # The horizontal room one category gets, including the space between.
+      def band = @band ||= (plot_width / [ categories.size, 1 ].max.to_f)
+
+      def x_of(index) = PADDING[:left] + band * index
+
+      def y_of(value) = PADDING[:top] + (plot_height - plot_height * value.to_f / max)
+
+      def baseline = y_of(0)
+
+      def plot_width = width - PADDING[:left] - PADDING[:right]
+
+      def plot_height = height - PADDING[:top] - PADDING[:bottom]
+
+      # One rectangle per series per category. Grouped side by side, or stacked
+      # one on top of the other — which is the same arithmetic with the bottom
+      # moved up by what is already there.
+      def bars
+        data.flat_map.with_index do |(category, values), index|
+          stacked ? stacked_bars(category, values, index) : grouped_bars(category, values, index)
+        end
+      end
+
+      # Where a series' line goes. Not the middle of a band: a line's axis is a
+      # *point* scale, so the first reading sits on the left edge and the last
+      # on the right, and upstream's own line and area charts touch both. A bar
+      # cannot — it needs a band to be wide in — which is why the two shapes
+      # place their category labels differently.
+      def point_x(index)
+        return x_of(index) + band / 2 if categories.size < 2
+
+        PADDING[:left] + plot_width * index / (categories.size - 1).to_f
+      end
+
+      def points(key)
+        key = key.to_s
+
+        data.map.with_index do |(category, values), index|
+          { category:, value: values[key],
+            x: point_x(index).round(2), y: y_of(values[key]).round(2) }
+        end
+      end
+
+      # Every label would collide long before a year of days fits, so only every
+      # `n`th is drawn — `n` from the room the longest label needs against the
+      # room a band gives it. Upstream's own charts rotate them instead; a Rails
+      # app is likelier to pass twelve months than a thousand points, so this
+      # stays a skip rather than a rotation.
+      def label_every(pixels_per_character: 7)
+        longest = categories.map { |category| category.length }.max.to_i
+
+        [ ((longest * pixels_per_character) / band).ceil, 1 ].max
+      end
+
+      private
+
+      def tallest(values)
+        stacked ? series.sum { |key| values[key].to_f } : values.values.map(&:to_f).max.to_f
+      end
+
+      def grouped_bars(category, values, index)
+        gutter = band * INSET
+        slot = (band - gutter * 2) / [ series.size, 1 ].max
+
+        series.each_with_index.map do |key, position|
+          value = values[key]
+          top = y_of(value)
+
+          bar(category:, key:, value:,
+              x: (x_of(index) + gutter + slot * position).round(2), y: top.round(2),
+              width: slot.round(2), height: (baseline - top).round(2))
+        end
+      end
+
+      def stacked_bars(category, values, index)
+        gutter = band * INSET
+        bottom = baseline
+
+        series.map do |key|
+          value = values[key]
+          height = plot_height * value.to_f / max
+          bottom -= height
+
+          bar(category:, key:, value:,
+              x: (x_of(index) + gutter).round(2), y: bottom.round(2),
+              width: (band - gutter * 2).round(2), height: height.round(2))
+        end
+      end
+
+      def bar(**attributes) = attributes
+
+      # A maximum a person would have chosen: the next round number above the
+      # tallest value, so the ticks read 0, 100, 200 rather than 0, 78.5, 157.
+      def nice(value)
+        return 1 if value <= 0
+
+        step = 10**Math.log10(value).floor
+
+        (value / step).ceil * step
+      end
+    end
+  end
+end

data/app/components/shadcn/chart/preview.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Chart
+    class Preview < ApplicationViewComponentPreview
+      # Upstream's "Pie Chart" example, drawn here rather than by recharts.
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Pie Chart - Donut", and the shape most of its own examples
+      # use: `inner_radius:` is a fraction of the radius.
+      def donut
+        render_with_template
+      end
+
+      # What a pie is usually asked — how much of the whole — with the share in
+      # the tooltip instead of the count.
+      def percentages
+        render_with_template
+      end
+
+      # Upstream's "Bar Chart - Multiple", and the first shape here with an axis
+      # under it.
+      def bar
+        render_with_template
+      end
+
+      # Upstream's "Bar Chart - Stacked": one bar a month, split by device.
+      def bar_stacked
+        render_with_template
+      end
+
+      # Upstream's "Line Chart - Multiple".
+      def line
+        render_with_template
+      end
+
+      # Upstream's "Area Chart".
+      def area
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/chart/previews/area.html.erb

@@ -0,0 +1,31 @@
+<%# Upstream's "Area Chart": the line with the space beneath it filled in. Flat
+    rather than the gradient the docs show — a gradient needs a `<defs>` with an
+    id per series, and an id unique in a page this gem cannot see is a cost the
+    fill does not repay. %>
+<%
+  config = {
+    desktop: { label: "Desktop", color: "var(--chart-1)" },
+    mobile: { label: "Mobile", color: "var(--chart-2)" }
+  }
+  data = {
+    "January" => { desktop: 186, mobile: 80 },
+    "February" => { desktop: 305, mobile: 200 },
+    "March" => { desktop: 237, mobile: 120 },
+    "April" => { desktop: 73, mobile: 190 },
+    "May" => { desktop: 209, mobile: 130 },
+    "June" => { desktop: 214, mobile: 140 }
+  }
+%>
+<%= render(Shadcn::Card::Component.new(class: "max-w-xl")) do |card| %>
+  <% card.with_header do |header| %>
+    <% header.with_title { "Visitors" } %>
+    <% header.with_description { "January – June 2026" } %>
+  <% end %>
+  <% card.with_card_content do %>
+    <%= render(Shadcn::Chart::Component.new(config:)) do |chart| %>
+      <% chart.with_area(data:, label: "Visitors a month, by device") %>
+      <% chart.with_chart_tooltip %>
+      <% chart.with_chart_legend %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/chart/previews/bar.html.erb

@@ -0,0 +1,32 @@
+<%# Upstream's "Bar Chart - Multiple": two series a month, side by side.
+
+    `data:` is a Hash of category to a Hash of series to number — which is one
+    `each_with_object` away from what `group(:month, :platform).sum(:visits)`
+    already returns. %>
+<%
+  config = {
+    desktop: { label: "Desktop", color: "var(--chart-1)" },
+    mobile: { label: "Mobile", color: "var(--chart-2)" }
+  }
+  data = {
+    "January" => { desktop: 186, mobile: 80 },
+    "February" => { desktop: 305, mobile: 200 },
+    "March" => { desktop: 237, mobile: 120 },
+    "April" => { desktop: 73, mobile: 190 },
+    "May" => { desktop: 209, mobile: 130 },
+    "June" => { desktop: 214, mobile: 140 }
+  }
+%>
+<%= render(Shadcn::Card::Component.new(class: "max-w-xl")) do |card| %>
+  <% card.with_header do |header| %>
+    <% header.with_title { "Visitors" } %>
+    <% header.with_description { "January – June 2026" } %>
+  <% end %>
+  <% card.with_card_content do %>
+    <%= render(Shadcn::Chart::Component.new(config:)) do |chart| %>
+      <% chart.with_bar(data:, label: "Visitors a month, by device") %>
+      <% chart.with_chart_tooltip %>
+      <% chart.with_chart_legend %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/chart/previews/bar_stacked.html.erb

@@ -0,0 +1,30 @@
+<%# Upstream's "Bar Chart - Stacked": the same months asking a different
+    question — not which series is larger, but what the month came to. The axis
+    grows to fit the whole stack rather than its tallest part. %>
+<%
+  config = {
+    desktop: { label: "Desktop", color: "var(--chart-1)" },
+    mobile: { label: "Mobile", color: "var(--chart-2)" }
+  }
+  data = {
+    "January" => { desktop: 186, mobile: 80 },
+    "February" => { desktop: 305, mobile: 200 },
+    "March" => { desktop: 237, mobile: 120 },
+    "April" => { desktop: 73, mobile: 190 },
+    "May" => { desktop: 209, mobile: 130 },
+    "June" => { desktop: 214, mobile: 140 }
+  }
+%>
+<%= render(Shadcn::Card::Component.new(class: "max-w-xl")) do |card| %>
+  <% card.with_header do |header| %>
+    <% header.with_title { "Visitors" } %>
+    <% header.with_description { "Every device, month by month" } %>
+  <% end %>
+  <% card.with_card_content do %>
+    <%= render(Shadcn::Chart::Component.new(config:)) do |chart| %>
+      <% chart.with_bar(data:, stacked: true, label: "Visitors a month, by device") %>
+      <% chart.with_chart_tooltip %>
+      <% chart.with_chart_legend %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/chart/previews/default.html.erb

@@ -0,0 +1,30 @@
+<%# Upstream's "Pie Chart": five browsers, one slice each, coloured from the
+    `--chart-*` tokens the gem's themes already define. The data is a plain Hash
+    of key to number — which is what `group(:browser).sum(:visitors)` returns.
+
+    `hide_label:` because a pie's label and its item name are the same word, and
+    without it the tooltip reads "Chrome / Chrome 275". Upstream's own pie
+    examples pass it for the same reason. %>
+<%
+  config = {
+    chrome: { label: "Chrome", color: "var(--chart-1)" },
+    safari: { label: "Safari", color: "var(--chart-2)" },
+    firefox: { label: "Firefox", color: "var(--chart-3)" },
+    edge: { label: "Edge", color: "var(--chart-4)" },
+    other: { label: "Other", color: "var(--chart-5)" }
+  }
+%>
+<%= render(Shadcn::Card::Component.new(class: "max-w-sm")) do |card| %>
+  <% card.with_header do |header| %>
+    <% header.with_title { "Visitors by browser" } %>
+    <% header.with_description { "January – June 2026" } %>
+  <% end %>
+  <% card.with_card_content do %>
+    <%= render(Shadcn::Chart::Component.new(config:)) do |chart| %>
+      <% chart.with_pie(data: { chrome: 275, safari: 200, firefox: 187, edge: 173, other: 90 },
+                        label: "Visitors by browser") %>
+      <% chart.with_chart_tooltip(hide_label: true) %>
+      <% chart.with_chart_legend %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/chart/previews/donut.html.erb

@@ -0,0 +1,16 @@
+<%# Upstream's "Pie Chart - Donut": the same slices with the middle taken out.
+    `inner_radius:` is a fraction, so the ring keeps its proportions at any size. %>
+<%
+  config = {
+    chrome: { label: "Chrome", color: "var(--chart-1)" },
+    safari: { label: "Safari", color: "var(--chart-2)" },
+    firefox: { label: "Firefox", color: "var(--chart-3)" },
+    edge: { label: "Edge", color: "var(--chart-4)" }
+  }
+%>
+<%= render(Shadcn::Chart::Component.new(config:, class: "max-w-sm")) do |chart| %>
+  <% chart.with_pie(data: { chrome: 275, safari: 200, firefox: 187, edge: 173 },
+                    inner_radius: 0.6, label: "Visitors by browser") %>
+  <% chart.with_chart_tooltip(hide_label: true) %>
+  <% chart.with_chart_legend %>
+<% end %>

data/app/components/shadcn/chart/previews/line.html.erb

@@ -0,0 +1,30 @@
+<%# Upstream's "Line Chart - Multiple": one polyline a series, with a dot at
+    each reading. Each dot carries its own number, so the tooltip is filled from
+    the DOM rather than from the series sent a second time as JSON. %>
+<%
+  config = {
+    desktop: { label: "Desktop", color: "var(--chart-1)" },
+    mobile: { label: "Mobile", color: "var(--chart-2)" }
+  }
+  data = {
+    "January" => { desktop: 186, mobile: 80 },
+    "February" => { desktop: 305, mobile: 200 },
+    "March" => { desktop: 237, mobile: 120 },
+    "April" => { desktop: 73, mobile: 190 },
+    "May" => { desktop: 209, mobile: 130 },
+    "June" => { desktop: 214, mobile: 140 }
+  }
+%>
+<%= render(Shadcn::Card::Component.new(class: "max-w-xl")) do |card| %>
+  <% card.with_header do |header| %>
+    <% header.with_title { "Visitors" } %>
+    <% header.with_description { "January – June 2026" } %>
+  <% end %>
+  <% card.with_card_content do %>
+    <%= render(Shadcn::Chart::Component.new(config:)) do |chart| %>
+      <% chart.with_line(data:, label: "Visitors a month, by device") %>
+      <% chart.with_chart_tooltip %>
+      <% chart.with_chart_legend %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/chart/previews/percentages.html.erb

@@ -0,0 +1,17 @@
+<%# A pie's question is usually "how much of the whole", so `percentage: true`
+    puts the share in the tooltip where the count would be. Doing it in the data
+    rather than in the tooltip keeps that part 1:1 with upstream, which has one
+    cell for a value and no room for a second number. %>
+<%
+  config = {
+    margin: { label: "Margine", color: "var(--chart-1)" },
+    costs: { label: "Costi", color: "var(--chart-2)" },
+    deductions: { label: "Ritenute", color: "var(--chart-3)" }
+  }
+%>
+<%= render(Shadcn::Chart::Component.new(config:, class: "max-w-sm")) do |chart| %>
+  <% chart.with_pie(data: { margin: 42_500, costs: 118_200, deductions: 9_800 },
+                    percentage: true, inner_radius: 0.55, label: "Margine commessa") %>
+  <% chart.with_chart_tooltip(indicator: :line, hide_label: true) %>
+  <% chart.with_chart_legend %>
+<% end %>

data/app/components/shadcn/chart/table/component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Chart
+    module Table
+      # The chart's numbers, as a table only a screen reader sees.
+      #
+      # **Ours.** `chart.tsx` has nothing like it — upstream's answer is
+      # recharts' `accessibilityLayer`, which makes the chart arrow-navigable
+      # and announces a category at a time.
+      #
+      # A table is what this port reaches for instead, because a table is
+      # already a table: a screen reader enters it in table mode, moves by row
+      # and by column, and rereads the column header on demand. What it
+      # replaces is one long sentence — *"January: Desktop 186, Mobile 80;
+      # February: …"* — which cannot be navigated, cannot be reread in pieces,
+      # and by the time a year of months is in it is not a sentence anyone
+      # listens to.
+      #
+      # It is rendered by the shape rather than by the container, so that a
+      # shape rendered on its own is still complete, and so that the graphic
+      # and its table can never disagree about who carries the data — the same
+      # object emits both.
+      #
+      # Not `Shadcn::Table`, despite the name it shadows inside this module:
+      # that family's classes are all visual — borders, padding, hover — and
+      # every one of them would be dead CSS on an element no one sees.
+      class Component < ApplicationViewComponent
+        default_tag :table
+        slot_name :"chart-table"
+
+        style do
+          base { "sr-only" }
+        end
+
+        attr_reader :caption, :columns, :rows
+
+        # `rows` is one array per row: the row's own header, then a cell per
+        # column.
+        def initialize(caption: nil, columns: [], rows: [], **attributes)
+          @caption = caption
+          @columns = columns
+          @rows = rows
+          super(**attributes)
+        end
+
+        def call
+          render_element(body: safe_join([ heading, head, body ].compact))
+        end
+
+        private
+
+        # Not an endless method with a trailing `if`: that reads as *define
+        # this method only when the condition holds*, and the condition is
+        # evaluated once, against the class.
+        def heading
+          tag.caption(caption) if caption.present?
+        end
+
+        # The corner cell is a `<td>` and not an empty `<th>`: it heads
+        # nothing, and a header cell with no text is a header a screen reader
+        # still announces.
+        def head
+          tag.thead(tag.tr(safe_join([ tag.td, *columns.map { |column| tag.th(column, scope: "col") } ])))
+        end
+
+        def body
+          tag.tbody(safe_join(rows.map do |header, *cells|
+            tag.tr(safe_join([ tag.th(header, scope: "row"), *cells.map { |cell| tag.td(cell) } ]))
+          end))
+        end
+      end
+    end
+  end
+end