better_ui 0.9.0 → 0.9.1

data/spec/components/previews/better_ui/spinner_component_preview/all_sizes.html.erb

@@ -0,0 +1,17 @@
+<div class="p-8">
+  <h3 class="text-lg font-semibold mb-6">Spinner Sizes</h3>
+
+  <div class="space-y-6">
+    <% (@sizes || [:xs, :sm, :md, :lg, :xl]).each do |size| %>
+      <div class="flex items-center gap-4">
+        <span class="w-20 text-sm font-medium text-gray-600 uppercase"><%= size %></span>
+
+        <div class="flex flex-wrap gap-6 items-center">
+          <%= render BetterUi::SpinnerComponent.new(size: size, variant: :primary) %>
+          <%= render BetterUi::SpinnerComponent.new(size: size, variant: :success) %>
+          <%= render BetterUi::SpinnerComponent.new(size: size, variant: :danger) %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/spinner_component_preview/all_variants.html.erb

@@ -0,0 +1,11 @@
+<div class="p-8 space-y-8">
+  <h3 class="text-lg font-semibold mb-4">Spinner Variants</h3>
+  <div class="flex flex-wrap gap-8 items-center">
+    <% (@variants || BetterUi::ApplicationComponent::VARIANTS.keys).each do |variant| %>
+      <div class="flex flex-col items-center gap-2">
+        <%= render BetterUi::SpinnerComponent.new(variant: variant, size: :lg) %>
+        <span class="text-sm font-medium text-gray-600 capitalize"><%= variant %></span>
+      </div>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/spinner_component_preview.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module BetterUi
+  class SpinnerComponentPreview < ViewComponent::Preview
+    # @label Default
+    def default
+      render BetterUi::SpinnerComponent.new
+    end
+
+    # @label All Variants
+    # @display bg_color #f5f5f5
+    def all_variants
+      @variants = ApplicationComponent::VARIANTS.keys
+      render_with_template
+    end
+
+    # @label All Sizes
+    def all_sizes
+      @sizes = [ :xs, :sm, :md, :lg, :xl ]
+      render_with_template
+    end
+
+    # @label With Label
+    def with_label
+      render BetterUi::SpinnerComponent.new(
+        variant: :primary,
+        size: :lg,
+        label: "Loading content..."
+      )
+    end
+
+    # @label Playground
+    # @param variant select { choices: [primary, secondary, accent, success, danger, warning, info, light, dark] }
+    # @param size select { choices: [xs, sm, md, lg, xl] }
+    # @param label text
+    def playground(variant: :primary, size: :md, label: nil)
+      render BetterUi::SpinnerComponent.new(
+        variant: variant,
+        size: size,
+        label: label.presence
+      )
+    end
+  end
+end

data/spec/components/previews/better_ui/table/table_component_preview/all_sizes.html.erb

@@ -0,0 +1,28 @@
+<div class="max-w-4xl mx-auto p-6 space-y-8">
+  <h2 class="text-xl font-bold mb-4">All Sizes</h2>
+
+  <% [:xs, :sm, :md, :lg, :xl].each do |size| %>
+    <div>
+      <h3 class="text-lg font-semibold mb-2">Size: <%= size %></h3>
+      <%= render BetterUi::Table::TableComponent.new(variant: :primary, size: size) do |t| %>
+        <% t.with_header do |h| %>
+          <% h.with_cell(label: "Name") %>
+          <% h.with_cell(label: "Email") %>
+          <% h.with_cell(label: "Status", align: :center) %>
+        <% end %>
+
+        <% t.with_row do |r| %>
+          <% r.with_cell { "Alice Johnson" } %>
+          <% r.with_cell { "alice@example.com" } %>
+          <% r.with_cell(align: :center) { "Active" } %>
+        <% end %>
+
+        <% t.with_row do |r| %>
+          <% r.with_cell { "Bob Smith" } %>
+          <% r.with_cell { "bob@example.com" } %>
+          <% r.with_cell(align: :center) { "Inactive" } %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/table/table_component_preview/all_variants.html.erb

