Table
Data table with sorting and pagination
Preview
Name | Role | |
---|---|---|
John Doe | john@example.com | Admin |
Jane Smith | jane@example.com | User |
Props Editor
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