[go: up one dir, main page]

Table Shared Partial

1. Copy shared partial files

Download all 1 shared partial files as a ZIP file.

Download all files (ZIP)

After downloading, unzip and copy the table/ folder to your app/views/shared/components/ directory.

Copy these files to your app/views/shared/components/table/ directory:

2. Usage example

<%
  team_members = [
    { name: "Alex Johnson", email: "alex@example.com", role: "Admin", status: "Active" },
    { name: "Sarah Miller", email: "sarah@example.com", role: "Editor", status: "Active" },
    { name: "Michael Chen", email: "michael@example.com", role: "Viewer", status: "Pending" },
    { name: "Emily Davis", email: "emily@example.com", role: "Editor", status: "Active" },
    { name: "Jordan Lee", email: "jordan@example.com", role: "Manager", status: "Active" },
    { name: "Priya Patel", email: "priya@example.com", role: "Admin", status: "Pending" },
    { name: "Noah Wilson", email: "noah@example.com", role: "Viewer", status: "Active" },
    { name: "Mia Rodriguez", email: "mia@example.com", role: "Editor", status: "Inactive" }
  ]

  products = [
    { name: "Wireless Headphones", category: "Electronics", price: "$129.99", stock: "245" },
    { name: "Ergonomic Mouse", category: "Electronics", price: "$49.99", stock: "512" },
    { name: "Desk Lamp", category: "Furniture", price: "$79.99", stock: "89" },
    { name: "Mechanical Keyboard", category: "Electronics", price: "$99.00", stock: "301" },
    { name: "Monitor Stand", category: "Furniture", price: "$39.00", stock: "178" },
    { name: "USB-C Hub", category: "Accessories", price: "$59.00", stock: "420" },
    { name: "Laptop Sleeve", category: "Accessories", price: "$34.00", stock: "267" },
    { name: "Webcam", category: "Electronics", price: "$89.00", stock: "142" }
  ]

  transactions = [
    { id: "#TXN-4821", date: "Nov 28, 2025", customer: "Acme Corp", amount: "$2,450.00" },
    { id: "#TXN-4820", date: "Nov 28, 2025", customer: "TechStart Inc", amount: "$1,299.00" },
    { id: "#TXN-4819", date: "Nov 27, 2025", customer: "Bluebird LLC", amount: "$875.00" },
    { id: "#TXN-4818", date: "Nov 27, 2025", customer: "Orbit Labs", amount: "$3,120.00" },
    { id: "#TXN-4817", date: "Nov 26, 2025", customer: "Northwind", amount: "$640.00" },
    { id: "#TXN-4816", date: "Nov 26, 2025", customer: "Nimbus Co", amount: "$2,040.00" },
    { id: "#TXN-4815", date: "Nov 25, 2025", customer: "Pioneer Group", amount: "$1,150.00" },
    { id: "#TXN-4814", date: "Nov 25, 2025", customer: "Summit Works", amount: "$980.00" }
  ]

  projects = [
    { name: "Website Redesign", deadline: "Dec 15, 2025", priority: "High" },
    { name: "Mobile App", deadline: "Jan 20, 2026", priority: "Medium" },
    { name: "Brand Identity", deadline: "Dec 01, 2025", priority: "Low" },
    { name: "API Integration", deadline: "Jan 05, 2026", priority: "High" },
    { name: "Billing Migration", deadline: "Jan 12, 2026", priority: "Medium" },
    { name: "Search Improvements", deadline: "Feb 02, 2026", priority: "Medium" },
    { name: "Security Audit", deadline: "Dec 22, 2025", priority: "High" },
    { name: "Performance Tuning", deadline: "Jan 18, 2026", priority: "Low" },
    { name: "Partner Dashboard", deadline: "Feb 10, 2026", priority: "Medium" },
    { name: "Data Export", deadline: "Feb 15, 2026", priority: "Low" },
    { name: "Onboarding Refresh", deadline: "Mar 01, 2026", priority: "High" },
    { name: "Notification Center", deadline: "Mar 11, 2026", priority: "Medium" }
  ]

  status_badge = lambda do |text, tone|
    tone_classes = case tone
    when :active
      "bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25"
    when :pending
      "bg-amber-50 text-amber-700 outline-amber-600/20 dark:bg-amber-400/10 dark:text-amber-400 dark:outline-amber-400/25"
    else
      "bg-red-50 text-red-700 outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25"
    end

    content_tag(
      :span,
      text,
      class: "inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium outline #{tone_classes}"
    )
  end

  status_rows = [
    { name: "Alex Johnson", email: "alex@example.com", status: status_badge.call("Active", :active) },
    { name: "Sarah Miller", email: "sarah@example.com", status: status_badge.call("Pending", :pending) },
    { name: "Michael Chen", email: "michael@example.com", status: status_badge.call("Blocked", :blocked) },
    { name: "Emily Davis", email: "emily@example.com", status: status_badge.call("Active", :active) },
    { name: "Jordan Lee", email: "jordan@example.com", status: status_badge.call("Pending", :pending) },
    { name: "Priya Patel", email: "priya@example.com", status: status_badge.call("Active", :active) }
  ]
%>

<!-- Basic table -->
<%= render "shared/components/table/table",
  columns: ["Name", "Email", "Role", { label: "Status", align: "right" }],
  rows: team_members.map { |member| [{ content: member[:name], primary: true }, member[:email], member[:role], { content: member[:status], align: "right" }] },
  max_height: "240px"
%>