@@ -0,0 +1,34 @@
+<div class="max-w-4xl mx-auto p-6 space-y-8">
+  <h2 class="text-xl font-bold mb-4">All Variants</h2>
+
+  <% BetterUi::ApplicationComponent::VARIANTS.each_key do |variant| %>
+    <div>
+      <h3 class="text-lg font-semibold mb-2 capitalize"><%= variant %></h3>
+      <%= render BetterUi::Table::TableComponent.new(variant: variant, striped: true) do |t| %>
+        <% t.with_header do |h| %>
+          <% h.with_cell(label: "Name") %>
+          <% h.with_cell(label: "Email") %>
+          <% h.with_cell(label: "Role") %>
+        <% end %>
+
+        <% t.with_row do |r| %>
+          <% r.with_cell { "Alice Johnson" } %>
+          <% r.with_cell { "alice@example.com" } %>
+          <% r.with_cell { "Admin" } %>
+        <% end %>
+
+        <% t.with_row do |r| %>
+          <% r.with_cell { "Bob Smith" } %>
+          <% r.with_cell { "bob@example.com" } %>
+          <% r.with_cell { "Editor" } %>
+        <% end %>
+
+        <% t.with_row do |r| %>
+          <% r.with_cell { "Charlie Brown" } %>
+          <% r.with_cell { "charlie@example.com" } %>
+          <% r.with_cell { "Viewer" } %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/table/table_component_preview/bordered.html.erb

@@ -0,0 +1,33 @@
+<div class="max-w-4xl mx-auto p-6">
+  <h2 class="text-xl font-bold mb-4">Bordered Table</h2>
+
+  <%= render BetterUi::Table::TableComponent.new(variant: :primary, style: :bordered) do |t| %>
+    <% t.with_header do |h| %>
+      <% h.with_cell(label: "Product") %>
+      <% h.with_cell(label: "Category") %>
+      <% h.with_cell(label: "Price", align: :right) %>
+      <% h.with_cell(label: "Stock", align: :center) %>
+    <% end %>
+
+    <% t.with_row do |r| %>
+      <% r.with_cell { "Widget A" } %>
+      <% r.with_cell { "Electronics" } %>
+      <% r.with_cell(align: :right) { "$29.99" } %>
+      <% r.with_cell(align: :center) { "150" } %>
+    <% end %>
+
+    <% t.with_row do |r| %>
+      <% r.with_cell { "Widget B" } %>
+      <% r.with_cell { "Hardware" } %>
+      <% r.with_cell(align: :right) { "$49.99" } %>
+      <% r.with_cell(align: :center) { "75" } %>
+    <% end %>
+
+    <% t.with_row do |r| %>
+      <% r.with_cell { "Widget C" } %>
+      <% r.with_cell { "Software" } %>
+      <% r.with_cell(align: :right) { "$9.99" } %>
+      <% r.with_cell(align: :center) { "∞" } %>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/table/table_component_preview/collection_mode.html.erb

@@ -0,0 +1,31 @@
+<%
+  users = [
+    OpenStruct.new(name: "Alice Johnson", email: "alice@example.com", role: "admin", active: true),
+    OpenStruct.new(name: "Bob Smith", email: "bob@example.com", role: "editor", active: true),
+    OpenStruct.new(name: "Charlie Brown", email: "charlie@example.com", role: "viewer", active: false),
+    OpenStruct.new(name: "Diana Prince", email: "diana@example.com", role: "admin", active: true)
+  ]
+%>
+
+<div class="max-w-4xl mx-auto p-6 space-y-8">
+  <h2 class="text-xl font-bold mb-4">Collection Mode</h2>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-2">Basic Collection</h3>
+    <%= render BetterUi::Table::TableComponent.new(collection: users, variant: :primary, striped: true) do |t| %>
+      <% t.with_column(key: :name, label: "Name") %>
+      <% t.with_column(key: :email, label: "Email") %>
+      <% t.with_column(key: :role, label: "Role") { |user| user.role.capitalize } %>
+      <% t.with_column(key: :active, label: "Status", align: :center) { |user| user.active ? "Active" : "Inactive" } %>
+    <% end %>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-2">Collection with Auto-humanized Labels</h3>
+    <%= render BetterUi::Table::TableComponent.new(collection: users, variant: :success) do |t| %>
+      <% t.with_column(key: :name) %>
+      <% t.with_column(key: :email) %>
+      <% t.with_column(key: :role) %>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/table/table_component_preview/default.html.erb

