playbook_ui 16.7.0 → 16.8.0.pre.alpha.PLAY2935formbuilderrequiredindicatorbug16780

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb

@@ -0,0 +1,162 @@
+<%# TipTap loads via full URL dynamic import() in rich_text_editor_rails.js (esm.sh) — no import map, so no clash with Vite/host maps. %>
+<%= pb_content_tag(:div, id: object.container_id, class: object.classname, data: { pb_rte_tiptap: true, input_id: object.input_id, initial_html: object.initial_html, rte_simple: object.simple }) do %>
+  <div class="pb_rich_text_editor_kit">
+  <% if object.label.present? %>
+    <label for="<%= object.input_id %>">
+      <% if object.required_indicator %>
+        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) %><span style="color: #DA0014;"> *</span>
+      <% else %>
+        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) %>
+      <% end %>
+    </label>
+  <% end %>
+  <input type="hidden" name="<%= object.input_name %>" id="<%= object.input_id %>" value="" />
+  <div class="pb_rich_text_editor_advanced_container toolbar-active<%= " pb_rich_text_editor_rte--simple" if object.simple %>">
+    <% if object.simple %>
+    <%# Compact toolbar: Bold/Italic + Undo/Redo — no block-style Popover (avoids dialog positioning issues). %>
+    <div class="pb_background_kit pb_background_color_white toolbar rte-rails-toolbar-layout rte-rails-toolbar-layout--simple" id="<%= object.toolbar_id %>">
+      <div class="rte-rails-toolbar-row">
+        <div class="toolbar_block rte-toolbar-left">
+          <button type="button" class="toolbar_button" data-action="bold" title="Bold" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "bold", size: "lg" }) %>
+            <% end %>
+          </button>
+          <button type="button" class="toolbar_button" data-action="italic" title="Italic" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "italic", size: "lg" }) %>
+            <% end %>
+          </button>
+        </div>
+        <div class="toolbar_block rte-toolbar-right">
+          <button type="button" class="toolbar_button" data-action="undo" title="Undo" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "undo", size: "lg" }) %>
+            <% end %>
+          </button>
+          <button type="button" class="toolbar_button" data-action="redo" title="Redo" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "redo", size: "lg" }) %>
+            <% end %>
+          </button>
+        </div>
+      </div>
+    </div>
+    <% else %>
+    <% block_style_options = [
+      { value: "paragraph", text: "Paragraph", icon: "paragraph" },
+      { value: "heading-1", text: "Heading 1", icon: "h1" },
+      { value: "heading-2", text: "Heading 2", icon: "h2" },
+      { value: "heading-3", text: "Heading 3", icon: "h3" },
+      { value: "bulletList", text: "Bullet List", icon: "list" },
+      { value: "orderedList", text: "Ordered List", icon: "list-ol" },
+      { value: "blockquote", text: "Block Quote", icon: "block-quote" },
+    ] %>
+    <div class="pb_background_kit pb_background_color_white toolbar rte-rails-toolbar-layout" id="<%= object.toolbar_id %>">
+      <div class="rte-rails-toolbar-row">
+        <div class="toolbar_block rte-toolbar-left">
+          <span class="pb_popover_reference_wrapper">
+            <%# Button kit wraps content in <span class="pb_button_content"> — block <div>s inside are invalid and break layout. Single <span> row + JS sync from templates. %>
+            <%= pb_rails("button", props: {
+              id: object.rte_block_style_trigger_id,
+              variant: "secondary",
+              classname: "editor-dropdown-button",
+              html_options: {
+                type: "button",
+                "aria-label": "Text style",
+                "aria-haspopup": "true",
+              },
+            }) do %>
+              <span class="pb_flex_kit pb_flex_kit_orientation_row pb_flex_kit_justify_content_left pb_flex_kit_align_items_center pb_flex_kit_spacing_none pb_flex_kit_gap_xs gap_xs rte-block-style-trigger-inner" data-rte-block-trigger>
+                <span class="rte-block-style-trigger-icon">
+                  <%= pb_rails("icon", props: { icon: "paragraph", size: "lg" }) %>
+                </span>
+                <span class="rte-block-style-trigger-label">Paragraph</span>
+                <span class="display_inline_flex rte-block-style-chevron">
+                  <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true }) %>
+                </span>
+              </span>
+            <% end %>
+          </span>
+          <%= pb_rails("popover", props: {
+            trigger_element_id: object.rte_block_style_trigger_id,
+            tooltip_id: object.rte_block_style_tooltip_id,
+            position: "bottom",
+            padding: "none",
+            close_on_click: "any",
+            offset: true,
+          }) do %>
+            <%= pb_rails("nav", props: { variant: "subtle", padding_top: "xs", padding_bottom: "xs" }) do %>
+              <% block_style_options.each do |opt| %>
+                <%= pb_rails("nav/item", props: {
+                  link: "##{opt[:value]}",
+                  text: opt[:text],
+                  icon_left: opt[:icon],
+                  margin: "none",
+                  padding_top: "xxs",
+                  padding_bottom: "xxs",
+                }) %>
+              <% end %>
+            <% end %>
+          <% end %>
+          <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
+          <button type="button" class="toolbar_button" data-action="bold" title="Bold" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "bold", size: "lg" }) %>
+            <% end %>
+          </button>
+          <button type="button" class="toolbar_button" data-action="italic" title="Italic" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "italic", size: "lg" }) %>
+            <% end %>
+          </button>
+          <button type="button" class="toolbar_button" data-action="strike" title="Strikethrough" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "strikethrough", size: "lg" }) %>
+            <% end %>
+          </button>
+          <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
+          <button type="button" class="toolbar_button" data-action="codeBlock" title="Code block" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "code", size: "lg" }) %>
+            <% end %>
+          </button>
+          <button type="button" class="toolbar_button" data-action="link" title="Link" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "link", size: "lg" }) %>
+            <% end %>
+          </button>
+        </div>
+        <div class="toolbar_block rte-toolbar-right">
+          <button type="button" class="toolbar_button" data-action="undo" title="Undo" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "undo", size: "lg" }) %>
+            <% end %>
+          </button>
+          <button type="button" class="toolbar_button" data-action="redo" title="Redo" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "redo", size: "lg" }) %>
+            <% end %>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div id="<%= object.container_id %>-block-icon-templates" hidden aria-hidden="true">
+      <% block_style_options.each do |opt| %>
+        <span data-block-template-for="<%= opt[:value] %>" data-label="<%= opt[:text] %>">
+          <%= pb_rails("icon", props: { icon: opt[:icon], size: "lg" }) %>
+        </span>
+      <% end %>
+    </div>
+    <% end %>
+    <div class="rte-editor-wrap">
+      <div id="<%= object.editor_node_id %>"></div>
+    </div>
+  </div>
+  </div>
+<% end %>
+
+<%# Module script: rich_text_editor_rails.js %>
+<script type="module">
+<%= File.read(Playbook.kit_path("rich_text_editor", "rich_text_editor_rails.js")).html_safe %>
+</script>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbRichTextEditor
+    # Rails rich text editor: TipTap (vanilla JS), no React. Content syncs to a hidden input for form submission.
+    class RichTextEditor < Playbook::KitBase
+      prop :value
+      prop :placeholder
+      prop :input_options, type: Playbook::Props::HashProp, default: {}
+      prop :label
+      prop :required_indicator, type: Playbook::Props::Boolean, default: false
+      # When true, TipTap toolbar matches React `simple`: Bold + Italic only (no block-style Popover).
+      # Use in modals or narrow layouts where the block dropdown misbehaves.
+      prop :simple, type: Playbook::Props::Boolean, default: false
+
+      # Match React default (globalProps maxWidth "md").
+      def max_width
+        v = values[:max_width] || values["max_width"]
+        v.nil? || v == "" ? "md" : v
+      end
+
+      def classname
+        generate_classname("pb_rich_text_editor_kit", "rte-container")
+      end
+
+      def input_id
+        return input_options[:id].presence if input_options[:id].present?
+        return "#{id}-input" if id.present?
+
+        # Unique per kit instance — multiple editors without a kit `id` would otherwise share the same DOM id.
+        "rich_text_editor-input-#{object_id}"
+      end
+
+      def input_name
+        return input_options[:name].presence if input_options[:name].present?
+        return "#{id}_content" if id.present?
+
+        # Last-resort default; two editors with neither `id` nor `input_options[:name]` still collide — set one of them.
+        "content"
+      end
+
+      def initial_html
+        raw = value.present? ? value.to_s.strip : ""
+        return "<p></p>" if raw.blank?
+
+        raw.start_with?("<") ? raw : "<p>#{raw}</p>"
+      end
+
+      def container_id
+        id.present? ? "rte-tiptap-#{id}" : "rte-tiptap-#{input_id.gsub(/[^a-z0-9_-]/i, '')}"
+      end
+
+      def editor_node_id
+        "#{container_id}-editor"
+      end
+
+      def toolbar_id
+        "#{container_id}-toolbar"
+      end
+
+      # Stable DOM ids for TipTap toolbar popover (used in ERB + module script; must be kit methods — not ERB locals).
+      def rte_block_style_trigger_id
+        "#{toolbar_id}-block-trigger"
+      end
+
+      def rte_block_style_tooltip_id
+        "#{toolbar_id}-block-tooltip"
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor_rails.js