<!-- With column alignment options -->
<%= render "shared/components/table/table",
  columns: [
    { label: "Product", align: "left" },
    { label: "Category", align: "left" },
    { label: "Price", align: "right" },
    { label: "Stock", align: "right" }
  ],
  rows: products.map { |product| [{ content: product[:name], primary: true }, product[:category], { content: product[:price], align: "right" }, { content: product[:stock], align: "right" }] },
  max_height: "240px"
%>

<!-- Striped table -->
<%= render "shared/components/table/table",
  columns: ["Name", "Email", "Role", { label: "Status", align: "right" }],
  rows: team_members.map { |member| [{ content: member[:name], primary: true }, member[:email], member[:role], { content: member[:status], align: "right" }] },
  striped: true,
  max_height: "240px"
%>

<!-- Hoverable table -->
<%= render "shared/components/table/table",
  columns: ["Name", "Email", "Role", { label: "Status", align: "right" }],
  rows: team_members.map { |member| [{ content: member[:name], primary: true }, member[:email], member[:role], { content: member[:status], align: "right" }] },
  hoverable: true,
  max_height: "240px"
%>

<!-- Compact (condensed) table -->
<%= render "shared/components/table/table",
  columns: ["Transaction ID", "Date", "Customer", { label: "Amount", align: "right" }],
  rows: transactions.map { |transaction| [{ content: transaction[:id], primary: true }, transaction[:date], transaction[:customer], { content: transaction[:amount], align: "right" }] },
  density: "compact",
  max_height: "220px"
%>

<!-- Sticky header with max height -->
<%= render "shared/components/table/table",
  columns: ["Project", "Deadline", "Priority"],
  rows: projects.map { |project| [{ content: project[:name], primary: true }, project[:deadline], project[:priority]] },
  sticky_header: true,
  striped: true,
  max_height: "220px"
%>

<!-- With custom HTML content in cells -->
<%= render "shared/components/table/table",
  columns: ["Name", "Email", "Status"],
  rows: status_rows.map { |member| [{ content: member[:name], primary: true }, member[:email], member[:status]] },
  max_height: "220px"
%>

<!-- Table with caption -->
<%= render "shared/components/table/table",
  columns: ["Name", "Role"],
  rows: team_members.map { |member| [{ content: member[:name], primary: true }, member[:role]] },
  caption: "Team Members",
  max_height: "220px"
%>

<!-- Borderless table -->
<%= render "shared/components/table/table",
  columns: ["Name", "Email"],
  rows: team_members.map { |member| [{ content: member[:name], primary: true }, member[:email]] },
  bordered: false,
  max_height: "220px"
%>

<!-- Without container (raw table) -->
<%= render "shared/components/table/table",
  columns: ["Name", "Email"],
  rows: team_members.map { |member| [{ content: member[:name], primary: true }, member[:email]] },
  container: false
%>

Rendered usage example

Name Email Role Status
Alex Johnson alex@example.com Admin Active
Sarah Miller sarah@example.com Editor Active
Michael Chen michael@example.com Viewer Pending
Emily Davis emily@example.com Editor Active
Jordan Lee jordan@example.com Manager Active
Priya Patel priya@example.com Admin Pending
Noah Wilson noah@example.com Viewer Active
Mia Rodriguez mia@example.com Editor Inactive
Product Category Price Stock
Wireless Headphones Electronics $129.99 245
Ergonomic Mouse Electronics $49.99 512
Desk Lamp Furniture $79.99 89
Mechanical Keyboard Electronics $99.00 301
Monitor Stand Furniture $39.00 178
USB-C Hub Accessories $59.00 420
Laptop Sleeve Accessories $34.00 267
Webcam Electronics $89.00 142
Name Email Role Status
Alex Johnson alex@example.com Admin Active
Sarah Miller sarah@example.com Editor Active
Michael Chen michael@example.com Viewer Pending
Emily Davis emily@example.com Editor Active
Jordan Lee jordan@example.com Manager Active
Priya Patel priya@example.com Admin Pending
Noah Wilson noah@example.com Viewer Active
Mia Rodriguez mia@example.com Editor Inactive
Name Email Role Status
Alex Johnson alex@example.com Admin Active
Sarah Miller sarah@example.com Editor Active
Michael Chen michael@example.com Viewer Pending
Emily Davis emily@example.com Editor Active
Jordan Lee jordan@example.com Manager Active
Priya Patel priya@example.com Admin Pending
Noah Wilson noah@example.com Viewer Active
Mia Rodriguez mia@example.com Editor Inactive
Transaction ID Date Customer Amount
#TXN-4821 Nov 28, 2025 Acme Corp $2,450.00
#TXN-4820 Nov 28, 2025 TechStart Inc $1,299.00
#TXN-4819 Nov 27, 2025 Bluebird LLC $875.00
#TXN-4818 Nov 27, 2025 Orbit Labs $3,120.00
#TXN-4817 Nov 26, 2025 Northwind $640.00
#TXN-4816 Nov 26, 2025 Nimbus Co $2,040.00
#TXN-4815 Nov 25, 2025 Pioneer Group $1,150.00
#TXN-4814 Nov 25, 2025 Summit Works $980.00
Project Deadline Priority
Website Redesign Dec 15, 2025 High
Mobile App Jan 20, 2026 Medium
Brand Identity Dec 01, 2025 Low
API Integration Jan 05, 2026 High
Billing Migration Jan 12, 2026 Medium
Search Improvements Feb 02, 2026 Medium
Security Audit Dec 22, 2025 High
Performance Tuning Jan 18, 2026 Low
Partner Dashboard Feb 10, 2026 Medium
Data Export Feb 15, 2026 Low
Onboarding Refresh Mar 01, 2026 High
Notification Center Mar 11, 2026 Medium
Name Email Status
Alex Johnson alex@example.com Active
Sarah Miller sarah@example.com Pending
Michael Chen michael@example.com Blocked
Emily Davis emily@example.com Active
Jordan Lee jordan@example.com Pending
Priya Patel priya@example.com Active
Team Members
Name Role
Alex Johnson Admin
Sarah Miller Editor
Michael Chen Viewer
Emily Davis Editor
Jordan Lee Manager
Priya Patel Admin
Noah Wilson Viewer
Mia Rodriguez Editor
Name Email
Alex Johnson alex@example.com
Sarah Miller sarah@example.com
Michael Chen michael@example.com
Emily Davis emily@example.com
Jordan Lee jordan@example.com
Priya Patel priya@example.com
Noah Wilson noah@example.com
Mia Rodriguez mia@example.com
Name Email
Alex Johnson alex@example.com
Sarah Miller sarah@example.com
Michael Chen michael@example.com
Emily Davis emily@example.com
Jordan Lee jordan@example.com
Priya Patel priya@example.com
Noah Wilson noah@example.com
Mia Rodriguez mia@example.com