@@ -0,0 +1,33 @@
+<div class="max-w-4xl mx-auto p-6">
+  <h2 class="text-xl font-bold mb-4">Default Table</h2>
+
+  <%= render BetterUi::Table::TableComponent.new(variant: :primary) do |t| %>
+    <% t.with_header do |h| %>
+      <% h.with_cell(label: "Name") %>
+      <% h.with_cell(label: "Email") %>
+      <% h.with_cell(label: "Role") %>
+      <% h.with_cell(label: "Status", align: :center) %>
+    <% end %>
+
+    <% t.with_row do |r| %>
+      <% r.with_cell { "Alice Johnson" } %>
+      <% r.with_cell { "alice@example.com" } %>
+      <% r.with_cell { "Admin" } %>
+      <% r.with_cell(align: :center) { "Active" } %>
+    <% end %>
+
+    <% t.with_row do |r| %>
+      <% r.with_cell { "Bob Smith" } %>
+      <% r.with_cell { "bob@example.com" } %>
+      <% r.with_cell { "Editor" } %>
+      <% r.with_cell(align: :center) { "Active" } %>
+    <% end %>
+
+    <% t.with_row do |r| %>
+      <% r.with_cell { "Charlie Brown" } %>
+      <% r.with_cell { "charlie@example.com" } %>
+      <% r.with_cell { "Viewer" } %>
+      <% r.with_cell(align: :center) { "Inactive" } %>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/table/table_component_preview/empty_state.html.erb

@@ -0,0 +1,36 @@
+<div class="max-w-4xl mx-auto p-6 space-y-8">
+  <h2 class="text-xl font-bold mb-4">Empty State</h2>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-2">Slot Mode - Empty</h3>
+    <%= render BetterUi::Table::TableComponent.new(variant: :primary) do |t| %>
+      <% t.with_header do |h| %>
+        <% h.with_cell(label: "Name") %>
+        <% h.with_cell(label: "Email") %>
+        <% h.with_cell(label: "Role") %>
+      <% end %>
+
+      <% t.with_empty_state do %>
+        <div class="py-8 text-center text-grayscale-500">
+          <p class="text-lg font-medium">No users found</p>
+          <p class="text-sm mt-1">Try adjusting your search criteria.</p>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+
+  <div>
+    <h3 class="text-lg font-semibold mb-2">Collection Mode - Empty</h3>
+    <%= render BetterUi::Table::TableComponent.new(collection: [], variant: :info) do |t| %>
+      <% t.with_column(key: :name, label: "Name") %>
+      <% t.with_column(key: :email, label: "Email") %>
+
+      <% t.with_empty_state do %>
+        <div class="py-8 text-center text-grayscale-500">
+          <p class="text-lg font-medium">No records available</p>
+          <p class="text-sm mt-1">Data will appear here once added.</p>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/table/table_component_preview/highlighted.html.erb