@@ -0,0 +1,202 @@
+// Rails TipTap: dynamic import() from esm.sh (no import map — avoids 2nd map ignored by Firefox vs Vite/host).
+// Idempotent: data-pb-rte-initialized / data-pb-rte-pending.
+
+const RTE_TIPTAP_VERSION = "2.8.0";
+const RTE_TIPTAP_ESM = (pkg) => `https://esm.sh/${pkg}@${RTE_TIPTAP_VERSION}`;
+
+async function initPlaybookRichTextEditorRails(container) {
+  if (!container || container.dataset.pbRteInitialized || container.dataset.pbRtePending) return;
+  container.dataset.pbRtePending = "true";
+
+  const inputId = container.dataset.inputId;
+  let initialHtml = container.dataset.initialHtml || "<p></p>";
+  if (initialHtml && !initialHtml.trim().startsWith("<")) {
+    initialHtml = "<p>" + initialHtml + "</p>";
+  }
+  const containerId = container.id;
+  const hiddenInput = document.getElementById(inputId);
+  const editorNode = document.getElementById(`${containerId}-editor`);
+  const toolbar = document.getElementById(`${containerId}-toolbar`);
+  const rteSimple = container.dataset.rteSimple === "true";
+  const blockTooltipId = `${containerId}-toolbar-block-tooltip`;
+  const iconTemplatesRoot = rteSimple
+    ? null
+    : document.getElementById(`${containerId}-block-icon-templates`);
+
+  if (!editorNode || !hiddenInput || !toolbar) {
+    delete container.dataset.pbRtePending;
+    return;
+  }
+
+  function syncToHiddenInput(editor) {
+    if (editor && hiddenInput) {
+      hiddenInput.value = editor.getHTML();
+    }
+  }
+
+  try {
+    const { Editor } = await import(RTE_TIPTAP_ESM("@tiptap/core"));
+    const { default: StarterKit } = await import(RTE_TIPTAP_ESM("@tiptap/starter-kit"));
+    const { default: Link } = await import(RTE_TIPTAP_ESM("@tiptap/extension-link"));
+
+    const editor = new Editor({
+      element: editorNode,
+      extensions: [
+        StarterKit.configure({ heading: { levels: [1, 2, 3] } }),
+        Link.configure({ openOnClick: false, HTMLAttributes: { target: "_blank", rel: "noopener" } }),
+      ],
+      content: initialHtml,
+      editable: true,
+      onUpdate: ({ editor: ed }) => syncToHiddenInput(ed),
+    });
+
+    syncToHiddenInput(editor);
+
+    const actionToChain = {
+      bold: "toggleBold",
+      italic: "toggleItalic",
+      strike: "toggleStrike",
+      codeBlock: "toggleCodeBlock",
+    };
+
+    const getCurrentBlockValue = () => {
+      let value = "paragraph";
+      if (editor.isActive("heading", { level: 1 })) value = "heading-1";
+      else if (editor.isActive("heading", { level: 2 })) value = "heading-2";
+      else if (editor.isActive("heading", { level: 3 })) value = "heading-3";
+      else if (editor.isActive("bulletList")) value = "bulletList";
+      else if (editor.isActive("orderedList")) value = "orderedList";
+      else if (editor.isActive("blockquote")) value = "blockquote";
+      return value;
+    };
+
+    const syncBlockTrigger = () => {
+      if (rteSimple) return;
+      const current = getCurrentBlockValue();
+      const triggerRoot = toolbar.querySelector("[data-rte-block-trigger]");
+      let tpl =
+        iconTemplatesRoot &&
+        [...iconTemplatesRoot.children].find(
+          (el) => el.getAttribute("data-block-template-for") === current
+        );
+      if (!tpl && iconTemplatesRoot) {
+        tpl = [...iconTemplatesRoot.children].find(
+          (el) => el.getAttribute("data-block-template-for") === "paragraph"
+        );
+      }
+      if (triggerRoot && tpl) {
+        const iconWrap = triggerRoot.querySelector(".rte-block-style-trigger-icon");
+        const labelEl = triggerRoot.querySelector(".rte-block-style-trigger-label");
+        if (iconWrap) iconWrap.innerHTML = tpl.innerHTML;
+        if (labelEl) labelEl.textContent = tpl.getAttribute("data-label") || "";
+      }
+      const tooltip = document.getElementById(blockTooltipId);
+      if (tooltip) {
+        tooltip.querySelectorAll("a.pb_nav_list_item_link").forEach((a) => {
+          const href = a.getAttribute("href") || "";
+          const v = href.startsWith("#") ? href.slice(1) : "";
+          a.classList.toggle("is-active", v === current);
+        });
+      }
+    };
+
+    const applyBlockType = (value) => {
+      const chain = editor.chain().focus();
+      if (value === "paragraph") chain.setParagraph().run();
+      else if (value === "heading-1") chain.toggleHeading({ level: 1 }).run();
+      else if (value === "heading-2") chain.toggleHeading({ level: 2 }).run();
+      else if (value === "heading-3") chain.toggleHeading({ level: 3 }).run();
+      else if (value === "bulletList") chain.toggleBulletList().run();
+      else if (value === "orderedList") chain.toggleOrderedList().run();
+      else if (value === "blockquote") chain.toggleBlockquote().run();
+    };
+
+    const updateActiveStates = () => {
+      syncBlockTrigger();
+      toolbar.querySelectorAll("button[data-action]").forEach((btn) => {
+        const action = btn.dataset.action;
+        let active = false;
+        if (action === "bold") active = editor.isActive("bold");
+        else if (action === "italic") active = editor.isActive("italic");
+        else if (action === "strike") active = editor.isActive("strike");
+        else if (action === "codeBlock") active = editor.isActive("codeBlock");
+        else if (action === "link") active = editor.isActive("link");
+        btn.classList.toggle("is-active", active);
+      });
+      toolbar.querySelectorAll("button[data-action='undo']").forEach((btn) => {
+        btn.disabled = !editor.can().undo();
+      });
+      toolbar.querySelectorAll("button[data-action='redo']").forEach((btn) => {
+        btn.disabled = !editor.can().redo();
+      });
+    };
+
+    if (!rteSimple) {
+      const blockStyleTooltip = document.getElementById(blockTooltipId);
+      if (blockStyleTooltip) {
+        blockStyleTooltip.addEventListener("click", (e) => {
+          const a = e.target.closest("a[href^='#']");
+          if (!a || !blockStyleTooltip.contains(a)) return;
+          e.preventDefault();
+          const href = a.getAttribute("href") || "";
+          const v = href.startsWith("#") ? href.slice(1) : "";
+          if (!v) return;
+          applyBlockType(v);
+          updateActiveStates();
+        });
+      }
+    }
+
+    toolbar.addEventListener("click", (e) => {
+      const btn = e.target.closest("button[data-action]");
+      if (!btn) return;
+      e.preventDefault();
+      const action = btn.dataset.action;
+
+      if (action === "undo") {
+        editor.chain().focus().undo().run();
+      } else if (action === "redo") {
+        editor.chain().focus().redo().run();
+      } else if (action === "link") {
+        const previousUrl = editor.getAttributes("link").href || "";
+        const url = window.prompt("URL", previousUrl);
+        if (url === null) return;
+        if (url === "") {
+          editor.chain().focus().extendMarkRange("link").unsetLink().run();
+        } else {
+          editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+        }
+      } else {
+        const chainMethod = actionToChain[action];
+        if (chainMethod && typeof editor.chain().focus()[chainMethod] === "function") {
+          editor.chain().focus()[chainMethod]().run();
+        }
+      }
+      updateActiveStates();
+    });
+
+    editor.on("selectionUpdate", updateActiveStates);
+    editor.on("transaction", updateActiveStates);
+    updateActiveStates();
+
+    container.dataset.pbRteInitialized = "true";
+  } finally {
+    delete container.dataset.pbRtePending;
+  }
+}
+
+function mountAllPlaybookRichTextEditorRails() {
+  document.querySelectorAll("[data-pb-rte-tiptap]").forEach((el) => {
+    void initPlaybookRichTextEditorRails(el);
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", mountAllPlaybookRichTextEditorRails);
+} else {
+  mountAllPlaybookRichTextEditorRails();
+}
+
+document.addEventListener("turbo:load", mountAllPlaybookRichTextEditorRails);
+
+export { initPlaybookRichTextEditorRails, mountAllPlaybookRichTextEditorRails };

data/app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb

@@ -1,83 +1,85 @@
-<%= pb_rails("table", props: { sticky: true }) do %>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-      <th>Column 5</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-  </tbody>
-<% end %>
+<div style="max-height: 320px; overflow-y: auto;">
+  <%= pb_rails("table", props: { sticky: true }) do %>
+    <thead>
+      <tr>
+        <th>Column 1</th>
+        <th>Column 2</th>
+        <th>Column 3</th>
+        <th>Column 4</th>
+        <th>Column 5</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+      <tr>
+        <td>Value 1</td>
+        <td>Value 2</td>
+        <td>Value 3</td>
+        <td>Value 4</td>
+        <td>Value 5</td>
+      </tr>
+    </tbody>
+  <% end %>
+</div>