Table

Table component

Read more Read less

Examples:

<.table>

 <.table_caption>A list of your recent invoices.</.table_caption>
 <.table_header>
   <.table_row>
     <.table_head class="w-[100px]">id</.table_head>
     <.table_head>Title</.table_head>
     <.table_head>Status</.table_head>
     <.table_head class="text-right">action</.table_head>
   </.table_row>
 </.table_header>
 <.table_body>
   <.table_row :for={{id, entry} <- @streams.content_entries} id={id}>
     <.table_cell class="font-medium"><%= id %></.table_cell>
     <.table_cell><%= entry.title %></.table_cell>
     <.table_cell><%= entry.project_id %></.table_cell>
     <.table_cell class="text-right">
       <.link
         navigate={scoped_path(assigns, "/content/#{@content_type.key}/#{entry.id}")}
         class="btn-action"
       >
         <Heroicons.pencil_square class="w-4 h-4" /> Edit
       </.link>
       <.link
         phx-click={JS.push("delete", value: %{id: entry.id})}
         data-confirm="Are you sure?"
         class="btn-action"
       >
         <Heroicons.x_mark class="w-4 h-4 text-error" /> Delete
       </.link>
     </.table_cell>
   </.table_row>
 </.table_body>
</.table>
Your task list.
id Title Status Action
1 Buy veg Pizzas Green meal Edit Delete
1 Buy 3 apples Green meal Edit Delete
Attribute Type Documentation Default Value
class :string
rest :global
Required inner_block * :slot