active_element

0.0.13
Light Mode Dark Mode

Inline Decorators

In most use cases it is recommended to use View Decorators to render custom data to provide reusable and composable view fragments without polluting component definitions with custom logic.

However, if you need a simple one-off data transformation when using a Table, you can specify a Proc within the table fields definition by using the secondary form of passing an Array of [Symbol, Hash] instead of just a Symbol for any given field.

The Proc will receive the current record (i.e. the object for the current row of a collection with a Collection Table or the item with an Item Table).

collection = [
  User.new(name: 'John Smith', email: 'john@example.com'),
  User.new(name: 'Sally Anderson', email: 'sally@example.org')
]
subject do
  active_element.component.table collection: collection,
                                 fields: [
                                   :email,
                                   [:name, { mapper: ->(record) { record.name.upcase } }]
                                 ]
end

it { is_expected.to include 'JOHN SMITH' }
it { is_expected.to include 'SALLY ANDERSON' }
<div class="page-description p-2 fst-italic">
  Displaying 2 results
</div>
<table class="users table" style="">
  <thead>
    <tr>
      <th class="text-nowrap">
        Email
      </th>
      <th class="text-nowrap">
        Name
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="even ">
      <td class="align-middle users-email">
        john@example.com
      </td>
      <td class="align-middle users-name">
        JOHN SMITH
      </td>
    </tr>
    <tr class="odd ">
      <td class="align-middle users-email">
        sally@example.org
      </td>
      <td class="align-middle users-name">
        SALLY ANDERSON
      </td>
    </tr>
  </tbody>
</table>
Displaying 2 results
Email Name
john@example.com JOHN SMITH
sally@example.org SALLY ANDERSON
Documentation generated by rspec-documentation