Playground

<Cinder.collection
  resource={CinderDemo.Catalog.Item}
  layout={:table}
  theme="daisy_ui"
  page_size={10}
  query_opts={[load: [:supplier]]}
  click={fn item -> JS.push("show_item", value: %{id: item.id}) end}
>
  <:col :let={item} field="name" sort search>
    {item.name}
  </:col>
  <:col :let={item} field="category" filter sort>
    <.category_badge category={item.category} />
  </:col>
  <:col :let={item} field="price" sort>
    {"$#{item.price}"}
  </:col>
  <:col :let={item} field="rarity" filter sort>
    <.rarity_badge rarity={item.rarity} />
  </:col>
  <:col :let={item} field="in_stock" filter={[type: :checkbox]}>
    {if item.in_stock, do: "Yes", else: "No"}
  </:col>
  <:col :let={item} field="supplier.name" sort search>
    {item.supplier && item.supplier.name}
  </:col>
</Cinder.collection>