@@ -0,0 +1,64 @@
+<div class="max-w-4xl mx-auto p-6">
+  <h2 class="text-xl font-bold mb-4">Row Highlighting (Slot Mode)</h2>
+  <p class="text-sm text-grayscale-500 mb-4">Specific rows can be highlighted to draw attention.</p>
+
+  <%= render BetterUi::Table::TableComponent.new(variant: :primary) do |t| %>
+    <% t.with_header do |h| %>
+      <% h.with_cell(label: "Order #") %>
+      <% h.with_cell(label: "Customer") %>
+      <% h.with_cell(label: "Status") %>
+      <% h.with_cell(label: "Total", align: :right) %>
+    <% end %>
+
+    <% t.with_row do |r| %>
+      <% r.with_cell { "ORD-001" } %>
+      <% r.with_cell { "Alice Johnson" } %>
+      <% r.with_cell { "Shipped" } %>
+      <% r.with_cell(align: :right) { "$299.00" } %>
+    <% end %>
+
+    <% t.with_row(highlighted: true) do |r| %>
+      <% r.with_cell { "ORD-002" } %>
+      <% r.with_cell { "Bob Smith" } %>
+      <% r.with_cell { "Pending Review" } %>
+      <% r.with_cell(align: :right) { "$149.50" } %>
+    <% end %>
+
+    <% t.with_row do |r| %>
+      <% r.with_cell { "ORD-003" } %>
+      <% r.with_cell { "Charlie Brown" } %>
+      <% r.with_cell { "Delivered" } %>
+      <% r.with_cell(align: :right) { "$75.25" } %>
+    <% end %>
+
+    <% t.with_row(highlighted: true) do |r| %>
+      <% r.with_cell { "ORD-004" } %>
+      <% r.with_cell { "Diana Prince" } %>
+      <% r.with_cell { "Pending Review" } %>
+      <% r.with_cell(align: :right) { "$512.00" } %>
+    <% end %>
+  <% end %>
+
+  <h2 class="text-xl font-bold mb-4 mt-8">Row Highlighting (Collection Mode with Proc)</h2>
+  <p class="text-sm text-grayscale-500 mb-4">Highlighting applied dynamically based on item data.</p>
+
+  <%
+    orders = [
+      OpenStruct.new(number: "ORD-001", customer: "Alice Johnson", status: "Shipped", total: "$299.00", pending: false),
+      OpenStruct.new(number: "ORD-002", customer: "Bob Smith", status: "Pending Review", total: "$149.50", pending: true),
+      OpenStruct.new(number: "ORD-003", customer: "Charlie Brown", status: "Delivered", total: "$75.25", pending: false),
+      OpenStruct.new(number: "ORD-004", customer: "Diana Prince", status: "Pending Review", total: "$512.00", pending: true)
+    ]
+  %>
+
+  <%= render BetterUi::Table::TableComponent.new(
+    collection: orders,
+    variant: :warning,
+    row_highlighted: ->(item) { item.pending }
+  ) do |t| %>
+    <% t.with_column(key: :number, label: "Order #") %>
+    <% t.with_column(key: :customer, label: "Customer") %>
+    <% t.with_column(key: :status, label: "Status") %>
+    <% t.with_column(key: :total, label: "Total", align: :right) %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/table/table_component_preview/hoverable.html.erb

@@ -0,0 +1,27 @@
+<div class="max-w-4xl mx-auto p-6">
+  <h2 class="text-xl font-bold mb-4">Hoverable Table</h2>
+  <p class="text-sm text-grayscale-500 mb-4">Hover over the rows to see the highlight effect.</p>
+
+  <%= render BetterUi::Table::TableComponent.new(variant: :info, hoverable: true) do |t| %>
+    <% t.with_header do |h| %>
+      <% h.with_cell(label: "Order #") %>
+      <% h.with_cell(label: "Customer") %>
+      <% h.with_cell(label: "Date") %>
+      <% h.with_cell(label: "Total", align: :right) %>
+    <% end %>
+
+    <% [
+      ["ORD-001", "Alice Johnson", "2024-01-15", "$299.00"],
+      ["ORD-002", "Bob Smith", "2024-01-16", "$149.50"],
+      ["ORD-003", "Charlie Brown", "2024-01-17", "$75.25"],
+      ["ORD-004", "Diana Prince", "2024-01-18", "$512.00"]
+    ].each do |row_data| %>
+      <% t.with_row do |r| %>
+        <% r.with_cell { row_data[0] } %>
+        <% r.with_cell { row_data[1] } %>
+        <% r.with_cell { row_data[2] } %>
+        <% r.with_cell(align: :right) { row_data[3] } %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/table/table_component_preview/inside_card.html.erb

