Table

<%= rui_table(@users) do |table| %>
  <% table.column(:name) %>
  <% table.column(:email) %>
  <% table.column(:role) %>
<% end %>

<%= rui_table(@users, striped: true) do |table| %>
  <% table.column(:name) %>
  <% table.column(:email) %>
  <% table.column(:role) { |user| rui_badge(text: user.role, color: :primary) } %>
<% end %>

<%= rui_table(@users) do |table| %>
  <% table.column(:name) %>
  <% table.column(:balance, formatter: :currency) %>
  <% table.column(:created_at, formatter: :date) %>
<% end %>

<%= rui_table(@users, selectable: true, sortable: true) do |table| %>
  <% table.column(:name, sortable: true) %>
  <% table.column(:email) %>
  <% table.column(:balance, formatter: :currency, sortable: true) %>
<% end %>

<%= rui_table do |table| %>
  <% table.with_column(key: :name, label: "Name") %>
  <% table.with_column(key: :email, label: "Email") %>
  <% table.with_column(key: :role, label: "Role") %>

  <% table.with_row(id: 1) do |row| %>
    <% row.with_cell { "John Doe" } %>
    <% row.with_cell { "john@example.com" } %>
    <% row.with_cell { "Admin" } %>
  <% end %>

  <% table.with_row(id: 2) do |row| %>
    <% row.with_cell { "Jane Smith" } %>
    <% row.with_cell { "jane@example.com" } %>
    <% row.with_cell { "Editor" } %>
  <% end %>
<% end %>

<%= rui_table(@users,
  title: "Team Members",
  description: "A list of all team members including their name, title, and email.",
  bordered: true,
  shape: :rounded
) do |table| %>
  <% table.column(:name) %>
  <% table.column(:title) %>
  <% table.column(:email) %>
<% end %>

# Title only
<%= rui_table(@users, title: "Recent Orders") do |table| %>
  <% table.column(:name) %>
<% end %>

# Description only
<%= rui_table(@users, description: "Showing orders from the last 30 days") do |table| %>
  <% table.column(:name) %>
<% end %>

# Collection mode — table.column(:key, ...)
<%= rui_table(@products) do |table| %>
  <% table.column(:id, label: "ID", width: "60px", align: :center) %>
  <% table.column(:product) %>
  <% table.column(:price, align: :right, width: "100px", formatter: :currency) %>
  <% table.column(:stock, label: "In Stock", align: :center) %>
<% end %>

# Slot mode — table.with_column(key:, label:, ...)
<% table.with_column(key: :id, label: "ID", width: "60px", align: :center) %>
<% table.with_column(key: :product, label: "Product") %>
<% table.with_column(key: :price, label: "Price", align: :right, width: "100px") %>
<% table.with_column(key: :stock, label: "In Stock", align: :center) %>

# Column options (same for both modes):
# - key: Symbol - Column identifier (used for sorting and data extraction)
# - label: String - Header text (auto-generated from key if not provided)
# - sortable: Boolean - Enable sorting on this column
# - align: Symbol - :left, :center, :right
# - width: String - CSS width value (e.g., "100px", "20%")
# - formatter: Symbol/Hash - Auto-format values (:currency, :date, :boolean, etc.)

# Collection mode — use row_color: for conditional colors
<%= rui_table(@orders,
  row_color: ->(order) {
    case order.status
    when "completed" then :success
    when "pending"   then :warning
    when "cancelled" then :danger
    end
  }
) do |table| %>
  <% table.column(:status) { |o| rui_badge(o.status, color: :zinc) } %>
  <% table.column(:order) %>
  <% table.column(:customer) %>
  <% table.column(:total, formatter: :currency) %>
<% end %>

# Slot mode — use color: per row
<% table.with_row(id: 1, color: :success) do |row| %>
  <% row.with_cell { rui_badge("Completed", color: :success) } %>
  <% row.with_cell { "#ORD-001" } %>
<% end %>

<% table.with_row(id: 2, color: :warning) do |row| %>
  <% row.with_cell { rui_badge("Pending", color: :warning) } %>
  <% row.with_cell { "#ORD-002" } %>
