PhxAdmin v0.9.1 PhxAdmin.Index

Override the default index page for an PhxAdmin resource

By default, PhxAdmin renders the index table without any additional configuration. It renders each column in the model, except the id, inserted_at, and updated_at columns.

Default Table Type

PhxAdmin displays a selection checkbox column on the left with a batch action control that enables when a checkbox is selected.

To customize the index page, use the index macro.

For example, the following will show on the id an name fields, as well place a selection column and batch actions row on the page:

defmodule MyProject.PhxAdmin.MyModel do
  use PhxAdmin.Register
  register_resource MyProject.MyModel do

    index do
      selectable_column()

      column :id
      column :name
      actions       # display the default actions column
    end
  end
end

Image fields

For image fields, use the image: true option. For example:

index do
  column :name
  column :image, [image: true, height: 100], &(ExAdminDemo.Image.url({&1.image, &1}, :thumb))
end

Custom columns

Columns can be customized with column/2 where the second argument is an anonymous function called with model. Here are a couple examples:

index do
  column :id
  column :name, fn(category) ->
    Phoenix.HTML.Tag.content_tag :span, category.name,
      "data-id": category.id, class: "category"
  end
  column "Created", fn(category) ->
    category.created_at
  end
end

Override the Actions column

The Actions column can be customized by adding column "Actions", fn(x) -> ...

column "Actions", fn(r) ->
  safe_concat link_to("Restore", "/admin/backuprestores/restore/#{r.id}", "data-method": :put,
      "data-confirm": "You are about to restore #{r.file_name}. Are you sure?",
      class: "member_link restore-link"),
    link_to("Delete", "/admin/backuprestores/#{r.id}", "data-method": :delete,
      "data-confirm": "Are you sure you want to delete this?",
      class: "member_link")
end

Associations

By default, PhxAdmin will attempt to render a belongs_to association with a select control, using name field in the association. If you would like to render an association with another field name, or would like to use more than one field, use the :field option.

column :account, fields: [:username]

Change the column label

Use the :label option to override the column name:

column :name, label: "Custom Name"

As Grid

By providing option as: :grid to the index macro, a grid index page is rendered.

For Example:

index as: :grid, default: true do
  cell fn(p) ->
    markup do
      div do
        a href: admin_resource_path(p, :show) do
          img(src: ExAdminDemo.Image.url({p.image_file_name, p}, :thumb), height: 100)
        end
      end
      a truncate(p.title), href: admin_resource_path(p, :show)
    end
  end
end

Summary

Functions

Build the filter link

Build the order link

Build the scope link

Macros

Define which actions will be displayed in the index view

Define a grid cell for grid view

The index macro is used to customize the index page of a resource

Add a column of selection check boxes

Functions

build_filter_href(href, q)

Build the filter link.

build_order_href(href, arg2)

Build the order link.

build_scope_href(href, scope)

Build the scope link.

Macros

actions(opts \\ [])

Define which actions will be displayed in the index view.

Examples

actions
actions [:new, :delete]
cell(fun)

Define a grid cell for grid view.

Example

index as: :grid, default: true, columns: 6 do
  import Kernel, except: [div: 2]
  cell fn(p) ->
    div ".box" do
      div ".box-body" do
        a href: admin_resource_path(p, :show) do
          img(src: ExAdminDemo.Image.url({p.image_file_name, p}, :thumb), height: 100)
        end
      end
      div ".box-footer" do
        a truncate(p.title), href: admin_resource_path(p, :show)
      end
    end
  end
end
index(opts \\ [], list)

The index macro is used to customize the index page of a resource.

selectable_column()

Add a column of selection check boxes

Allows users to select individual rows on the index page. Selecting columns activates the batch actions button.