Table ViewComponent

1. Ensure the gem is installed

gem "view_component", "~> 4.2"

2. Copy component files

Download all 8 component files as a ZIP file.

Download all files (ZIP)

After downloading, unzip and copy the table/ folder to your app/components/ directory.

Copy these files to your app/components/table/ directory:

3. Usage example

<%
  team_members = [
    { name: "Alex Johnson", email: "alex@example.com", role: "Admin", status: "Active" },
    { name: "Sarah Miller", email: "sarah@example.com", role: "Editor", status: "Active" },
    { name: "Michael Chen", email: "michael@example.com", role: "Viewer", status: "Pending" },
    { name: "Emily Davis", email: "emily@example.com", role: "Editor", status: "Active" },
    { name: "Jordan Lee", email: "jordan@example.com", role: "Manager", status: "Active" },
    { name: "Priya Patel", email: "priya@example.com", role: "Admin", status: "Pending" },
    { name: "Noah Wilson", email: "noah@example.com", role: "Viewer", status: "Active" },
    { name: "Mia Rodriguez", email: "mia@example.com", role: "Editor", status: "Inactive" }
  ]

  products = [
    { name: "Wireless Headphones", category: "Electronics", price: "$129.99", stock: "245" },
    { name: "Ergonomic Mouse", category: "Electronics", price: "$49.99", stock: "512" },
    { name: "Desk Lamp", category: "Furniture", price: "$79.99", stock: "89" },
    { name: "Mechanical Keyboard", category: "Electronics", price: "$99.00", stock: "301" },
    { name: "Monitor Stand", category: "Furniture", price: "$39.00", stock: "178" },
    { name: "USB-C Hub", category: "Accessories", price: "$59.00", stock: "420" },
    { name: "Laptop Sleeve", category: "Accessories", price: "$34.00", stock: "267" },
    { name: "Webcam", category: "Electronics", price: "$89.00", stock: "142" }
  ]

  transactions = [
    { id: "#TXN-4821", date: "Nov 28, 2025", customer: "Acme Corp", amount: "$2,450.00" },
    { id: "#TXN-4820", date: "Nov 28, 2025", customer: "TechStart Inc", amount: "$1,299.00" },
    { id: "#TXN-4819", date: "Nov 27, 2025", customer: "Bluebird LLC", amount: "$875.00" },
    { id: "#TXN-4818", date: "Nov 27, 2025", customer: "Orbit Labs", amount: "$3,120.00" },
    { id: "#TXN-4817", date: "Nov 26, 2025", customer: "Northwind", amount: "$640.00" },
    { id: "#TXN-4816", date: "Nov 26, 2025", customer: "Nimbus Co", amount: "$2,040.00" },
    { id: "#TXN-4815", date: "Nov 25, 2025", customer: "Pioneer Group", amount: "$1,150.00" },
    { id: "#TXN-4814", date: "Nov 25, 2025", customer: "Summit Works", amount: "$980.00" }
  ]

  projects = [
    { name: "Website Redesign", deadline: "Dec 15, 2025", priority: "High" },
    { name: "Mobile App", deadline: "Jan 20, 2026", priority: "Medium" },
    { name: "Brand Identity", deadline: "Dec 01, 2025", priority: "Low" },
    { name: "API Integration", deadline: "Jan 05, 2026", priority: "High" },
    { name: "Billing Migration", deadline: "Jan 12, 2026", priority: "Medium" },
    { name: "Search Improvements", deadline: "Feb 02, 2026", priority: "Medium" },
    { name: "Security Audit", deadline: "Dec 22, 2025", priority: "High" },
    { name: "Performance Tuning", deadline: "Jan 18, 2026", priority: "Low" },
    { name: "Partner Dashboard", deadline: "Feb 10, 2026", priority: "Medium" },
    { name: "Data Export", deadline: "Feb 15, 2026", priority: "Low" },
    { name: "Onboarding Refresh", deadline: "Mar 01, 2026", priority: "High" },
    { name: "Notification Center", deadline: "Mar 11, 2026", priority: "Medium" }
  ]

  status_badge = lambda do |text, tone|
    tone_classes = case tone
    when :active
      "bg-green-50 text-green-700 outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25"
    when :pending
      "bg-amber-50 text-amber-700 outline-amber-600/20 dark:bg-amber-400/10 dark:text-amber-400 dark:outline-amber-400/25"
    else
      "bg-red-50 text-red-700 outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25"
    end

    content_tag(
      :span,
      text,
      class: "inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium outline #{tone_classes}"
    )
  end

  status_rows = [
    { name: "Alex Johnson", email: "alex@example.com", status: status_badge.call("Active", :active) },
    { name: "Sarah Miller", email: "sarah@example.com", status: status_badge.call("Pending", :pending) },
    { name: "Michael Chen", email: "michael@example.com", status: status_badge.call("Blocked", :blocked) },
    { name: "Emily Davis", email: "emily@example.com", status: status_badge.call("Active", :active) },
    { name: "Jordan Lee", email: "jordan@example.com", status: status_badge.call("Pending", :pending) },
    { name: "Priya Patel", email: "priya@example.com", status: status_badge.call("Active", :active) }
  ]