<% end %>

# Row color options: :success, :warning, :danger

# Collection mode — formatters work the same way
<%= rui_table(@plans) do |table| %>
  <% table.column(:name) %>
  <% table.column(:price, formatter: :currency) %>
  <% table.column(:created_at, formatter: :date) %>
  <% table.column(:active, formatter: :boolean) %>
  <% table.column(:discount, formatter: { type: :percentage, precision: 1 }) %>
  <% table.column(:description, formatter: { type: :truncate, length: 50 }) %>
<% end %>

# Formatter with options (hash)
<% table.column(:status, formatter: { type: :boolean, true_text: "Active", false_text: "Inactive" }) %>

# Badge formatter with color mapping
<% table.column(:status, formatter: {
  type: :badge,
  colors: { active: :success, pending: :warning, cancelled: :danger }
}) %>

# Custom formatter with Proc
<% table.column(:email, formatter: ->(value) { mail_to(value, value, class: "text-blue-600") }) %>

# Collection mode (recommended) — no manual iteration needed
<%= rui_table(@users) do |table| %>
  <% table.column(:name) %>
  <% table.column(:email) %>
  <% table.column(:balance, formatter: :currency) %>
  <% table.column(:verified, formatter: :boolean) %>
  <% table.column(:created_at, label: "Joined", formatter: :relative_time) %>
<% end %>

# Slot mode — manual iteration with data:
<%= rui_table do |table| %>
  <% table.with_column(key: :name, label: "Name") %>
  <% table.with_column(key: :balance, label: "Balance", formatter: :currency) %>

  <% @users.each do |user| %>
    <% table.with_row(id: user.id, data: user) %>
  <% end %>
<% end %>

# Both modes work with: ActiveRecord models, Structs, OpenStructs, Hashes

# Collection mode — toolbar + column definitions
<%= rui_table(@users) do |table| %>
  <% table.with_toolbar do %>
    <div class="w-full flex items-center justify-between gap-4">
      <div class="flex-1 max-w-sm">
        <%= rui_input(name: :search, placeholder: "Search...", size: :sm, validation: false) do |input| %>
          <% input.with_prefix do %>
            <%= rui_icon(:search, size: :sm, standalone: false) %>
          <% end %>
        <% end %>
      </div>
      <div class="flex items-center gap-2">
        <%= rui_button("Export", variant: :outline, size: :sm) do |btn| %>
          <% btn.with_icon(:file_up) %>
        <% end %>
        <%= rui_button("Add User", color: :primary, size: :sm) do |btn| %>
          <% btn.with_icon(:plus) %>
        <% end %>
      </div>
    </div>
  <% end %>

  <% table.column(:name) %>
  <% table.column(:email) %>
  <% table.column(:role) { |u| rui_badge(u.role, color: :primary, size: :sm) } %>
<% end %>

# Toolbar slot works identically in both collection and slot modes

# Collection mode with toolbar + Turbo search
<%= rui_table(@users, turbo_frame: "users-table") do |table| %>
  <% table.with_toolbar do %>
    <%= form_with url: users_path, method: :get,
      data: { turbo_frame: "users-table" } do |f| %>
      <div class="flex items-center gap-3">
        <%= f.text_field :q, value: params[:q],
          placeholder: "Search...",
          data: { action: "input->debounce#perform" } %>
        <%= f.select :status, options_for_select(
          [["All", ""], ["Active", "active"]], params[:status]) %>
      </div>
    <% end %>
  <% end %>

  <% table.column(:name) %>
  <% table.column(:email) %>
  <% table.column(:status) { |u| rui_badge(u.status, color: :success) } %>
<% end %>

# In your controller:
def index
  @users = User.all
  @users = @users.where("name ILIKE ?", "%#{params[:q]}%") if params[:q].present?
  @users = @users.where(status: params[:status]) if params[:status].present?
end

# Collection mode — sortable columns
<%= rui_table(@users, sortable: true, sort_column: "name", sort_direction: "asc") do |table| %>
  <% table.column(:name, sortable: true) %>
  <% table.column(:email, sortable: true) %>
  <% table.column(:created_at, sortable: true, formatter: :date) %>
