Phoenix + DaisyUI

Table

Id name Job Favourite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
Attribute Type Documentation Default Value
id :string
class :any
container_element :boolean

whether to wrap the table in a div with overflow-x-auto class
true
sorted_columns :list

list of columns sorted by, each column is a tuple with the column key and direction, e.g. [{:id, :asc}, {:name, :desc}]

 Read more Read less
[]
rows :list
row_id :any

the function for generating the row id
row_click :any

the function for handling phx-click on each row
row_item :any

the function for mapping each row before calling the :col and :action slots
&Function.identity/1
target :string

the target for phx-click on header columns for sorting
event :string

the event name for phx-click on header columns for sorting
"sort"
zebra :boolean false
size :string
rest :global
col :slot
Show slot attributes Hide slot attributes
class :any
sort_key :any

the key for sorting the column when phx-click is triggered
collapse_breakpoint :string

the breakpoint for collapsing the column
label :string 
<:col :let={user} label="Id">
  <%= user.id %>
</:col>
<:col :let={user} label="name">
  <%= user.name %>
</:col>
<:col :let={user} label="Job">
  <%= user.job %>
</:col>
<:col :let={user} label="Favourite Color">
  <%= user.favourite_color %>
</:col>
action :slot

the slot for showing user actions in the last table column
inner_block :slot