Table

<%= 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(
  title: "Team Members",
  description: "A list of all team members including their name, title, and email.",
  bordered: true,
  shape: :rounded
  ) do |table| %>
    <% table.with_column(key: :name, label: "Name") %>
    <% table.with_column(key: :title, label: "Title") %>
    <% table.with_column(key: :email, label: "Email") %>
    ...
  <% end %>

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

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

<% 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:
# - key: Symbol - Column identifier (used for sorting)
# - 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%")

# Highlight rows with semantic colors
<% 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 %>

<% table.with_row(id: 3, color: :danger) do |row| %>
<% row.with_cell { rui_badge("Cancelled", color: :danger) } %>
<% row.with_cell { "#ORD-003" } %>
<% end %>

# Row options:
# - id: Any - Row identifier (required for selection)
# - data: Hash/Object - Attach data to row
# - color: Symbol - Row highlight color

# Simple formatter (symbol)
<% table.with_column(key: :price, label: "Price", formatter: :currency) %>
<% table.with_column(key: :created_at, label: "Created", formatter: :date) %>
<% table.with_column(key: :active, label: "Active", formatter: :boolean) %>

  # Formatter with options (hash)
<% table.with_column(
  key: :discount,
  label: "Discount",
  formatter: { type: :percentage, precision: 1 }
) %>

<% table.with_column(
  key: :status,
  label: "Status",
  formatter: { type: :boolean, true_text: "Active", false_text: "Inactive" }
) %>

<% table.with_column(
  key: :description,
  label: "Description",
  formatter: { type: :truncate, length: 50 }
) %>

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

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

# Define columns with keys that match your data object
      <%= rui_table do |table| %>
      <% table.with_column(key: :name, label: "Name") %>
      <% table.with_column(key: :email, label: "Email") %>
      <% table.with_column(key: :balance, label: "Balance", formatter: :currency) %>
      <% table.with_column(key: :verified, label: "Verified", formatter: :boolean) %>
      <% table.with_column(key: :created_at, label: "Joined", formatter: :relative_time) %>

      <%# Cells are auto-generated from data object %>
      <% @users.each do |user| %>
    <% table.with_row(id: user.id, data: user) %>
      <% end %>
      <% end %>

# Works with:
# - ActiveRecord models
# - Struct objects
# - Plain Ruby objects with methods
# - Hashes (with symbol or string keys)

<%= rui_table do |table| %>
    <%# Toolbar slot - renders above the 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(:magnifying_glass, 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(:arrow_down_tray) %>
      <% end %>
      <%= rui_button("Add User", color: :primary, size: :sm) do |btn| %>
        <% btn.with_icon(:plus) %>
      <% end %>
    </div>
  </div>
    <% end %>

    <% table.with_column(key: :name, label: "Name") %>
...
    <% end %>