<% end %>

# Server-side sorting — provide sort_url
<%= rui_table(@users,
  sortable: true,
  sort_column: params[:sort],
  sort_direction: params[:dir],
  sort_url: users_path
) do |table| %>
  <% table.column(:name, sortable: true) %>
  <% table.column(:email, sortable: true) %>
<% end %>

# Collection mode — row IDs extracted automatically via record.id
<%= rui_table(@users, selectable: true) do |table| %>
  <% table.column(:name) %>
  <% table.column(:email) %>
  <% table.column(:status) { |u| rui_badge(u.status, color: :success, size: :sm) } %>
<% end %>

# Custom ID method (e.g., for UUIDs)
<%= rui_table(@users, selectable: true, id_method: :uuid) do |table| %>
  ...
<% end %>

# JavaScript API - get selected row IDs:
# tableController.getSelectedIds() => [1, 3, 5]

# Collection mode — bulk_actions slot works the same way
<%= rui_table(@users, selectable: true) do |table| %>
  <% table.with_bulk_actions do %>
    <%= rui_button("Delete Selected", color: :danger, size: :sm) %>
    <%= rui_button("Export", color: :zinc, size: :sm) %>
  <% end %>

  <% table.column(:name) %>
  <% table.column(:email) %>
<% end %>

# The bulk actions bar shows "X selected" count
# and is hidden when no rows are selected

<%= rui_table(@posts, selectable: true) do |table| %>
  <% table.with_bulk_actions do %>
    <%= rui_bulk_action "Delete Selected",
          url: bulk_destroy_posts_path,
          method: :delete,
          confirm: "Delete selected posts?",
          color: :danger,
          size: :sm %>
    <%= rui_bulk_action "Export",
          url: export_posts_path,
          method: :post,
          color: :zinc,
          size: :sm %>
  <% end %>

  <% table.column(:title) %>
  <% table.column(:status) { |p| rui_badge(p.status, color: :success) } %>
<% end %>

# app/controllers/posts_controller.rb
def bulk_destroy
  ids = JSON.parse(params[:ids])
  Post.where(id: ids).destroy_all
  redirect_to posts_path, notice: "#{ids.size} posts deleted"
end

def export
  ids = JSON.parse(params[:ids])
  @posts = Post.where(id: ids)
  respond_to do |format|
    format.csv { send_data @posts.to_csv }
  end
end

# config/routes.rb
resources :posts do
  collection do
    delete :bulk_destroy
    post :export
  end
end

# All variants work with collection mode
<%= rui_table(@users, striped: true) do |table| %>
  <% table.column(:name) %>
  <% table.column(:email) %>
<% end %>

<%= rui_table(@users, bordered: true) do |table| %>
  ...
<% end %>

<%= rui_table(@users, sticky_header: true, sticky_max_height: "16rem") do |table| %>
  ...
<% end %>

<%= rui_table(@users, hoverable: false) do |table| %>
  ...
<% end %>

# Rounded corners (best with bordered) — works with collection mode
<%= rui_table(@users, shape: :rounded, bordered: true) do |table| %>
  <% table.column(:name) %>
  <% table.column(:email) %>
<% end %>

# Square corners (default)
<%= rui_table(@users, shape: :square) do |table| %>
  ...
<% end %>

# Striped columns — works with both collection and slot modes
<%= rui_table(@quarterly_data, striped_columns: true) do |table| %>
  <% table.column(:q1, label: "Q1 2024") %>
  <% table.column(:q2, label: "Q2 2024") %>
  <% table.column(:q3, label: "Q3 2024") %>
  <% table.column(:q4, label: "Q4 2024") %>
<% end %>

# Combined: striped rows + striped columns
<%= rui_table(@data, striped: true, striped_columns: true) do |table| %>
  ...
<% end %>

# All sizes work with collection mode
<%= rui_table(@users, size: :xs) do |table| %>
  <% table.column(:name) %>
<% end %>

