Table Edit

<% @tracks = [
  {title: "Total Eclipse of the Heart", artist: "Bonnie Tyler"},
  {title: "I Will Always Love You", artist: "Whitney Houston"},
  {title: "I Wanna Dance with Somebody", artist: "Whitney Houston"},
  {title: "I Will Survive", artist: "Gloria Gaynor"},
  {title: "My Heart Will Go On", artist: "Celine Dion"},
] %>

<%= render_table do %>
  <%= table_head do %>
    <%= table_header "", class: "w-1" %>
    <%= table_header class: "" do %>
      Title
    <% end %>
    <%= table_header "Artist" %>
  <% end %>
  <%= table_body do %>
    <% @tracks.each.with_index do |track, i| %>
      <%= table_row do %>
        <%= table_column do %>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round"
              stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <polygon points="10 8 16 12 10 16 10 8"></polygon>
          </svg>
        <% end %>
        <%= table_column do %>
          <%= track[:title] %>
        <% end %>
        <%= table_column track[:artist] %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Installation

  rails generate shadcn-ui table

Usage

<%= render_table do %>
  <%= table_head do %>
    <%= table_header %>
    <%= table_header %>
  <% end %>
  <%= table_body do %>
    <%= table_row do %>
      <%= table_column %>
      <%= table_column %>
    <% end %>
  <% end %>
<% end %>

The Table component introduces:

• app/helpers/components/table_helper.rb

The table component is so far unique in that it is entirely provided by app/helpers/components/table_helper.rb. This helper introduces methods that rely on content_tag to create the markup for the table. To edit anything about the rendered table, look there.

app/helpers/components/table_helper.rb introduces the following methods that can be used to create a table.

• render_table accepts an optional caption as the first argument along with the block for the rest of the table components.
• table_head accepts a block for the content of the thead row.
• table_header accepts the header content inline or in a block. This will be rendered within the thead for that column.
• table_body accepts a block for the content of the tbody.
• table_row accepts a block for the content of the tr.
• table_column accepts the column content inline or in a block. This will be rendered within the td for the column.