<.table id="table-single-default" rows={[%{fruit: "Apple", id: 1, price: 99, quantity: 4}, %{fruit: "Banana", id: 2, price: 199, quantity: 6}, %{fruit: "Orange", id: 3, price: 123, quantity: 1}]}>
  <:col :let={entry} label="Fruit">
    <%= entry.fruit %>
  </:col>
  <:col :let={entry} label="Price">
    <%= entry.price / 100 %>$
  </:col>
  <:col :let={entry} label="Quantity">
    <%= entry.quantity %>
  </:col>
</.table>

<.table id="table-single-striped-rows" rows={[%{fruit: "Apple", id: 1, price: 99, quantity: 4}, %{fruit: "Banana", id: 2, price: 199, quantity: 6}, %{fruit: "Orange", id: 3, price: 123, quantity: 1}]} striped="rows">
  <:col :let={entry} label="Fruit">
    <%= entry.fruit %>
  </:col>
  <:col :let={entry} label="Price">
    <%= entry.price / 100 %>$
  </:col>
  <:col :let={entry} label="Quantity">
    <%= entry.quantity %>
  </:col>
</.table>

<.table id="table-single-striped-cols" rows={[%{fruit: "Apple", id: 1, price: 99, quantity: 4}, %{fruit: "Banana", id: 2, price: 199, quantity: 6}, %{fruit: "Orange", id: 3, price: 123, quantity: 1}]} striped="cols">
  <:col :let={entry} label="Fruit">
    <%= entry.fruit %>
  </:col>
  <:col :let={entry} label="Price">
    <%= entry.price / 100 %>$
  </:col>
  <:col :let={entry} label="Quantity">
    <%= entry.quantity %>
  </:col>
</.table>

<.table hover id="table-single-hover" rows={[%{fruit: "Apple", id: 1, price: 99, quantity: 4}, %{fruit: "Banana", id: 2, price: 199, quantity: 6}, %{fruit: "Orange", id: 3, price: 123, quantity: 1}]}>
  <:col :let={entry} label="Fruit">
    <%= entry.fruit %>
  </:col>
  <:col :let={entry} label="Price">
    <%= entry.price / 100 %>$
  </:col>
  <:col :let={entry} label="Quantity">
    <%= entry.quantity %>
  </:col>
</.table>