active_element

0.0.13
Light Mode Dark Mode

Collection Table

The Collection Table component provides a vertical table containing a collection of items. Use with Active Record model instances, an array of objects that extend ActiveModel::Naming, or simple hash-like objects.

Field types are automatically inferred from their respective database columns and rendered using an appropriate formatter.

Pagination (provided by Kaminari) is enabled by default for larger collections.

See the full keyword argument specification for information on the various available options.

collection = [
  User.new(name: 'John', email: 'john@example.com', enabled: true),
  User.new(name: 'Jane', email: 'jane@example.org', enabled: false),
  User.new(name: 'Peter', email: 'peter@example.org', enabled: false),
  User.new(name: 'Sally', email: 'sally@example.org', enabled: true)
]

subject do
  active_element.component.table collection: collection,
                                 fields: [:name, :email, :enabled],
                                 show: true,
                                 new: true,
                                 edit: true,
                                 destroy: true
end

it { is_expected.to include 'John' }
<a data-confirm-action="false" class="btn btn-primary new-button action-button float-end mb-3" title="Create New User" href="/users/new">
  <span class="text-nowrap">
    <span class="button-title">Create New User</span>
  </span>
</a>
<div class="page-description p-2 fst-italic">
  Displaying 4 results
</div>
<table class="users table" style="">
  <thead>
    <tr>
      <th class="text-nowrap">
        Name
      </th>
      <th class="text-nowrap">
        Email
      </th>
      <th class="text-nowrap">
        Enabled
      </th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr class="even ">
      <td class="align-middle users-name">
        <span class="name">
          John
        </span>
      </td>
      <td class="align-middle users-email">
        john@example.com
      </td>
      <td class="align-middle users-enabled">
        <span class="text-success">
          <i class="fa-solid fa-fw fa-check"></i>
          Yes
        </span>
      </td>
      <td class="users-show action-column text-end">
        <a data-confirm-action="false" class="btn btn-primary show-button action-button  btn-sm" title="View" href="/user/">
          <span class="text-nowrap">
            <i class="fa-solid fa-eye"></i>
            <span class="button-title">View</span>
          </span>
        </a>
      </td>
      <td class="users-edit action-column text-end">
        <a data-confirm-action="false" class="btn btn-primary edit-button action-button  btn-sm" title="Edit" href="/user//edit">
          <span class="text-nowrap">
            <i class="fa-solid fa-pen"></i>
            <span class="button-title">Edit</span>
          </span>
        </a>
      </td>
      <td class="users-destroy action-column text-end">
        <a data-confirm-action="true" class="btn btn-danger destroy-button action-button  btn-sm" title="Delete" rel="nofollow" data-method="delete" href="/user/">
          <span class="text-nowrap">
            <i class="fa-solid fa-square-xmark"></i>
            <span class="button-title">Delete</span>
          </span>
        </a>
      </td>
    </tr>
    <tr class="odd ">
      <td class="align-middle users-name">
        <span class="name">
          Jane
        </span>
      </td>
      <td class="align-middle users-email">
        jane@example.org
      </td>
      <td class="align-middle users-enabled">
        <span class="text-danger">
          <i class="fa-solid fa-fw fa-xmark"></i>
          No
        </span>
      </td>
      <td class="users-show action-column text-end">
        <a data-confirm-action="false" class="btn btn-primary show-button action-button  btn-sm" title="View" href="/user/">
          <span class="text-nowrap">
            <i class="fa-solid fa-eye"></i>
            <span class="button-title">View</span>
          </span>
        </a>
      </td>
      <td class="users-edit action-column text-end">
        <a data-confirm-action="false" class="btn btn-primary edit-button action-button  btn-sm" title="Edit" href="/user//edit">
          <span class="text-nowrap">
            <i class="fa-solid fa-pen"></i>
            <span class="button-title">Edit</span>
          </span>
        </a>
      </td>
      <td class="users-destroy action-column text-end">
        <a data-confirm-action="true" class="btn btn-danger destroy-button action-button  btn-sm" title="Delete" rel="nofollow" data-method="delete" href="/user/">
          <span class="text-nowrap">
            <i class="fa-solid fa-square-xmark"></i>
            <span class="button-title">Delete</span>
          </span>
        </a>
      </td>
    </tr>
    <tr class="even ">
      <td class="align-middle users-name">
        <span class="name">
          Peter
        </span>
      </td>
      <td class="align-middle users-email">
        peter@example.org
      </td>
      <td class="align-middle users-enabled">
        <span class="text-danger">
          <i class="fa-solid fa-fw fa-xmark"></i>
          No
        </span>
      </td>
      <td class="users-show action-column text-end">
        <a data-confirm-action="false" class="btn btn-primary show-button action-button  btn-sm" title="View" href="/user/">
          <span class="text-nowrap">
            <i class="fa-solid fa-eye"></i>
            <span class="button-title">View</span>
          </span>
        </a>
      </td>
      <td class="users-edit action-column text-end">
        <a data-confirm-action="false" class="btn btn-primary edit-button action-button  btn-sm" title="Edit" href="/user//edit">
          <span class="text-nowrap">
            <i class="fa-solid fa-pen"></i>
            <span class="button-title">Edit</span>
          </span>
        </a>
      </td>
      <td class="users-destroy action-column text-end">
        <a data-confirm-action="true" class="btn btn-danger destroy-button action-button  btn-sm" title="Delete" rel="nofollow" data-method="delete" href="/user/">
          <span class="text-nowrap">
            <i class="fa-solid fa-square-xmark"></i>
            <span class="button-title">Delete</span>
          </span>
        </a>
      </td>
    </tr>
    <tr class="odd ">
      <td class="align-middle users-name">
        <span class="name">
          Sally
        </span>
      </td>
      <td class="align-middle users-email">
        sally@example.org
      </td>
      <td class="align-middle users-enabled">
        <span class="text-success">
          <i class="fa-solid fa-fw fa-check"></i>
          Yes
        </span>
      </td>
      <td class="users-show action-column text-end">
        <a data-confirm-action="false" class="btn btn-primary show-button action-button  btn-sm" title="View" href="/user/">
          <span class="text-nowrap">
            <i class="fa-solid fa-eye"></i>
            <span class="button-title">View</span>
          </span>
        </a>
      </td>
      <td class="users-edit action-column text-end">
        <a data-confirm-action="false" class="btn btn-primary edit-button action-button  btn-sm" title="Edit" href="/user//edit">
          <span class="text-nowrap">
            <i class="fa-solid fa-pen"></i>
            <span class="button-title">Edit</span>
          </span>
        </a>
      </td>
      <td class="users-destroy action-column text-end">
        <a data-confirm-action="true" class="btn btn-danger destroy-button action-button  btn-sm" title="Delete" rel="nofollow" data-method="delete" href="/user/">
          <span class="text-nowrap">
            <i class="fa-solid fa-square-xmark"></i>
            <span class="button-title">Delete</span>
          </span>
        </a>
      </td>
    </tr>
  </tbody>
</table>
Create New User
Displaying 4 results
Name Email Enabled      
John john@example.com Yes View Edit Delete
Jane jane@example.org No View Edit Delete
Peter peter@example.org No View Edit Delete
Sally sally@example.org Yes View Edit Delete
Documentation generated by rspec-documentation