Docs

Cinder UI

GitHub Hex
Original shadcn/ui docs ↗

DataDisplay.table

Server-rendered

Table wrapper with overflow container.

Minimal

heex title="Minimal table" <.table> <.table_header> <.table_row> <.table_head>Name</.table_head> </.table_row> </.table_header> </.table>

Service status table

Active deployments across environments.
Service Status Latency
API Healthy 82ms
Worker Degraded 164ms 
  <.table>
  <.table_caption>Active deployments across environments.</.table_caption>
  <.table_header>
    <.table_row>
      <.table_head>Service</.table_head>
      <.table_head>Status</.table_head>
      <.table_head class="text-right">Latency</.table_head>
    </.table_row>
  </.table_header>
  <.table_body>
    <.table_row>
      <.table_cell>API</.table_cell>
      <.table_cell>Healthy</.table_cell>
      <.table_cell class="text-right">82ms</.table_cell>
    </.table_row>
    <.table_row>
      <.table_cell>Worker</.table_cell>
      <.table_cell>Degraded</.table_cell>
      <.table_cell class="text-right">164ms</.table_cell>
    </.table_row>
  </.table_body>
</.table>

Invoice summary table

Invoice State Amount
INV-001 Paid $120.00
INV-002 Pending $48.00
Total $168.00 
  <.table>
  <.table_header>
    <.table_row>
      <.table_head>Invoice</.table_head>
      <.table_head>State</.table_head>
      <.table_head class="text-right">Amount</.table_head>
    </.table_row>
  </.table_header>
  <.table_body>
    <.table_row>
      <.table_cell>INV-001</.table_cell>
      <.table_cell>Paid</.table_cell>
      <.table_cell class="text-right">$120.00</.table_cell>
    </.table_row>
    <.table_row state="selected">
      <.table_cell>INV-002</.table_cell>
      <.table_cell>Pending</.table_cell>
      <.table_cell class="text-right">$48.00</.table_cell>
    </.table_row>
  </.table_body>
  <.table_footer>
    <.table_row>
      <.table_cell class="font-medium" colspan="2">Total</.table_cell>
      <.table_cell class="text-right font-medium">$168.00</.table_cell>
    </.table_row>
  </.table_footer>
</.table>

Minimal table

Name 
  <.table>
  <.table_header>
    <.table_row>
      <.table_head>Name</.table_head>
    </.table_row>
  </.table_header>
</.table>

Attributes

Name Type Default Values Global Includes
class :string — — —
rest :global — — —

Slots

Slot Slot Attributes
inner_block Required —