GroupCollect 1.3.142

Table Card

The mobile version of a table row.

Read more Read less

Supports an optional 3 dot ‘actions’ menu, and an optional ‘Control’ button.

The default value for ‘button’ is false.

Examples

<.table_card title="Medieval Times Dinner & Tournament">
  <:item label="Subdomain">
    medievaltimes2345
  </:item>
  <.p>A basic table card with a title.</.p>
</.table_card>

<.table_card title="Medieval Times Dinner & Tournament">
  <:item label="Subdomain">
    medievaltimes2345
  </:item>
  <:button on_click={JS.push(...)}>Control</:button>
</.table_card>

<.table_card title="Medieval Times Dinner & Tournament">
  <:item label="Subdomain">
    medievaltimes2345
  </:item>
  <:action on_click={JS.push(...)}>Action 1</:action>
  <:button on_click={JS.push(...)}>Control</:button>
</.table_card>
A plain card with no actions Open in playground

Medieval Times Dinner & Tournament

Subdomain

medievaltimes2345 

<.table_card id="table-card-default-plain" title="Medieval Times Dinner & Tournament">
  <:item label="Subdomain">
    medievaltimes2345
  </:item>
</.table_card>
A card with an action menu Open in playground 
<.table_card
  id="table-card-action-menu-action-menu"
  title="Tim Horton's"
  navigate="/visual_tests/buttons/a"
>
  <:item label="Subdomain">
    timhortons
  </:item>
  <:action on_click={JS.toggle(to: "#action-menu .table-card-click-demo")}>Action 1</:action>
</.table_card>
A card with an action menu and title chip Open in playground 
<.table_card
  id="table-card-action-menu-and-title-chip-action-menu-and-title-chip"
  title="Tim Horton's"
  navigate="/visual_tests/buttons/a"
>
  <:title_chip>Ops member</:title_chip>
  <:item label="Subdomain">
    timhortons
  </:item>
  <:action on_click={JS.toggle(to: "#action-menu .table-card-click-demo")}>Action 1</:action>
</.table_card>
<.table_card
  id="table-card-action-menu-and-title-chip-with-long-title-and-title-chip"
  title="Really really long Itinerary_Bay Haven Charter Academy 5th Grade 2026"
  navigate="/visual_tests/buttons/a"
>
  <:title_chip>Ops member</:title_chip>
  <:item label="Subdomain">
    timhortons
  </:item>
  <:action on_click={JS.toggle(to: "#action-menu .table-card-click-demo")}>Action 1</:action>
</.table_card>
A card with a control button Open in playground

Subdomain

subway 

<.table_card
  id="table-card-control-control"
  title="Subway"
  navigate="/visual_tests/buttons/a"
>
  <:item label="Subdomain">
    subway
  </:item>
  <:button on_click={JS.toggle(to: "#control .table-card-click-demo")}>Control</:button>
</.table_card>
A card with an action menu and control button Open in playground 
<.table_card
  id="table-card-action-control-action-control"
  title="Disney World"
  navigate="/visual_tests/buttons/a"
>
  <:item label="Subdomain">
    disneyworld
  </:item>
  <:action on_click={JS.toggle(to: "#action-control .table-card-click-demo")}>Action 1</:action>
  <:button on_click={JS.toggle(to: "#action-control .table-card-click-demo")}>Control</:button>
</.table_card>