@@ -0,0 +1,173 @@
+<div class="max-w-4xl mx-auto p-6 space-y-10">
+
+  <%# ===== 1. Table inside a bordered Card ===== %>
+  <div>
+    <h2 class="text-xl font-bold mb-4">Table inside a Card (bordered)</h2>
+    <p class="text-sm text-grayscale-500 mb-4">
+      Use <code>body_padding: false</code> on the Card and
+      <code>container_classes: "shadow-none ring-0 rounded-none"</code> on the Table
+      to avoid double card styling.
+    </p>
+
+    <%= render BetterUi::CardComponent.new(
+      style: :bordered,
+      variant: :primary,
+      body_padding: false
+    ) do |card| %>
+      <% card.with_header { "Team Members" } %>
+      <% card.with_body do %>
+        <%= render BetterUi::Table::TableComponent.new(
+          variant: :primary,
+          container_classes: "shadow-none ring-0 rounded-none"
+        ) do |t| %>
+          <% t.with_header do |h| %>
+            <% h.with_cell(label: "Name") %>
+            <% h.with_cell(label: "Email") %>
+            <% h.with_cell(label: "Role") %>
+            <% h.with_cell(label: "Status", align: :center) %>
+          <% end %>
+
+          <% t.with_row do |r| %>
+            <% r.with_cell { "Alice Johnson" } %>
+            <% r.with_cell { "alice@example.com" } %>
+            <% r.with_cell { "Admin" } %>
+            <% r.with_cell(align: :center) { "Active" } %>
+          <% end %>
+          <% t.with_row do |r| %>
+            <% r.with_cell { "Bob Smith" } %>
+            <% r.with_cell { "bob@example.com" } %>
+            <% r.with_cell { "Editor" } %>
+            <% r.with_cell(align: :center) { "Active" } %>
+          <% end %>
+          <% t.with_row do |r| %>
+            <% r.with_cell { "Charlie Brown" } %>
+            <% r.with_cell { "charlie@example.com" } %>
+            <% r.with_cell { "Viewer" } %>
+            <% r.with_cell(align: :center) { "Inactive" } %>
+          <% end %>
+        <% end %>
+      <% end %>
+      <% card.with_footer do %>
+        <div class="flex justify-between items-center">
+          <span class="text-sm text-grayscale-500">3 members</span>
+          <button class="text-sm text-primary-600 font-medium hover:text-primary-800">Add member</button>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+
+  <%# ===== 2. Table inside an outline Card ===== %>
+  <div>
+    <h2 class="text-xl font-bold mb-4">Table inside a Card (outline, success variant)</h2>
+
+    <%= render BetterUi::CardComponent.new(
+      variant: :success,
+      style: :outline,
+      body_padding: false
+    ) do |card| %>
+      <% card.with_header do %>
+        <div class="flex justify-between items-center">
+          <span class="font-semibold">Recent Orders</span>
+          <span class="text-xs bg-success-100 text-success-700 px-2 py-1 rounded-full">Live</span>
+        </div>
+      <% end %>
+      <% card.with_body do %>
+        <%= render BetterUi::Table::TableComponent.new(
+          variant: :success,
+          striped: true,
+          hoverable: true,
+          container_classes: "shadow-none ring-0 rounded-none"
+        ) do |t| %>
+          <% t.with_header do |h| %>
+            <% h.with_cell(label: "Order #") %>
+            <% h.with_cell(label: "Customer") %>
+            <% h.with_cell(label: "Amount", align: :right) %>
+          <% end %>
+
+          <% t.with_row do |r| %>
+            <% r.with_cell { "#1001" } %>
+            <% r.with_cell { "Jane Cooper" } %>
+            <% r.with_cell(align: :right) { "$120.00" } %>
+          <% end %>
+          <% t.with_row do |r| %>
+            <% r.with_cell { "#1002" } %>
+            <% r.with_cell { "Wade Warren" } %>
+            <% r.with_cell(align: :right) { "$89.50" } %>
+          <% end %>
+          <% t.with_row do |r| %>
+            <% r.with_cell { "#1003" } %>
+            <% r.with_cell { "Esther Howard" } %>
+            <% r.with_cell(align: :right) { "$245.00" } %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+
+  <%# ===== 3. Collection mode inside a soft Card ===== %>
+  <div>
+    <h2 class="text-xl font-bold mb-4">Collection mode inside a Card (soft, info variant)</h2>
+
+    <%
+      products = [
+        { name: "Widget A", sku: "WA-001", price: "$29.99", stock: 142 },
+        { name: "Widget B", sku: "WB-002", price: "$49.99", stock: 38 },
+        { name: "Gadget C", sku: "GC-003", price: "$99.99", stock: 7 },
+      ]
+    %>
+
+    <%= render BetterUi::CardComponent.new(
+      variant: :info,
+      style: :soft,
+      body_padding: false
+    ) do |card| %>
+      <% card.with_header do %>
+        <span class="font-semibold">Product Inventory</span>
+      <% end %>
+      <% card.with_body do %>
+        <%= render BetterUi::Table::TableComponent.new(
+          collection: products,
+          variant: :info,
+          size: :sm,
+          hoverable: true,
+          container_classes: "shadow-none ring-0 rounded-none"
+        ) do |t| %>
+          <% t.with_column(key: :name, label: "Product") %>
+          <% t.with_column(key: :sku, label: "SKU") %>
+          <% t.with_column(key: :price, label: "Price", align: :right) %>
+          <% t.with_column(key: :stock, label: "Stock", align: :center) { |p| p[:stock].to_s } %>
+        <% end %>
+      <% end %>
+      <% card.with_footer do %>
+        <span class="text-sm text-grayscale-500">Showing 3 of 3 products</span>
+      <% end %>
+    <% end %>
+  </div>
+
+  <%# ===== 4. Standalone table for comparison ===== %>
+  <div>
+    <h2 class="text-xl font-bold mb-4">Standalone table (for comparison)</h2>
+    <p class="text-sm text-grayscale-500 mb-4">
+      The table renders with its own card styling by default.
+    </p>
+
+    <%= render BetterUi::Table::TableComponent.new(variant: :primary, hoverable: true) do |t| %>
+      <% t.with_header do |h| %>
+        <% h.with_cell(label: "Name") %>
+        <% h.with_cell(label: "Email") %>
+        <% h.with_cell(label: "Role") %>
+      <% end %>
+      <% t.with_row do |r| %>
+        <% r.with_cell { "Alice Johnson" } %>
+        <% r.with_cell { "alice@example.com" } %>
+        <% r.with_cell { "Admin" } %>
+      <% end %>
+      <% t.with_row do |r| %>
+        <% r.with_cell { "Bob Smith" } %>
+        <% r.with_cell { "bob@example.com" } %>
+        <% r.with_cell { "Editor" } %>
+      <% end %>
+    <% end %>
+  </div>
+
+</div>

