Packages
phoenix_webcomponent
3.2.1
3.2.4
3.2.3
3.2.2
3.2.1
3.2.0
3.1.5
3.1.4
3.1.3
3.1.2
3.1.1
3.1.0
2.8.0
2.7.0
2.6.0
2.5.4
2.5.3
2.5.2
2.5.1
2.5.0
2.4.0
2.3.6
2.3.5
2.3.4
2.3.3
2.3.2
2.3.1
2.2.3
2.2.2
2.2.1
2.2.0
2.1.4
2.1.3
2.1.2
2.1.1
2.1.0
2.0.0
1.6.3
1.6.2
1.6.1
1.6.0
1.5.1
1.5.0
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.0
1.1.1
1.1.0
1.0.0
1.0.0-beta.4
1.0.0-beta.3
1.0.0-beta.2
0.0.0
Phoenix view functions for working with WebComponent
Current section
Files
Jump to
Current section
Files
lib/phoenix_webcomponent/table.ex
defmodule Phoenix.WebComponent.Table do
@moduledoc """
Render table.
"""
use Phoenix.WebComponent, :html
@doc """
Generates a table.
## Examples
```heex
<.wc_table rows={[
%{
name: "Shmi Skywalker",
portrayal: "Pernilla August (Episodes I-II)"
},
%{
name: "Luke Skywalker",
portrayal: "Mark Hamill (Episodes IV-IX, The Mandalorian, The Book of Boba Fett)"}
]}>
<:col let={r} label="Name">
<%= r.name %>
</:col>
<:col let={r} label="Portrayal">
<%= r.portrayal %>
</:col>
</.wc_table>
```
"""
@doc type: :component
attr(:id, :any,
default: false,
doc: """
html attribute id
"""
)
attr(:class, :any,
default: "",
doc: """
html attribute class
"""
)
attr(:rows, :list,
default: [],
doc: """
table data list
"""
)
slot(:col,
required: false,
doc: """
render a column of table.
Example
```heex
<:col let={r} label="Name">
<%= r.name %>
</:col>
```
"""
) do
attr(:label, :string, doc: "table column title")
end
def wc_table(assigns) do
~H"""
<table
id={@id}
class={[
"table-fixed border-collapse border-spacing-0",
@class,
]}
>
<thead>
<tr class="bg-slate-100 h-[34px]">
<th
:for={col <- @col}
class="px-4 py-2 slate-700 text-left font-medium"
><%= col.label %></th>
</tr>
</thead>
<tbody>
<tr
:for={row <- @rows}
class={"bg-slate-50 even:bg-white h-[40px]"}
>
<td
:for={col <- @col}
class="px-4 py-2"
><%= render_slot(col, row) %></td>
</tr>
</tbody>
</table>
"""
end
end