<%= rui_table(@users, size: :sm) do |table| %> # Small
<%= rui_table(@users, size: :base) do |table| %> # Base (default)
<%= rui_table(@users, size: :lg) do |table| %> # Large
<%= rui_table(@users, size: :xl) do |table| %> # Extra large

# All responsive modes work with collection mode
<%= rui_table(@users, responsive_mode: :scroll) do |table| %>
  <% table.column(:name) %>
  <% table.column(:email) %>
  <% table.column(:role) %>
<% end %>

# Cards mode - each row becomes a card on mobile
<%= rui_table(@users, responsive_mode: :cards) do |table| %>
  <% table.column(:name) %>
  <% table.column(:email) %>
<% end %>

# Stack mode - cells stack vertically on mobile
<%= rui_table(@users, responsive_mode: :stack) do |table| %>
  ...
<% end %>

# Disable responsive behavior
<%= rui_table(@users, responsive: false) do |table| %>
  ...
<% end %>

# In your controller (rui_paginate is built-in, no gems needed):
def index
  @pagy, @posts = rui_paginate(Post.all, limit: 5)
end

# Collection mode (recommended):
<%= rui_table(@posts,
  pagy: @pagy,
  title: "Blog Posts",
  description: "Page <%%= @pagy.page %> of <%= @pagy.last %>"
) do |table| %>
  <% table.column(:title) %>
  <% table.column(:category) { |p| rui_badge(p.category, color: :zinc) } %>
  <% table.column(:status) { |p| rui_badge(p.status, color: :success) } %>
<% end %>

# Add pagination below the table
<%= rui_pagination(pagy: @pagy) %>

# The table footer automatically shows "Showing 1-5 of 26"

# Collection mode — empty collection triggers empty state
<%= rui_table([], empty_message: "No users found") do |table| %>
  <% table.column(:name) %>
  <% table.column(:email) %>
<% end %>

# Custom empty state slot (works with both modes)
<%= rui_table(@users) do |table| %>
  <% table.column(:name) %>
  <% table.column(:email) %>

  <% table.with_empty_state do %>
    <div class="text-center py-8">
      <%= rui_icon(:inbox, size: :xl3) %>
      <h3 class="mt-4 font-medium">No users yet</h3>
      <%= rui_button("Add User", color: :primary) %>
    </div>
  <% end %>
<% end %>

# Loading works with both modes — columns define skeleton widths
<%= rui_table(loading: true) do |table| %>
  <% table.column(:name) %>
  <% table.column(:email) %>
<% end %>

# Customize number of skeleton rows
<%= rui_table(loading: true, loading_rows: 10) do |table| %>
  <% table.column(:name) %>
  <% table.column(:email) %>
  <% table.column(:role) %>
<% end %>

# Collection mode with footer
<%= rui_table(@line_items) do |table| %>
  <% table.column(:product) %>
  <% table.column(:qty, align: :center) %>
  <% table.column(:price, formatter: :currency, align: :right) %>

  <% table.with_footer do %>
    <tr>
      <td colspan="2" class="px-4 py-3 text-right font-semibold">Total:</td>
      <td class="px-4 py-3 text-right font-bold">$109.97</td>
    </tr>
  <% end %>
<% end %>

# Footer slot works identically in both collection and slot modes

# Collection mode with turbo_frame
<%= rui_table(@users, turbo_frame: "users_table") do |table| %>
  <% table.column(:name) %>
  <% table.column(:email) %>
  <% table.column(:role) { |u| rui_badge(u.role, color: :primary) } %>
<% end %>

# Manual Turbo Frame wrapper (more control)
<turbo-frame id="users_table">
  <%= rui_table(@users) do |table| %>
    <% table.column(:name) %>
    <% table.column(:email) %>
  <% end %>

  <%= link_to "Next", users_path(page: 2),
    data: { turbo_frame: "users_table" } %>
</turbo-frame>

# In controller action
def create
  @user = User.create!(user_params)

  respond_to do |format|
    format.turbo_stream do
      render turbo_stream: turbo_stream.prepend(
        "users_table_body",
        partial: "users/row",
        locals: { user: @user }
      )
    end
  end