%>

<!-- Basic table -->
<%= render(Table::Component.new(max_height: "240px")) do |table| %>
  <% table.with_column(label: "Name") %>
  <% table.with_column(label: "Email") %>
  <% table.with_column(label: "Role") %>
  <% table.with_column(label: "Status", align: :right) %>

  <% team_members.each do |member| %>
    <% table.with_row do |row| %>
      <% row.with_cell(primary: true) { member[:name] } %>
      <% row.with_cell { member[:email] } %>
      <% row.with_cell { member[:role] } %>
      <% row.with_cell(align: :right) { member[:status] } %>
    <% end %>
  <% end %>
<% end %>

<!-- With column alignment options -->
<%= render(Table::Component.new(max_height: "240px")) do |table| %>
  <% table.with_column(label: "Product") %>
  <% table.with_column(label: "Category") %>
  <% table.with_column(label: "Price", align: :right) %>
  <% table.with_column(label: "Stock", align: :right) %>

  <% products.each do |product| %>
    <% table.with_row do |row| %>
      <% row.with_cell(primary: true) { product[:name] } %>
      <% row.with_cell { product[:category] } %>
      <% row.with_cell(align: :right) { product[:price] } %>
      <% row.with_cell(align: :right) { product[:stock] } %>
    <% end %>
  <% end %>
<% end %>

<!-- Striped table -->
<%= render(Table::Component.new(striped: true, max_height: "240px")) do |table| %>
  <% table.with_column(label: "Name") %>
  <% table.with_column(label: "Email") %>
  <% table.with_column(label: "Role") %>
  <% table.with_column(label: "Status", align: :right) %>

  <% team_members.each do |member| %>
    <% table.with_row do |row| %>
      <% row.with_cell(primary: true) { member[:name] } %>
      <% row.with_cell { member[:email] } %>
      <% row.with_cell { member[:role] } %>
      <% row.with_cell(align: :right) { member[:status] } %>
    <% end %>
  <% end %>
<% end %>

<!-- Hoverable table -->
<%= render(Table::Component.new(hoverable: true, max_height: "240px")) do |table| %>
  <% table.with_column(label: "Name") %>
  <% table.with_column(label: "Email") %>
  <% table.with_column(label: "Role") %>
  <% table.with_column(label: "Status", align: :right) %>

  <% team_members.each do |member| %>
    <% table.with_row do |row| %>
      <% row.with_cell(primary: true) { member[:name] } %>
      <% row.with_cell { member[:email] } %>
      <% row.with_cell { member[:role] } %>
      <% row.with_cell(align: :right) { member[:status] } %>
    <% end %>
  <% end %>
<% end %>

<!-- Compact (condensed) table -->
<%= render(Table::Component.new(density: :compact, max_height: "220px")) do |table| %>
  <% table.with_column(label: "Transaction ID") %>
  <% table.with_column(label: "Date") %>
  <% table.with_column(label: "Customer") %>
  <% table.with_column(label: "Amount", align: :right) %>

  <% transactions.each do |transaction| %>
    <% table.with_row do |row| %>
      <% row.with_cell(primary: true) { transaction[:id] } %>
      <% row.with_cell { transaction[:date] } %>
      <% row.with_cell { transaction[:customer] } %>
      <% row.with_cell(align: :right) { transaction[:amount] } %>
    <% end %>
  <% end %>
<% end %>

<!-- Sticky header with max height -->
<%= render(Table::Component.new(sticky_header: true, striped: true, max_height: "220px")) do |table| %>
  <% table.with_column(label: "Project") %>
  <% table.with_column(label: "Deadline") %>
  <% table.with_column(label: "Priority") %>

  <% projects.each do |project| %>
    <% table.with_row do |row| %>
      <% row.with_cell(primary: true) { project[:name] } %>
      <% row.with_cell { project[:deadline] } %>
      <% row.with_cell { project[:priority] } %>
    <% end %>
  <% end %>
<% end %>

<!-- With custom HTML content in cells -->
<%= render(Table::Component.new(max_height: "220px")) do |table| %>
  <% table.with_column(label: "Name") %>
  <% table.with_column(label: "Email") %>
  <% table.with_column(label: "Status") %>

  <% status_rows.each do |member| %>
    <% table.with_row do |row| %>
      <% row.with_cell(primary: true) { member[:name] } %>
      <% row.with_cell { member[:email] } %>
      <% row.with_cell { member[:status] } %>
    <% end %>
  <% end %>
<% end %>

<!-- Table with caption -->
<%= render(Table::Component.new(max_height: "220px")) do |table| %>
  <% table.with_caption { "Team Members" } %>
  <% table.with_column(label: "Name") %>
  <% table.with_column(label: "Role") %>

  <% team_members.each do |member| %>
    <% table.with_row do |row| %>
      <% row.with_cell(primary: true) { member[:name] } %>
      <% row.with_cell { member[:role] } %>
    <% end %>
  <% end %>