data/spec/components/previews/better_ui/table/table_component_preview/sortable.html.erb

@@ -0,0 +1,44 @@
+<div class="max-w-4xl mx-auto p-6">
+  <h2 class="text-xl font-bold mb-4">Sortable Headers (Slot Mode)</h2>
+  <p class="text-sm text-grayscale-500 mb-4">Headers can indicate sort state with directional icons.</p>
+
+  <%= render BetterUi::Table::TableComponent.new(variant: :primary) do |t| %>
+    <% t.with_header do |h| %>
+      <% h.with_cell(label: "Name", sortable: true, sorted: true, sort_direction: :asc) %>
+      <% h.with_cell(label: "Email", sortable: true) %>
+      <% h.with_cell(label: "Role") %>
+      <% h.with_cell(label: "Joined", sortable: true, sorted: true, sort_direction: :desc) %>
+    <% end %>
+
+    <% [
+      ["Alice Johnson", "alice@example.com", "Admin", "2024-01-15"],
+      ["Bob Smith", "bob@example.com", "Editor", "2024-02-20"],
+      ["Charlie Brown", "charlie@example.com", "Viewer", "2024-03-10"]
+    ].each do |row_data| %>
+      <% t.with_row do |r| %>
+        <% r.with_cell { row_data[0] } %>
+        <% r.with_cell { row_data[1] } %>
+        <% r.with_cell { row_data[2] } %>
+        <% r.with_cell { row_data[3] } %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <h2 class="text-xl font-bold mb-4 mt-8">Sortable Headers (Collection Mode)</h2>
+  <p class="text-sm text-grayscale-500 mb-4">Sort indicators in collection mode columns.</p>
+
+  <%
+    users = [
+      OpenStruct.new(name: "Alice Johnson", email: "alice@example.com", role: "Admin", joined: "2024-01-15"),
+      OpenStruct.new(name: "Bob Smith", email: "bob@example.com", role: "Editor", joined: "2024-02-20"),
+      OpenStruct.new(name: "Charlie Brown", email: "charlie@example.com", role: "Viewer", joined: "2024-03-10")
+    ]
+  %>
+
+  <%= render BetterUi::Table::TableComponent.new(collection: users, variant: :info) do |t| %>
+    <% t.with_column(key: :name, label: "Name", sortable: true, sorted: true, sort_direction: :asc) %>
+    <% t.with_column(key: :email, label: "Email", sortable: true) %>
+    <% t.with_column(key: :role, label: "Role") %>
+    <% t.with_column(key: :joined, label: "Joined", sortable: true, sorted: true, sort_direction: :desc) %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/table/table_component_preview/striped.html.erb