end

# In view - add target to tbody
      <%= rui_table do |table| %>
  ...
  <!-- Add id to tbody for streaming -->
  <tbody id="users_table_body">
    ...
  </tbody>
      <% end %>

# Collection mode with wide table — scrolls horizontally
<%= rui_table(@employees, responsive_mode: :scroll, bordered: true, shape: :rounded) do |table| %>
  <% table.column(:id, label: "ID", width: "60px") %>
  <% table.column(:name, label: "Full Name", width: "180px") %>
  <% table.column(:email, label: "Email Address", width: "220px") %>
  <% table.column(:department, width: "150px") %>
  <% table.column(:role, label: "Job Title", width: "180px") %>
  <% table.column(:location, label: "Office Location", width: "150px") %>
  <% table.column(:hire_date, formatter: :date, width: "120px") %>
  <% table.column(:status, width: "100px") { |e| rui_badge(e.status, color: :success) } %>
  <% table.column(:salary, formatter: :currency, align: :right, width: "130px") %>
<% end %>

<%# Filter Bar %>
<div class="flex flex-col sm:flex-row gap-3 mb-4">
  <div class="flex-1">
    <%= rui_input(placeholder: "Search users...", prefix_icon: :search, size: :sm) %>
  </div>
  <div class="flex gap-2">
    <%= rui_dropdown(text: "Status", size: :sm, variant: :outline, chevron: true) do |d| %>
      <% d.with_item(text: "All Statuses") %>
      <% d.with_item(text: "Active") %>
      <% d.with_item(text: "Pending") %>
    <% end %>
  </div>
</div>

<%# Results Table — collection mode with Turbo Frame %>
<%= turbo_frame_tag "users_table" do %>
  <%= rui_table(@users, striped: true, hoverable: true) do |table| %>
    <% table.column(:name) %>
    <% table.column(:email) %>
    <% table.column(:role) %>
    <% table.column(:status) { |u| rui_badge(u.status, color: :success) } %>
  <% end %>
<% end %>

<%= rui_dialog(
  trigger: rui_button("View", size: :sm, variant: :outline),
  title: "Product Details",
  description: "Wireless Headphones Pro"
) do %>
  <div class="grid grid-cols-2 gap-4">
    <div>
      <span class="text-zinc-500">Price</span>
      <p class="font-semibold">$199.99</p>
    </div>
    <div>
      <span class="text-zinc-500">Stock</span>
      <%= rui_badge("In Stock", color: :success, size: :sm) %>
    </div>
  </div>
      <% end %>

<%= rui_dialog(
  trigger: rui_button("Edit", size: :sm, variant: :ghost, color: :sky),
  title: "Edit User",
  description: "Update user information"
) do %>
  <div class="space-y-4">
    <%= rui_input(method: :name, label: "Name", value: user.name, size: :sm) %>
    <%= rui_input(method: :email, type: :email, label: "Email", size: :sm) %>
    <%= rui_select(method: :role, label: "Role", collection: roles, size: :sm) %>
    <div class="flex justify-end gap-2 pt-4">
      <%= rui_button("Cancel", variant: :outline, size: :sm, data: { action: "click->dialog#close" }) %>
      <%= rui_button("Save", color: :primary, size: :sm, data: { action: "dialog#submit" }) %>
    </div>
  </div>
      <% end %>

<%= rui_dialog(
  trigger: rui_button("Delete", size: :xs, variant: :ghost, color: :danger),
  title: "Delete Project",
  description: "Are you sure you want to delete this project?"
) do %>
  <div class="space-y-4">
    <%= rui_alert(
      type: :danger,
      title: "This action cannot be undone",
      message: "All project data will be permanently deleted."
    ) %>
    <div class="flex justify-end gap-2">
      <%= rui_button("Cancel", variant: :outline, size: :sm, data: { action: "click->dialog#close" }) %>
      <%= rui_button("Delete", color: :danger, size: :sm) %>
    </div>
  </div>
      <% end %>