<% end %>

<!-- Borderless table -->
<%= render(Table::Component.new(bordered: false, max_height: "220px")) do |table| %>
  <% table.with_column(label: "Name") %>
  <% table.with_column(label: "Email") %>

  <% team_members.each do |member| %>
    <% table.with_row do |row| %>
      <% row.with_cell(primary: true) { member[:name] } %>
      <% row.with_cell { member[:email] } %>
    <% end %>
  <% end %>
<% end %>

<!-- Without container (raw table) -->
<%= render(Table::Component.new(container: false)) do |table| %>
  <% table.with_column(label: "Name") %>
  <% table.with_column(label: "Email") %>

  <% team_members.each do |member| %>
    <% table.with_row do |row| %>
      <% row.with_cell(primary: true) { member[:name] } %>
      <% row.with_cell { member[:email] } %>
    <% end %>
  <% end %>
<% end %>

Rendered usage example

Name Email Role Status
Alex Johnson alex@example.com Admin Active
Sarah Miller sarah@example.com Editor Active
Michael Chen michael@example.com Viewer Pending
Emily Davis emily@example.com Editor Active
Jordan Lee jordan@example.com Manager Active
Priya Patel priya@example.com Admin Pending
Noah Wilson noah@example.com Viewer Active
Mia Rodriguez mia@example.com Editor Inactive
Product Category Price Stock
Wireless Headphones Electronics $129.99 245
Ergonomic Mouse Electronics $49.99 512
Desk Lamp Furniture $79.99 89
Mechanical Keyboard Electronics $99.00 301
Monitor Stand Furniture $39.00 178
USB-C Hub Accessories $59.00 420
Laptop Sleeve Accessories $34.00 267
Webcam Electronics $89.00 142
Name Email Role Status
Alex Johnson alex@example.com Admin Active
Sarah Miller sarah@example.com Editor Active
Michael Chen michael@example.com Viewer Pending
Emily Davis emily@example.com Editor Active
Jordan Lee jordan@example.com Manager Active
Priya Patel priya@example.com Admin Pending
Noah Wilson noah@example.com Viewer Active
Mia Rodriguez mia@example.com Editor Inactive
Name Email Role Status
Alex Johnson alex@example.com Admin Active
Sarah Miller sarah@example.com Editor Active
Michael Chen michael@example.com Viewer Pending
Emily Davis emily@example.com Editor Active
Jordan Lee jordan@example.com Manager Active
Priya Patel priya@example.com Admin Pending
Noah Wilson noah@example.com Viewer Active
Mia Rodriguez mia@example.com Editor Inactive
Transaction ID Date Customer Amount
#TXN-4821 Nov 28, 2025 Acme Corp $2,450.00
#TXN-4820 Nov 28, 2025 TechStart Inc $1,299.00
#TXN-4819 Nov 27, 2025 Bluebird LLC $875.00
#TXN-4818 Nov 27, 2025 Orbit Labs $3,120.00
#TXN-4817 Nov 26, 2025 Northwind $640.00
#TXN-4816 Nov 26, 2025 Nimbus Co $2,040.00
#TXN-4815 Nov 25, 2025 Pioneer Group $1,150.00
#TXN-4814 Nov 25, 2025 Summit Works $980.00
Project Deadline Priority
Website Redesign Dec 15, 2025 High
Mobile App Jan 20, 2026 Medium
Brand Identity Dec 01, 2025 Low
API Integration Jan 05, 2026 High
Billing Migration Jan 12, 2026 Medium
Search Improvements Feb 02, 2026 Medium
Security Audit Dec 22, 2025 High
Performance Tuning Jan 18, 2026 Low
Partner Dashboard Feb 10, 2026 Medium
Data Export Feb 15, 2026 Low
Onboarding Refresh Mar 01, 2026 High
Notification Center Mar 11, 2026 Medium
Name Email Status
Alex Johnson alex@example.com Active
Sarah Miller sarah@example.com Pending
Michael Chen michael@example.com Blocked
Emily Davis emily@example.com Active
Jordan Lee jordan@example.com Pending
Priya Patel priya@example.com Active
Team Members
Name Role
Alex Johnson Admin
Sarah Miller Editor
Michael Chen Viewer
Emily Davis Editor
Jordan Lee Manager
Priya Patel Admin
Noah Wilson Viewer
Mia Rodriguez Editor
Name Email
Alex Johnson alex@example.com
Sarah Miller sarah@example.com
Michael Chen michael@example.com
Emily Davis emily@example.com
Jordan Lee jordan@example.com
Priya Patel priya@example.com
Noah Wilson noah@example.com
Mia Rodriguez mia@example.com
Name Email
Alex Johnson alex@example.com
Sarah Miller sarah@example.com
Michael Chen michael@example.com
Emily Davis emily@example.com
Jordan Lee jordan@example.com
Priya Patel priya@example.com
Noah Wilson noah@example.com
Mia Rodriguez mia@example.com

Table Rails Components

Clean, modern table components for displaying data in your Rails applications. These examples showcase different table styles and layouts.

If you're looking for a more interactive table component, check out the Datatable component.

Examples

Basic Table

A clean, simple table with status badges. Perfect for displaying user lists, team members, or any basic data with clear visual hierarchy.

