Table

Data table with sorting and pagination

Preview

Name Email Role
John Doe john@example.com Admin
Jane Smith jane@example.com User

Props Editor

✅ JSON is valid - Click "Preview Update" to see changes

Source Code

defmodule FeenixUiWeb.Components.TableComponent do
  use Phoenix.Component

  def render(assigns) do
    assigns = assign_new(assigns, :headers, fn -> [] end)
    assigns = assign_new(assigns, :rows, fn -> [] end)

    ~H"""
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <%= for header <- @headers do %>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                <%= header %>
              </th>
            <% end %>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          <%= for row <- @rows do %>
            <tr class="hover:bg-gray-50">
              <%= for cell <- row do %>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                  <%= cell %>
                </td>
              <% end %>
            </tr>
          <% end %>
        </tbody>
      </table>
    </div>
    """
  end
end