<% row.with_cell(align: :right) do %>
      <%= rui_dropdown(icon: :more_vertical, size: :sm, variant: :ghost, width: :auto) do |d| %>
    <% d.with_item(text: "View Order", icon: :eye) %>
    <% d.with_item(text: "Edit Order", icon: :edit) %>
    <% d.with_item(text: "Download Invoice", icon: :download) %>
    <% d.with_divider %>
    <% d.with_item(text: "Refund", icon: :rotate_ccw, color: :warning) %>
    <% d.with_item(text: "Cancel Order", icon: :x, color: :danger) %>
      <% end %>
      <% end %>

# Dropdown triggers:
# - icon: :more_vertical (three dots) - most common
# - icon: :more_horizontal (three dots horizontal)
# - icon: :chevron_down (with text)
# - text: "Actions" (text-only)

<% row.with_cell do %>
      <%= rui_combobox(
    collection: [
      ["Alice Johnson", "alice"],
      ["Bob Smith", "bob"],
      ["Carol Davis", "carol"]
    ],
    selected: "alice",
    placeholder: "Assign...",
    size: :sm,
    searchable: true
  ) %>
      <% end %>

# Collection format: ["Label", "value"]
# Optional third element: icon symbol like :user
# Use size: :sm for compact inline display

<% row.with_cell do %>
      <%= rui_date(
    value: project.due_date,
    size: :sm,
    min: Date.today  # Optional: prevent past dates
  ) %>
      <% end %>

# The date component automatically formats dates
# and opens a calendar/date picker on click
# Use size: :sm for compact inline display

# Headless works with both collection and slot modes
# Slot mode is typical here since headless tables often have custom cell layouts

<%= rui_table(headless: true, bordered: true, shape: :rounded) do |table| %>
  <% table.with_row(id: 1) do |row| %>
    <% row.with_cell do %>
      <div class="flex items-center gap-3">
        <%= rui_icon(:calendar, size: :sm, color: :primary) %>
        <span class="font-medium">Meeting with Design Team</span>
      </div>
    <% end %>
    <% row.with_cell { "Today, 2:00 PM" } %>
    <% row.with_cell(align: :right) { rui_badge("Upcoming", color: :info) } %>
  <% end %>
<% end %>

# When headless: true, column definitions are optional
# but can still be used for mobile responsive views

# Custom classes work with collection mode
<%= rui_table(@users,
  class: "shadow-lg ring-1 ring-zinc-900/5",
  bordered: true,
  shape: :rounded
) do |table| %>
  <% table.column(:name) %>
  <% table.column(:status) { |u| rui_badge(u.status, color: :success) } %>
<% end %>

# Custom data attributes
<%= rui_table(@users,
  id: "my-table",
  data: { controller: "my-custom-table" }
) do |table| %>
  <% table.column(:name) %>
<% end %>

# Collection mode — all ARIA attributes are automatic
<%= rui_table(@users,
  sortable: true,
  selectable: true,
  sort_column: "name",
  sort_direction: "asc"
) do |table| %>
  <% table.with_caption { "List of team members with names, roles, and contact information" } %>

  <% table.column(:name, sortable: true) %>
  <% table.column(:role) %>
  <% table.column(:email) %>
<% end %>

# Generated HTML includes:
# <table role="grid" aria-describedby="table-123-caption">
#   <div id="table-123-caption" class="sr-only">...</div>
#   <thead>
#     <tr>
#       <th scope="col">
#         <input type="checkbox" aria-label="Select all rows">
#       </th>
#       <th scope="col" aria-sort="ascending">
#         <button>Name <svg>...</svg></button>
#       </th>
#     </tr>
#   </thead>
# </table>

# Get selected row IDs in a Stimulus controller
export default class extends Controller {
  static outlets = ["table"]

  deleteSelected() {
    const ids = this.tableOutlet.getSelectedIds()
    // ids = [1, 3, 5]
    fetch("/users/bulk_delete", {
      method: "DELETE",
      body: JSON.stringify({ ids })
    })
  }
}

# Or use data-action directly:
<button data-action="my-controller#deleteSelected">
  Delete Selected
</button>