Name Email Role Status
Alex Johnson alex@example.com Admin Active
Sarah Miller sarah@example.com Editor Active
Michael Chen michael@example.com Viewer Pending
Emily Davis emily@example.com Editor Active
James Wilson james@example.com Viewer Inactive 
<div class="w-full max-w-4xl mx-auto">
  <div class="bg-white dark:bg-neutral-900 rounded-xl border border-black/10 dark:border-white/10 shadow-xs overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead class="bg-neutral-100 dark:bg-neutral-800">
          <tr class="*:py-3 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <th scope="col" class="pl-6 pr-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              Name
            </th>
            <th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              Email
            </th>
            <th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              Role
            </th>
            <th scope="col" class="pl-3 pr-6 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              Status
            </th>
          </tr>
        </thead>
        <tbody class="*:*:py-4">
          <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Alex Johnson
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              alex@example.com
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Admin
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
                Active
              </span>
            </td>
          </tr>
          <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Sarah Miller
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              sarah@example.com
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Editor
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
                Active
              </span>
            </td>
          </tr>
          <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Michael Chen
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              michael@example.com
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Viewer
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
                Pending
              </span>
            </td>
          </tr>
          <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Emily Davis
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              emily@example.com
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Editor
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
                Active
              </span>
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              James Wilson
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              james@example.com
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Viewer
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
                Inactive
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Striped Table

A table with alternating row colors for improved readability. Great for product lists, inventory management, or any data where visual separation between rows helps scanning.

Product Category Price Stock
Wireless Headphones Electronics $129.99 245
Ergonomic Mouse Electronics $49.99 512
Desk Lamp Furniture $79.99 89
Notebook Set Stationery $24.99 1,024
USB-C Cable Accessories $19.99 3,456
Monitor Stand Furniture $89.99 156 
<div class="w-full max-w-4xl mx-auto">
  <div class="bg-white dark:bg-neutral-900 rounded-xl border border-black/10 dark:border-white/10 shadow-xs overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead class="bg-neutral-100 dark:bg-neutral-800">
          <tr class="*:py-3 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <th scope="col" class="pl-6 pr-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              Product
            </th>
            <th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              Category
            </th>
            <th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              Price
            </th>
            <th scope="col" class="pl-3 pr-6 text-sm font-semibold text-neutral-900 dark:text-neutral-50 text-right">
              Stock
            </th>
          </tr>
        </thead>
        <tbody class="*:even:bg-neutral-50 dark:*:even:bg-neutral-800/50 *:*:py-4">
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Wireless Headphones
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Electronics
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              $129.99
            </td>
            <td class="pl-3 pr-6 text-sm text-neutral-500 dark:text-neutral-400 text-right">
              245
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Ergonomic Mouse
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Electronics
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              $49.99
            </td>
            <td class="pl-3 pr-6 text-sm text-neutral-500 dark:text-neutral-400 text-right">
              512
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Desk Lamp
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Furniture
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              $79.99
            </td>
            <td class="pl-3 pr-6 text-sm text-neutral-500 dark:text-neutral-400 text-right">
              89
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Notebook Set
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Stationery
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              $24.99
            </td>
            <td class="pl-3 pr-6 text-sm text-neutral-500 dark:text-neutral-400 text-right">
              1,024
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              USB-C Cable
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Accessories
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              $19.99
            </td>
            <td class="pl-3 pr-6 text-sm text-neutral-500 dark:text-neutral-400 text-right">
              3,456
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Monitor Stand
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Furniture
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              $89.99
            </td>
            <td class="pl-3 pr-6 text-sm text-neutral-500 dark:text-neutral-400 text-right">
              156
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Table with Avatars

A table featuring user avatars and multi-line content. Ideal for team directories, contact lists, or any interface showing people with additional details.

User Title Department Status
AJ
Alex Johnson
alex@company.com
 Senior Developer Engineering Active
SM
Sarah Miller
sarah@company.com
 Product Manager Product Active
MC
Michael Chen
michael@company.com
 UX Designer Design Away
ED
Emily Davis
emily@company.com
 Marketing Lead Marketing Active
JW
James Wilson
james@company.com
 Sales Director Sales Offline 
<div class="w-full max-w-5xl mx-auto">
  <div class="bg-white dark:bg-neutral-900 rounded-xl border border-black/10 dark:border-white/10 shadow-xs overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead class="bg-neutral-100 dark:bg-neutral-800">
          <tr class="*:py-3 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <th scope="col" class="pl-6 pr-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              User
            </th>
            <th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              Title
            </th>
            <th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              Department
            </th>
            <th scope="col" class="pl-3 pr-6 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              Status
            </th>
          </tr>
        </thead>
        <tbody class="*:*:py-4">
          <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <td class="pl-6 pr-3">
              <div class="flex items-center gap-3">
                <div class="flex-shrink-0 size-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold text-sm">
                  AJ
                </div>
                <div>
                  <div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Alex Johnson</div>
                  <div class="text-xs text-neutral-500 dark:text-neutral-400">alex@company.com</div>
                </div>
              </div>
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Senior Developer
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Engineering
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
                Active
              </span>
            </td>
          </tr>
          <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <td class="pl-6 pr-3">
              <div class="flex items-center gap-3">
                <div class="flex-shrink-0 size-10 rounded-full bg-gradient-to-br from-pink-500 to-rose-600 flex items-center justify-center text-white font-semibold text-sm">
                  SM
                </div>
                <div>
                  <div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Sarah Miller</div>
                  <div class="text-xs text-neutral-500 dark:text-neutral-400">sarah@company.com</div>
                </div>
              </div>
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Product Manager
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Product
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
                Active
              </span>
            </td>
          </tr>
          <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <td class="pl-6 pr-3">
              <div class="flex items-center gap-3">
                <div class="flex-shrink-0 size-10 rounded-full bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center text-white font-semibold text-sm">
                  MC
                </div>
                <div>
                  <div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Michael Chen</div>
                  <div class="text-xs text-neutral-500 dark:text-neutral-400">michael@company.com</div>
                </div>
              </div>
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              UX Designer
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Design
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
                Away
              </span>
            </td>
          </tr>
          <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <td class="pl-6 pr-3">
              <div class="flex items-center gap-3">
                <div class="flex-shrink-0 size-10 rounded-full bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center text-white font-semibold text-sm">
                  ED
                </div>
                <div>
                  <div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Emily Davis</div>
                  <div class="text-xs text-neutral-500 dark:text-neutral-400">emily@company.com</div>
                </div>
              </div>
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Marketing Lead
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Marketing
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
                Active
              </span>
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3">
              <div class="flex items-center gap-3">
                <div class="flex-shrink-0 size-10 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center text-white font-semibold text-sm">
                  JW
                </div>
                <div>
                  <div class="text-sm font-medium text-neutral-900 dark:text-neutral-100">James Wilson</div>
                  <div class="text-xs text-neutral-500 dark:text-neutral-400">james@company.com</div>
                </div>
              </div>
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Sales Director
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Sales
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
                Offline
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Condensed Table

