Make a row in color with activeadmin

Question

I want to display a row in red on the index page if the model has :updated = true. How can i do that using activeadmin?

Thx

Answer 1

As of Active Admin 1.0.0pre1, it is possible to specify row class based on the properties of the record in that row. To assign a class to rows with updated records, you can write the following, supposing you have some update check function was_updated?:

app/admin/my_model.rb

ActiveAdmin.register MyModel do

    ...

    index(:row_class => -> record { 'my-class' if record.was_updated? }) do

      # whatever columns you want:
      # selectable_column
      # id_column
      # column :attribute
      # actions
    end

    ...

end

This new option is commented on in the source code for indexing as a table.

However, Active Admin's SCSS uses a lot of specificity when it dictates table row (or rather, table data) colors, making them impossible to override with custom colors by just writing .my-class { background-color: red; } in your stylesheet. I found the following to work, though:

app/assets/stylesheets/active_admin.css.scss

...

tr.odd, tr.even {
    &.my-class {
        td.col {
            background-color: red;
        }
    }
}

Answer 2

Table rendering for Active Admin is hardcored in ActiveAdmin::Views::TableFor as follows:

  def build_table_body
    @tbody = tbody do
      # Build enough rows for our collection
      @collection.each{|_| tr(:class => cycle('odd', 'even'), :id => dom_id(_)) }
    end
  end

So probably the easiest way is to monkeypatch that method. I don't see if subclassing can help.

Answer 3

If you just want something that is quick, and dispense of the need for monkeypatching Activeadmin, can't you just stick divs inside your table? Like f ex

table_for invoice.ccpayment do
  column 'Payments and payments attempts on this invoice: ' do |p|
    if p.paymentcomplete > 0
      div :class => 'green' do
        'Payment # '+p.id.to_s+' of '+p.currency.iso+' '+p.amount.to_s+' on '+p.created_at.to_s
      end
    else
      div :class => 'red' do
        'FAILED Payment # '+p.id.to_s+' of '+p.currency.iso+' '+p.amount.to_s+' on '+p.created_at.to_s
      end
    end
  end
end 

You can easily define those classes in 'activeadmin.css.scss'