Table

A responsive table with header, body, footer, and caption sub-components.

A list of recent invoices.
Invoice	Status	Method	Amount
INV-001	Paid	Credit Card	$250.00
INV-002	Pending	PayPal	$150.00
INV-003	Unpaid	Bank Transfer	$350.00
Total			$750.00

<.table></.table>

Examples

Invoices

A table with header, body, footer, and caption.

A list of recent invoices.
Invoice	Status	Method	Amount
INV-001	Paid	Credit Card	$250.00
INV-002	Pending	PayPal	$150.00
INV-003	Unpaid	Bank Transfer	$350.00
Total			$750.00

<.table>
  <.table_caption>A list of 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">INV-001</.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">INV-002</.table_cell>
      <.table_cell>Pending</.table_cell>
      <.table_cell>PayPal</.table_cell>
      <.table_cell class="text-right">$150.00</.table_cell>
    </.table_row>
    <.table_row>
      <.table_cell class="font-medium">INV-003</.table_cell>
      <.table_cell>Unpaid</.table_cell>
      <.table_cell>Bank Transfer</.table_cell>
      <.table_cell class="text-right">$350.00</.table_cell>
    </.table_row>
  </.table_body>
  <.table_footer>
    <.table_row>
      <.table_cell colspan="3">Total</.table_cell>
      <.table_cell class="text-right">$750.00</.table_cell>
    </.table_row>
  </.table_footer>
</.table>

Show code

Props

Name	Type	Default	Values
class	:string
rest	:global
inner_block (slot)	:slot