A compact table with uppercase headers and tighter spacing. Perfect for transaction histories, financial data, or dashboards where you need to display more rows in limited space.

Transaction ID Date Customer Amount Status
#TXN-4821 Nov 28, 2025 Acme Corp $2,450.00 Completed
#TXN-4820 Nov 28, 2025 TechStart Inc $1,299.00 Processing
#TXN-4819 Nov 27, 2025 Global Solutions $899.00 Completed
#TXN-4818 Nov 27, 2025 Creative Studios $3,750.00 Completed
#TXN-4817 Nov 26, 2025 Innovate Labs $599.00 Failed
#TXN-4816 Nov 26, 2025 Blueprint Co $1,850.00 Completed
#TXN-4815 Nov 25, 2025 NextGen Systems $4,200.00 Completed 
<div class="w-full max-w-4xl mx-auto">
  <div class="bg-white dark:bg-neutral-900 rounded-xl border border-black/10 dark:border-white/10 shadow-xs overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead class="bg-neutral-100 dark:bg-neutral-800">
          <tr class="*:py-2.5 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <th scope="col" class="pl-6 pr-3 text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
              Transaction ID
            </th>
            <th scope="col" class="px-3 text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
              Date
            </th>
            <th scope="col" class="px-3 text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
              Customer
            </th>
            <th scope="col" class="px-3 text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400 text-right">
              Amount
            </th>
            <th scope="col" class="pl-3 pr-6 text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
              Status
            </th>
          </tr>
        </thead>
        <tbody class="*:*:py-3">
          <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <td class="pl-6 pr-3 text-sm font-mono text-neutral-900 dark:text-neutral-100">
              #TXN-4821
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Nov 28, 2025
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Acme Corp
            </td>
            <td class="px-3 text-sm text-neutral-900 dark:text-neutral-100 text-right font-medium">
              $2,450.00
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
                Completed
              </span>
            </td>
          </tr>
          <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <td class="pl-6 pr-3 text-sm font-mono text-neutral-900 dark:text-neutral-100">
              #TXN-4820
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Nov 28, 2025
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              TechStart Inc
            </td>
            <td class="px-3 text-sm text-neutral-900 dark:text-neutral-100 text-right font-medium">
              $1,299.00
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
                Processing
              </span>
            </td>
          </tr>
          <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <td class="pl-6 pr-3 text-sm font-mono text-neutral-900 dark:text-neutral-100">
              #TXN-4819
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Nov 27, 2025
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Global Solutions
            </td>
            <td class="px-3 text-sm text-neutral-900 dark:text-neutral-100 text-right font-medium">
              $899.00
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
                Completed
              </span>
            </td>
          </tr>
          <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <td class="pl-6 pr-3 text-sm font-mono text-neutral-900 dark:text-neutral-100">
              #TXN-4818
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Nov 27, 2025
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Creative Studios
            </td>
            <td class="px-3 text-sm text-neutral-900 dark:text-neutral-100 text-right font-medium">
              $3,750.00
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
                Completed
              </span>
            </td>
          </tr>
          <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <td class="pl-6 pr-3 text-sm font-mono text-neutral-900 dark:text-neutral-100">
              #TXN-4817
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Nov 26, 2025
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Innovate Labs
            </td>
            <td class="px-3 text-sm text-neutral-900 dark:text-neutral-100 text-right font-medium">
              $599.00
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
                Failed
              </span>
            </td>
          </tr>
          <tr class="[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <td class="pl-6 pr-3 text-sm font-mono text-neutral-900 dark:text-neutral-100">
              #TXN-4816
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Nov 26, 2025
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Blueprint Co
            </td>
            <td class="px-3 text-sm text-neutral-900 dark:text-neutral-100 text-right font-medium">
              $1,850.00
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
                Completed
              </span>
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-mono text-neutral-900 dark:text-neutral-100">
              #TXN-4815
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Nov 25, 2025
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              NextGen Systems
            </td>
            <td class="px-3 text-sm text-neutral-900 dark:text-neutral-100 text-right font-medium">
              $4,200.00
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
                Completed
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Sticky Header Table with Progress