@@ -0,0 +1,31 @@
+<div class="max-w-4xl mx-auto p-6">
+  <h2 class="text-xl font-bold mb-4">Striped Table</h2>
+
+  <%= render BetterUi::Table::TableComponent.new(variant: :primary, striped: true) do |t| %>
+    <% t.with_header do |h| %>
+      <% h.with_cell(label: "#") %>
+      <% h.with_cell(label: "Name") %>
+      <% h.with_cell(label: "Department") %>
+      <% h.with_cell(label: "Salary", align: :right) %>
+    <% end %>
+
+    <% [
+      ["1", "Alice Johnson", "Engineering", "$120,000"],
+      ["2", "Bob Smith", "Marketing", "$95,000"],
+      ["3", "Charlie Brown", "Design", "$105,000"],
+      ["4", "Diana Prince", "Engineering", "$130,000"],
+      ["5", "Eve Wilson", "Sales", "$88,000"],
+      ["6", "Frank Castle", "Operations", "$92,000"]
+    ].each do |row_data| %>
+      <% t.with_row do |r| %>
+        <% row_data.each_with_index do |cell, i| %>
+          <% if i == 3 %>
+            <% r.with_cell(align: :right) { cell } %>
+          <% else %>
+            <% r.with_cell { cell } %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/table/table_component_preview/with_footer.html.erb

@@ -0,0 +1,40 @@
+<div class="max-w-4xl mx-auto p-6">
+  <h2 class="text-xl font-bold mb-4">Table with Footer</h2>
+
+  <%= render BetterUi::Table::TableComponent.new(variant: :primary, caption: "Quarterly Sales Report") do |t| %>
+    <% t.with_header do |h| %>
+      <% h.with_cell(label: "Quarter") %>
+      <% h.with_cell(label: "Revenue", align: :right) %>
+      <% h.with_cell(label: "Expenses", align: :right) %>
+      <% h.with_cell(label: "Profit", align: :right) %>
+    <% end %>
+
+    <% t.with_row do |r| %>
+      <% r.with_cell { "Q1 2024" } %>
+      <% r.with_cell(align: :right) { "$150,000" } %>
+      <% r.with_cell(align: :right) { "$90,000" } %>
+      <% r.with_cell(align: :right) { "$60,000" } %>
+    <% end %>
+
+    <% t.with_row do |r| %>
+      <% r.with_cell { "Q2 2024" } %>
+      <% r.with_cell(align: :right) { "$175,000" } %>
+      <% r.with_cell(align: :right) { "$95,000" } %>
+      <% r.with_cell(align: :right) { "$80,000" } %>
+    <% end %>
+
+    <% t.with_row do |r| %>
+      <% r.with_cell { "Q3 2024" } %>
+      <% r.with_cell(align: :right) { "$200,000" } %>
+      <% r.with_cell(align: :right) { "$110,000" } %>
+      <% r.with_cell(align: :right) { "$90,000" } %>
+    <% end %>
+
+    <% t.with_footer_row do |r| %>
+      <% r.with_cell { "Total" } %>
+      <% r.with_cell(align: :right) { "$525,000" } %>
+      <% r.with_cell(align: :right) { "$295,000" } %>
+      <% r.with_cell(align: :right) { "$230,000" } %>
+    <% end %>
+  <% end %>
+</div>