active_element

0.0.13
Light Mode Dark Mode

Tables

An interface for creating tables is provided by active_element.component.table, available in all views.

The two table types provided are Collection Table and Item Table.

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

Basic Example

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