A scrollable table with a sticky header that stays visible while scrolling. Features progress bars for tracking completion. Great for project management, task lists, or any long dataset where context is important.

Project Deadline Progress Priority
Website Redesign Dec 15, 2025
75%
High
Mobile App Development Jan 20, 2026
45%
Medium
Brand Identity Dec 01, 2025
100%
Low
E-commerce Platform Feb 28, 2026
20%
Medium
Marketing Campaign Dec 10, 2025
60%
High
API Integration Jan 05, 2026
85%
Medium
Security Audit Dec 20, 2025
30%
High
Documentation Update Dec 05, 2025
90%
Low
Performance Optimization Jan 15, 2026
55%
Medium
User Testing Dec 12, 2025
40%
Low 
<div class="w-full max-w-6xl mx-auto">
  <div class="bg-white dark:bg-neutral-900 rounded-xl border border-black/10 dark:border-white/10 shadow-xs overflow-hidden">
    <div class="overflow-x-auto max-h-[400px] overflow-y-auto small-scrollbar">
      <table class="w-full">
        <thead class="sticky top-0 z-10 bg-neutral-100/75 dark:bg-neutral-800/75 backdrop-blur-sm backdrop-filter">
          <tr class="*:py-3 *:text-left *:[box-shadow:inset_0_-1px_0_0_rgb(229_229_229)] dark:*:[box-shadow:inset_0_-1px_0_0_rgb(46_46_46)]">
            <th scope="col" class="pl-6 pr-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              Project
            </th>
            <th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              Deadline
            </th>
            <th scope="col" class="px-3 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              Progress
            </th>
            <th scope="col" class="pl-3 pr-6 text-sm font-semibold text-neutral-900 dark:text-neutral-50">
              Priority
            </th>
          </tr>
        </thead>
        <tbody class="*:even:bg-neutral-50 dark:*:even:bg-neutral-800/50 *:*:py-4">
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Website Redesign
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Dec 15, 2025
            </td>
            <td class="px-3">
              <div class="flex items-center gap-2">
                <div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
                  <div class="h-full bg-blue-600 rounded-full" style="width: 75%"></div>
                </div>
                <span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">75%</span>
              </div>
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
                High
              </span>
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Mobile App Development
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Jan 20, 2026
            </td>
            <td class="px-3">
              <div class="flex items-center gap-2">
                <div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
                  <div class="h-full bg-blue-600 rounded-full" style="width: 45%"></div>
                </div>
                <span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">45%</span>
              </div>
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
                Medium
              </span>
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Brand Identity
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Dec 01, 2025
            </td>
            <td class="px-3">
              <div class="flex items-center gap-2">
                <div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
                  <div class="h-full bg-green-600 rounded-full" style="width: 100%"></div>
                </div>
                <span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">100%</span>
              </div>
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
                Low
              </span>
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              E-commerce Platform
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Feb 28, 2026
            </td>
            <td class="px-3">
              <div class="flex items-center gap-2">
                <div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
                  <div class="h-full bg-blue-600 rounded-full" style="width: 20%"></div>
                </div>
                <span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">20%</span>
              </div>
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
                Medium
              </span>
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Marketing Campaign
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Dec 10, 2025
            </td>
            <td class="px-3">
              <div class="flex items-center gap-2">
                <div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
                  <div class="h-full bg-blue-600 rounded-full" style="width: 60%"></div>
                </div>
                <span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">60%</span>
              </div>
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
                High
              </span>
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              API Integration
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Jan 05, 2026
            </td>
            <td class="px-3">
              <div class="flex items-center gap-2">
                <div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
                  <div class="h-full bg-blue-600 rounded-full" style="width: 85%"></div>
                </div>
                <span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">85%</span>
              </div>
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
                Medium
              </span>
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Security Audit
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Dec 20, 2025
            </td>
            <td class="px-3">
              <div class="flex items-center gap-2">
                <div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
                  <div class="h-full bg-blue-600 rounded-full" style="width: 30%"></div>
                </div>
                <span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">30%</span>
              </div>
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 outline outline-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:outline-red-400/25">
                High
              </span>
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Documentation Update
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Dec 05, 2025
            </td>
            <td class="px-3">
              <div class="flex items-center gap-2">
                <div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
                  <div class="h-full bg-blue-600 rounded-full" style="width: 90%"></div>
                </div>
                <span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">90%</span>
              </div>
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
                Low
              </span>
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              Performance Optimization
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Jan 15, 2026
            </td>
            <td class="px-3">
              <div class="flex items-center gap-2">
                <div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
                  <div class="h-full bg-blue-600 rounded-full" style="width: 55%"></div>
                </div>
                <span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">55%</span>
              </div>
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 outline outline-yellow-700/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:outline-yellow-400/25">
                Medium
              </span>
            </td>
          </tr>
          <tr>
            <td class="pl-6 pr-3 text-sm font-medium text-neutral-900 dark:text-neutral-100">
              User Testing
            </td>
            <td class="px-3 text-sm text-neutral-500 dark:text-neutral-400">
              Dec 12, 2025
            </td>
            <td class="px-3">
              <div class="flex items-center gap-2">
                <div class="flex-1 h-2 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
                  <div class="h-full bg-blue-600 rounded-full" style="width: 40%"></div>
                </div>
                <span class="text-xs text-neutral-500 dark:text-neutral-400 min-w-[3ch]">40%</span>
              </div>
            </td>
            <td class="pl-3 pr-6">
              <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 outline outline-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:outline-green-400/25">
                Low
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
Tabs
Testimonial

Table of contents

Powered by

Tailwind CSS

Get notified when new components come out