# In your view:
      <%= rui_table(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...",
            class: "your-input-classes",
            data: { action: "input->debounce#perform" } %>
        <%= f.select :status, options_for_select([["All", ""], ["Active", "active"]], params[:status]) %>
        <%= f.submit "Search" %>
      </div>
    <% end %>
      <% end %>

  <!-- columns and rows... -->
      <% 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

# Enable sorting with current state
      <%= rui_table(
  sortable: true,
  sort_column: "name",
  sort_direction: "asc"
) do |table| %>
      <% table.with_column(key: :name, label: "Name", sortable: true) %>
      <% table.with_column(key: :email, label: "Email", sortable: true) %>
      <% table.with_column(key: :created_at, label: "Created", sortable: true) %>
      <% end %>

# For server-side sorting, provide a sort_url:
      <%= rui_table(
  sortable: true,
  sort_column: params[:sort],
  sort_direction: params[:dir],
  sort_url: users_path
) do |table| %>
  ...
      <% end %>

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

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

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

<%= rui_table(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.with_column(key: :name, label: "Name") %>
  ...
      <% end %>

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

<%= rui_table(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 %>
...
    <% 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

# Striped rows (alternating backgrounds)
      <%= rui_table(striped: true) do |table| %>
  ...
      <% end %>

# Bordered cells
      <%= rui_table(bordered: true) do |table| %>
  ...
      <% end %>

# Sticky header with custom max height (default: 24rem)
      <%= rui_table(sticky_header: true, sticky_max_height: "16rem") do |table| %>
  ...
      <% end %>

# Disable hover effect (enabled by default)
      <%= rui_table(hoverable: false) do |table| %>
  ...
      <% end %>

# Rounded corners (best with bordered)
      <%= rui_table(shape: :rounded, bordered: true) do |table| %>
  ...
      <% end %>

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

# Striped columns only
      <%= rui_table(striped_columns: true) do |table| %>
  ...
      <% end %>

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

# Extra small
      <%= rui_table(size: :xs) do |table| %>

# Small
      <%= rui_table(size: :sm) do |table| %>

# Base (default)
      <%= rui_table(size: :base) do |table| %>

# Large
      <%= rui_table(size: :lg) do |table| %>

# Extra large
      <%= rui_table(size: :xl) do |table| %>

# Scroll mode (default) - horizontal scroll on mobile
      <%= rui_table(responsive_mode: :scroll) do |table| %>
  ...
      <% end %>

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

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

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

# In your controller:
def index
  @pagy, @posts = pagy(Post.all, limit: 5)
end

# In your view:
      <%= rui_table(
  pagy: @pagy,
  title: "Blog Posts",
  description: "Page #{@pagy.page} of #{@pagy.last}"
) do |table| %>
      <% table.with_column(key: :title, label: "Title") %>
      <% table.with_column(key: :category, label: "Category") %>
      <% table.with_column(key: :status, label: "Status") %>

      <% @posts.each do |post| %>
    <% table.with_row(id: post.id) do |row| %>
      <% row.with_cell { post.title } %>
      <% row.with_cell { post.category } %>
      <% row.with_cell { rui_badge(post.status, color: :success) } %>
    <% end %>
      <% end %>
      <% end %>

# Add Pagy navigation below the table
      <%== pagy_nav(@pagy) %>

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

# Custom message
      <%= rui_table(empty_message: "No users found") do |table| %>
  ...
      <% end %>

# Custom empty state slot
      <%= rui_table do |table| %>
      <% 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 %>

# Show 5 skeleton rows (default)
      <%= rui_table(loading: true) do |table| %>
      <% table.with_column(key: :name, label: "Name") %>
      <% table.with_column(key: :email, label: "Email") %>
      <% end %>

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

<%= rui_table do |table| %>
    <% table.with_column(key: :product, label: "Product") %>
    <% table.with_column(key: :qty, label: "Qty") %>
    <% table.with_column(key: :price, label: "Price") %>

<!-- rows... -->

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

# Option 1: Built-in turbo_frame param
      <%= rui_table(turbo_frame: "users_table") do |table| %>
      <% table.with_column(key: :name, label: "Name") %>
  ...
      <% end %>

# Option 2: Manual Turbo Frame wrapper (more control)
<turbo-frame id="users_table">
      <%= rui_table do |table| %>
    ...
      <% end %>

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

# Sorting with Turbo
      <%= link_to "Sort by Name", users_path(sort: :name, dir: :asc),
    data: { turbo_frame: "users_table" } %>

# 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 %>

# Wide table with horizontal scroll (default behavior)
      <%= rui_table(responsive_mode: :scroll, bordered: true, shape: :rounded) do |table| %>
      <% table.with_column(key: :id, label: "ID", width: "60px") %>
      <% table.with_column(key: :name, label: "Full Name", width: "180px") %>
      <% table.with_column(key: :email, label: "Email Address", width: "220px") %>
      <% table.with_column(key: :department, label: "Department", width: "150px") %>
      <% table.with_column(key: :role, label: "Job Title", width: "180px") %>
      <% table.with_column(key: :location, label: "Office Location", width: "150px") %>
      <% table.with_column(key: :hire_date, label: "Hire Date", width: "120px") %>
      <% table.with_column(key: :status, label: "Status", width: "100px") %>
  ...
      <% end %>

# responsive_mode options:
# - :scroll (default) - Horizontal scroll when table is too wide
# - :cards - Transform to card layout on mobile
# - :stack - Transform to stacked layout on mobile

<%# 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, validation: false) %>
  </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 %>
    <%= rui_dropdown(text: "Role", size: :sm, variant: :outline, chevron: true) do |d| %>
      <% d.with_item(text: "All Roles") %>
      <% d.with_item(text: "Admin") %>
      <% d.with_item(text: "Editor") %>
    <% end %>
  </div>
</div>

      <%# Results Table - wrap in Turbo Frame for live filtering %>
      <%= turbo_frame_tag "users_table" do %>
      <%= rui_table(striped: true, hoverable: true) do |table| %>
    ...
      <% 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

# Table without header row
      <%= 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 %>

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

<%# Add shadow and ring to the wrapper %>
      <%= rui_table(
  class: "shadow-lg ring-1 ring-zinc-900/5",
  bordered: true,
  shape: :rounded
) do |table| %>
  ...
      <% end %>

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

<%= rui_table(
  sortable: true,
  selectable: true,
  sort_column: "name",
  sort_direction: "asc"
) do |table| %>
  <!-- Screen-reader only caption -->
      <% table.with_caption { "List of team members with names, roles, and contact information" } %>

      <% table.with_column(key: :name, label: "Name", sortable: true) %>
      <% table.with_column(key: :role, label: "Role") %>
      <% table.with_column(key: :email, label: "Email") %>

      <% @users.each do |user| %>
    <% table.with_row(id: user.id) do |row| %>
      <% row.with_cell { user.name } %>
      <% row.with_cell { user.role } %>
      <% row.with_cell { user.email } %>
    <% end %>
      <% end %>
      <% 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>