View Source Shino.UI.Table (shino v0.2.0-alpha.1)
Provides table related components.
Displays a responsive table.
Examples
A table for data:
<Table.root>
<Table.caption>A list of your recent invoices.</Table.caption>
<Table.header>
<Table.row>
<Table.head class="w-[100px]">Invoice</Table.head>
<Table.head>Status</Table.head>
<Table.head>Method</Table.head>
<Table.head class="text-right">Amount</Table.head>
</Table.row>
</Table.header>
<Table.body>
<Table.row>
<Table.cell class="font-medium">INV001</Table.cell>
<Table.cell>Paid</Table.cell>
<Table.cell>Credit Card</Table.cell>
<Table.cell class="text-right">$250.00</Table.cell>
</Table.row>
<Table.row>
<Table.cell class="font-medium">INV002</Table.cell>
<Table.cell>Pending</Table.cell>
<Table.cell>PayPal</Table.cell>
<Table.cell class="text-right">$150.00</Table.cell>
</Table.row>
</Table.body>
<Table.footer>
<Table.row>
<Table.cell colspan="3">Total</Table.cell>
<Table.cell class="text-right">$400.00</Table.cell>
</Table.row>
</Table.footer>
</Table.root>
A table for data and actions:
<Table.root>
<Table.caption>A list of your recent invoices.</Table.caption>
<Table.header>
<Table.row>
<Table.head class="w-[100px]">Invoice</Table.head>
<Table.head>Status</Table.head>
<Table.head>Method</Table.head>
<Table.head class="text-right">Amount</Table.head>
<Table.head><span class="sr-only">Actions</span></Table.head>
</Table.row>
</Table.header>
<Table.body>
<Table.row>
<Table.cell class="font-medium">INV001</Table.cell>
<Table.cell>Paid</Table.cell>
<Table.cell>Credit Card</Table.cell>
<Table.cell class="text-right">$250.00</Table.cell>
<Table.cell class="text-right">
<.link>Show</.link>
</Table.cell>
</Table.row>
<Table.row>
<Table.cell class="font-medium">INV002</Table.cell>
<Table.cell>Pending</Table.cell>
<Table.cell>PayPal</Table.cell>
<Table.cell class="text-right">$150.00</Table.cell>
<Table.cell class="text-right">
<.link>Show</.link>
</Table.cell>
</Table.row>
</Table.body>
<Table.footer>
<Table.row>
<Table.cell colspan="3">Total</Table.cell>
<Table.cell class="text-right">$400.00</Table.cell>
<Table.cell></Table.cell>
</Table.row>
</Table.footer>
</Table.root>
A table using stream:
<Table.root>
<Table.header>
<Table.row>
<Table.head class="w-[100px]">Invoice</Table.head>
<Table.head>Status</Table.head>
<Table.head>Method</Table.head>
<Table.head class="text-right">Amount</Table.head>
</Table.row>
</Table.header>
<Table.body id="invoices" phx-update="stream">
<Table.row :for={{id, invoice} <- @streams.invoices} id={id}>
<Table.cell class="font-medium"><%= id %></Table.cell>
<Table.cell><%= invoice.status %></Table.cell>
<Table.cell><%= invoice.method %></Table.cell>
<Table.cell class="text-right"><%= invoice.amount %></Table.cell>
</Table.row>
</Table.body>
</Table.root>
Notice the
id
andphx-update
attr on<Table.body />
, andid
attr on<Table.row />
.
References
Summary
Functions
Renders a table body.
Renders a table caption.
Renders a table cell.
Renders a table footer.
Renders a table head.
Renders a table header.
The root contains all the parts of a table.
Renders a table row.
Functions
Renders a table body.
Attributes
class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a table caption.
Attributes
class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a table cell.
Attributes
class
(:any
) - Defaults tonil
.- Global attributes are accepted. Supports all globals plus:
["colspan"]
.
Slots
inner_block
(required)
Renders a table head.
Attributes
class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a table header.
Attributes
class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
The root contains all the parts of a table.
Attributes
class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a table row.
Attributes
class
(:any
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)