SaladUI - Table

Table

Table component

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>

Open in playground

Your task list.
id	Title	Status	Action
1	Buy veg Pizzas	Green meal	Edit Delete
1	Buy 3 apples	Green meal	Edit Delete

<.table>
<.table_caption>Your task list.</.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 >
   <.table_cell class="font-medium">1</.table_cell>
   <.table_cell>Buy veg Pizzas</.table_cell>
   <.table_cell>Green meal</.table_cell>
   <.table_cell class="text-right">
     <.link
       navigate={"/content/post"}
       class="btn-action"
     >
        Edit
     </.link>

     <.link
       phx-click={JS.push("delete", value: %{id: 1})}
       data-confirm="Are you sure?"
       class="btn-action"
     >
        Delete
     </.link>
   </.table_cell>
 </.table_row>
 <.table_row >
   <.table_cell class="font-medium">1</.table_cell>
   <.table_cell>Buy 3 apples</.table_cell>
   <.table_cell>Green meal</.table_cell>
   <.table_cell class="text-right">
     <.link
       navigate={"/content/post"}
       class="btn-action"
     >
        Edit
     </.link>

     <.link
       phx-click={JS.push("delete", value: %{id: 2})}
       data-confirm="Are you sure?"
       class="btn-action"
     >
        Delete
     </.link>
   </.table_cell>
 </.table_row>
</.table_body>
</.table>