Cinder / Playground
Docs GitHub

Playground

Explore Cinder's features with sample data from The Moonlit Emporium

▶ View the HEEx
Generated HEEx 
<Cinder.collection
  resource={CinderDemo.Catalog.Item}
  theme="daisy_ui"
  page_size={10}
  query_opts={[load: [:supplier, :tags]]}
  click={fn item -> JS.push("show_item", value: %{id: item.id}) end}
  selectable
>
  <:col :let={item} field="name" sort search>
    {item.name}
  </:col>
  <:col :let={item} field="price" filter 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" label="Supplier" sort search>
    {item.supplier && item.supplier.name}
  </:col>
  <:col :let={item} field="tags.name" label="Tags" filter={[type: :multi_select, options: @tag_options]}>
    <div class="flex gap-1 flex-wrap">
      <span :for={tag <- item.tags} class="badge badge-xs badge-outline">{tag.name}</span>
    </div>
  </:col>
  <:bulk_action
    action={:mark_in_stock}
    label="Mark In Stock ({count})"
    variant={:primary}
    confirm="Mark {count} items as in stock?"
  />

  <:bulk_action
    action={:mark_out_of_stock}
    label="Mark Out of Stock ({count})"
    variant={:danger}
    confirm="Mark {count} items as out of stock?"
  />
</Cinder.collection>
▶ View the Schema 
defmodule Item do
  use Ash.Resource #, ...

  attributes do
    attribute :name, :string
    attribute :price, :decimal
    attribute :rarity, Rarity
    attribute :in_stock, :boolean
  end

  relationships do
    belongs_to :supplier, Supplier
    has_many :variants, Variant
    many_to_many :tags, Tag, through: ItemTag
  end

  aggregates do
    count :variant_count, :variants
  end
end
defmodule Supplier do
  use Ash.Resource #, ...

  attributes do
    attribute :name, :string
  end
end
defmodule Tag do
  use Ash.Resource #, ...

  attributes do
    attribute :name, :string
  end
end
defmodule Rarity do
  use Ash.Type.Enum,
    values: [:common, :uncommon, :rare, :legendary]
end
Filters
to
Name
Price
Rarity
In Stock
Supplier
Tags
Loading...