defmodule RiverConnectWeb.Components.UI.Table do
@moduledoc """
Implementation of table components from https://ui.shadcn.com/docs/components/table
with proper ARIA attributes for accessibility.
## Examples:
<.table aria-label="Invoices">
<.table_caption>A list of your recent invoices.
<.table_header>
<.table_row>
<.table_head class="w-[100px]">Invoice
<.table_head>Status
<.table_head>Method
<.table_head class="text-right">Amount
<.table_body>
<.table_row :for={invoice <- @invoices}>
<.table_cell class="font-medium"><%= invoice.number %>
<.table_cell><%= invoice.status %>
<.table_cell><%= invoice.method %>
<.table_cell class="text-right"><%= invoice.amount %>
"""
use RiverConnectWeb.Components.UI, :component
@doc """
Renders a data table.
## Attributes
* `:class` - Additional CSS classes for the table
* `:aria-label` - Accessible name for the table when no caption is present
* `:aria-describedby` - ID of an element that describes the table
"""
attr :class, :string, default: nil
attr :"aria-label", :string, default: nil
attr :"aria-describedby", :string, default: nil
attr :rest, :global
slot :inner_block, required: true
def table(assigns) do
~H"""
{render_slot(@inner_block)}
"""
end
@doc """
Renders the table header container.
"""
attr :class, :string, default: nil
attr :rest, :global
slot :inner_block, required: true
def table_header(assigns) do
~H"""
{render_slot(@inner_block)}
"""
end
@doc """
Renders a table row.
## Attributes
* `:class` - Additional CSS classes
* `:aria-rowindex` - Numeric index of the row
"""
attr :class, :string, default: nil
attr :"aria-rowindex", :integer, default: nil
attr :rest, :global
slot :inner_block, required: true
def table_row(assigns) do
~H"""
{render_slot(@inner_block)}
"""
end
@doc """
Renders a table column header.
## Attributes
* `:class` - Additional CSS classes
* `:scope` - Scope of the header cell (default: "col")
* `:aria-sort` - Sort direction for screen readers (ascending, descending, or none)
"""
attr :class, :string, default: nil
attr :scope, :string, default: "col"
attr :"aria-sort", :string, default: nil
attr :rest, :global
slot :inner_block, required: true
def table_head(assigns) do
~H"""
{render_slot(@inner_block)}
|
"""
end
@doc """
Renders the table body.
"""
attr :class, :string, default: nil
attr :rest, :global
slot :inner_block, required: true
def table_body(assigns) do
~H"""
{render_slot(@inner_block)}
"""
end
@doc """
Renders a table data cell.
## Attributes
* `:class` - Additional CSS classes
"""
attr :class, :any, default: nil
attr :rest, :global
slot :inner_block, required: true
def table_cell(assigns) do
~H"""
{render_slot(@inner_block)}
|
"""
end
@doc """
Renders a table footer.
"""
attr :class, :string, default: nil
attr :rest, :global, include: ~w(disabled form name value)
slot :inner_block, required: true
def table_footer(assigns) do
~H"""
tr]:last:border-b-0",
@class
])
}
{@rest}
>
{render_slot(@inner_block)}
"""
end
@doc """
Renders a table caption.
A caption provides an accessible name for the table.
"""
attr :class, :string, default: nil
attr :rest, :global
slot :inner_block, required: true
def table_caption(assigns) do
~H"""
{render_slot(@inner_block)}
"""
end
end