View Source Shino.UI.Table (shino v0.1.1-alpha.0)

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 and phx-update attr on <Table.body />, and id 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 (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a table caption.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a table cell.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["colspan"].

Slots

  • inner_block (required)

Renders a table footer.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a table head.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a table header.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

The root contains all the parts of a table.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a table row.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)