Table(ui_table)Ui Bibz Logo

UiBibz::Ui::Ux::Tables::Table

The table component is a html table with a store.
An pagination and/or a search can be added before or after the component with these methods:

  • ui_table_pagination_pagination
  • ui_table_pagination_per_page
  • ui_table_search_field

The pagination is managed through the gem will_paginate.
The methods of will_paginate work with the table component such as per_page .

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

# by variable
ui_table options, html_options

# or by block tapped
ui_table options, html_options do |t|
  t.columns do |cls|
    cls.column data_index, options, html_options
  end
  t.actions do |acs|
    acs.link content, options, html_options
  end
end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • actionable[boolean]
  • bordered[boolean]
  • breakpoint[symbol](:sm, :md, :lg, :xl, :xxl)Need option responsive: true to work
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • default_actions[boolean]
  • hoverable[boolean]
  • responsive[boolean]Generate a div wrapper for a responsive table
  • sortable[boolean]
  • store[object]Required
  • target[string](use component stimulus-options method)
  • thead[hash](status: [:inverse || :default])
  • turbo[string](use component turbo method)

Items

The allowed items for this component are:

Examples

Some examples explain how to use the options present in the component.

Model

You must include UiBibz Searchable Concern and list searchable fields through searchable_attributes method. Insert in the model the following line :

class User < ActiveRecord::Base
  include UiBibz::Concerns::Models::Searchable
  ...
  # in User table
  searchable_attributes :email, :name
  # or in join table
  searchable_attributes :name, company: :email
  # or in join table with multi columns
  searchable_attributes :name, company: [:email, :active]
  # or with build column with :as argument
  searchable_attributes :name, company: :email, as: :mybuildcolumn
  ...
end

Controller

Use the method in your model table_search_pagination passing arguments :

  • params
  • session
  • opts (optional)
class UserController < ApplicationController
  def index
    @users = User.table_search_pagination(params, session, opts)
    ...
  end
  ...
end

View

The columns are all displayed by default and the default actions are:

  • show
  • edit
  • delete
IdEmailActiveCompanyCreated AtUpdated At
6test5@test.comtrueCompany test 2382017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Show Edit Delete
5test4@test.comtrueCompany test 37762017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Show Edit Delete
4test3@test.comtrueCompany test 22462017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Show Edit Delete
3test2@test.comtrueCompany test 91862017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Show Edit Delete
2test1@test.comtrueCompany test 25532017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Show Edit Delete
1test0@test.comtrueCompany test 77362017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Show Edit Delete
ui_table store: @users

<table class="table">
  <thead>
    <tr>
      <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=id&amp;direction=asc&amp;sort=users.id">Id</a>
      </th>
        <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=email&amp;direction=asc&amp;sort=users.email">Email</a>
      </th>
      <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=active&amp;direction=asc&amp;sort=users.active">Active</a>
     </th>
     <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=company&amp;direction=asc&amp;sort=users.company">Company</a>
     </th>
     <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=created_at&amp;direction=asc&amp;sort=users.created_at">Created At</a>
     </th>
     <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=updated_at&amp;direction=asc&amp;sort=users.updated_at">Updated At</a>
     </th>
     <th class="action">
     </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>test0@test.com</td>
      <td>true</td>
      <td>Company test 6646</td>
      <td>2015-09-04 08:24:05 UTC</td>
      <td>2015-09-04 08:24:05 UTC</td>
      <td>
        <div class="dropdown-action btn-group dropdown" role="group">
          <button class="btn btn-primary btn-xs dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="glyph fa fa-ellipsis-v fa-fw"></i> Actions <span class="caret"></span></button>
          <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#show"><i class="glyph fa fa-eye"></i> Show</a>
            <a class="dropdown-item" href="#show"><i class="glyph fa fa-pencil-alt"></i> Edit</a>
            <a class="dropdown-item" data-confirm="Are you sure?" href="#show"><i class="glyph fa fa-trash"></i> Delete</a>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>test1@test.com</td>
      <td>true</td>
      <td>Company test 266</td>
      <td>2015-09-04 08:24:05 UTC</td>
      <td>2015-09-04 08:24:05 UTC</td>
      <td>
        <div class="dropdown-action btn-group dropdown" role="group">
          <button class="btn btn-primary btn-xs dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="glyph fa fa-ellipsis-v fa-fw"></i> Actions <span class="caret"></span>
          </button>
          <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#show"><i class="glyph fa fa-eye"></i> Show</a>
            <a class="dropdown-item" href="#show"><i class="glyph fa fa-pencil-alt"></i> Edit</a>
            <a class="dropdown-item" data-confirm="Are you sure?" href="#show"><i class="glyph fa fa-trash"></i> Delete</a>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
Documentation

Table Blocks

ui_table has several blocks:

  • columns
  • actions

Table Columns

Adding columns through the column method contains several arguments and this method is based on the component :

  • data_index[symbol]
  • html_options[hash]
  • options[hash]
    • as[symbol](:boolean, :progress, :input)
    • column_id[symbol]Identify column
    • costum_sort[string]Identify column
    • count[boolean]Use the count method on the element
    • date_format[string]Format the date display using the strftime method ex: `%Y/%M/%D`
    • format[lambda]To format each results
    • hidden[boolean]
    • input_options[hash]Options of input
    • link[string]add a link where the expression `:id` is parsed and replaced with the corresponding integer
    • name[string]The name of the column
    • progress_options[hash]Options of progress bar
    • sort[string]
IdEmailActiveCompanyUpdated AtCreated At
6test5@test.comcompany 6
14.0%
13/22/2017
Show Edit Delete
5test4@test.comcompany 5
4.0%
13/22/2017
Show Edit Delete
4test3@test.comcompany 4
68.0%
13/22/2017
Show Edit Delete
3test2@test.comcompany 3
62.0%
13/22/2017
Show Edit Delete
2test1@test.comcompany 2
26.0%
13/22/2017
Show Edit Delete
1test0@test.comcompany 1
57.0%
13/22/2017
Show Edit Delete
ui_table(store: @users) do |b|
  b.columns do |cls|
    cls.column :id, name: '#'
    cls.column :email, link: '#email'
    cls.column :active, as: :boolean
    cls.column :company, format: lambda { |records, record| "company #{ record.id }" }
    cls.column :progress, as: :progress, progress_options: { statuses: true }
    cls.column :created_at, date_format: '%d/%M/%Y'
  end
end


<table class="table">
  <thead>
    <tr>
      <th><a class="dropup" href="/components/tables/table?column_id=id&amp;direction=asc&amp;link_type=column&amp;sort=users.id">#</a></th>
      <th><a class="dropup" href="/components/tables/table?column_id=email&amp;direction=asc&amp;link_type=column&amp;sort=users.email">Email</a></th>
      <th><a class="dropup" href="/components/tables/table?column_id=active&amp;direction=asc&amp;link_type=column&amp;sort=users.active">Active</a></th>
      <th><a class="dropup" href="/components/tables/table?column_id=company&amp;direction=asc&amp;link_type=column&amp;sort=users.company">Company</a></th>
      <th><a class="dropup" href="/components/tables/table?column_id=updated_at&amp;direction=asc&amp;link_type=column&amp;sort=users.updated_at">Progress</a></th>
      <th><a class="dropup" href="/components/tables/table?column_id=created_at&amp;direction=asc&amp;link_type=column&amp;sort=users.created_at">Created At</a></th>
      <th class="action"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a href="#email">test0@test.com</a></td>
      <td><svg class="svg-inline--fa fa-check-circle fa-w-16 glyph-success glyph" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg><!-- <i class="glyph-success glyph fas fa-check-circle"></i> --></td>
      <td>company 1</td>
      <td><div class="progress"><div class="bg-info progress-bar" aria-valuenow="40.0" aria-valuemin="0" aria-valuemax="100" style="width: 40.0%" role="progressbar">40.0%</div></div></td>
      <td>13/22/2017</td>
      <td><div class="dropdown-action dropdown"><button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-12372"><svg class="svg-inline--fa fa-ellipsis-v fa-w-6 glyph fa-fw" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ellipsis-v" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512" data-fa-i2svg=""><path fill="currentColor" d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"></path></svg><!-- <i class="glyph fas fa-ellipsis-v fa-fw"></i> -->  Actions</button><div class="dropdown-menu dropdown-menu-right" arial-labelledby="dropdown-12372"><a class="dropdown-item" href="#show"><svg class="svg-inline--fa fa-eye fa-w-18 glyph" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"></path></svg><!-- <i class="glyph fas fa-eye"></i> -->  Show</a><a class="dropdown-item" href="#show"><svg class="svg-inline--fa fa-pencil-alt fa-w-16 glyph" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pencil-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"></path></svg><!-- <i class="glyph fas fa-pencil-alt"></i> -->  Edit</a><a class="dropdown-item" data-confirm="Are you sure?" href="#show"><svg class="svg-inline--fa fa-trash fa-w-14 glyph" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path></svg><!-- <i class="glyph fas fa-trash"></i> -->  Delete</a></div></div></td></tr>
                    <tr><td>2</td>
      <td><a href="#email">test1@test.com</a></td>
      <td><svg class="svg-inline--fa fa-check-circle fa-w-16 glyph-success glyph" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg><!-- <i class="glyph-success glyph fas fa-check-circle"></i> --></td>
      <td>company 2</td>
      <td><div class="progress"><div class="bg-success progress-bar" aria-valuenow="14.0" aria-valuemin="0" aria-valuemax="100" style="width: 14.0%" role="progressbar">14.0%</div></div></td>
      <td>13/22/2017</td>
      <td><div class="dropdown-action dropdown"><button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-29114"><svg class="svg-inline--fa fa-ellipsis-v fa-w-6 glyph fa-fw" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ellipsis-v" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512" data-fa-i2svg=""><path fill="currentColor" d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"></path></svg><!-- <i class="glyph fas fa-ellipsis-v fa-fw"></i> -->  Actions</button><div class="dropdown-menu dropdown-menu-right" arial-labelledby="dropdown-29114"><a class="dropdown-item" href="#show"><svg class="svg-inline--fa fa-eye fa-w-18 glyph" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"></path></svg><!-- <i class="glyph fas fa-eye"></i> -->  Show</a><a class="dropdown-item" href="#show"><svg class="svg-inline--fa fa-pencil-alt fa-w-16 glyph" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pencil-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"></path></svg><!-- <i class="glyph fas fa-pencil-alt"></i> -->  Edit</a><a class="dropdown-item" data-confirm="Are you sure?" href="#show"><svg class="svg-inline--fa fa-trash fa-w-14 glyph" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path></svg><!-- <i class="glyph fas fa-trash"></i> -->  Delete</a></div></div></td></tr>
                    <tr><td>3</td>
      <td><a href="#email">test2@test.com</a></td>
      <td><svg class="svg-inline--fa fa-check-circle fa-w-16 glyph-success glyph" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg><!-- <i class="glyph-success glyph fas fa-check-circle"></i> --></td>
      <td>company 3</td>
      <td><div class="progress"><div class="bg-success progress-bar" aria-valuenow="19.0" aria-valuemin="0" aria-valuemax="100" style="width: 19.0%" role="progressbar">19.0%</div></div></td>
      <td>13/22/2017</td>
      <td><div class="dropdown-action dropdown"><button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-67087"><svg class="svg-inline--fa fa-ellipsis-v fa-w-6 glyph fa-fw" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ellipsis-v" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512" data-fa-i2svg=""><path fill="currentColor" d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"></path></svg><!-- <i class="glyph fas fa-ellipsis-v fa-fw"></i> -->  Actions</button><div class="dropdown-menu dropdown-menu-right" arial-labelledby="dropdown-67087"><a class="dropdown-item" href="#show"><svg class="svg-inline--fa fa-eye fa-w-18 glyph" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"></path></svg><!-- <i class="glyph fas fa-eye"></i> -->  Show</a><a class="dropdown-item" href="#show"><svg class="svg-inline--fa fa-pencil-alt fa-w-16 glyph" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pencil-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"></path></svg><!-- <i class="glyph fas fa-pencil-alt"></i> -->  Edit</a><a class="dropdown-item" data-confirm="Are you sure?" href="#show"><svg class="svg-inline--fa fa-trash fa-w-14 glyph" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path></svg><!-- <i class="glyph fas fa-trash"></i> -->  Delete</a></div></div></td>
    </tr>
  </tbody>
</table>
Documentation

Table Actions

The shares are included in a dropdown button. These shares inherit the DropdownLink component and provides the following methods :

If no action is added, actions by defaults are displayed. You can activate them through the default_actions: false.
The link option can inject the id of the record by writing in your url: user_path(:id).

IdEmailActiveCompanyCreated AtUpdated At
6test5@test.comtrueCompany test 2382017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Open Close
Delete
5test4@test.comtrueCompany test 37762017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Open Close
Delete
4test3@test.comtrueCompany test 22462017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Open Close
Delete
3test2@test.comtrueCompany test 91862017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Open Close
Delete
2test1@test.comtrueCompany test 25532017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Open Close
Delete
1test0@test.comtrueCompany test 77362017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Open Close
Delete
ui_table(store: @users) do |b|
  b.actions do |acs|
    acs.link 'Open', url: open_user_path(:id), glyph: 'folder-open'
    acs.link 'Close', url: close_user_path(:id), glyph: 'folder'
    acs.link 'Delete', url: user_path(:id), glyph: 'trash',  link_html_options: { data: { confirm: 'Are you sure?' }}
  end
end

<table class="table">
  <thead>
    <tr>
      <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=id&amp;direction=asc&amp;sort=users.id">#</a>
      </th>
      <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=email&amp;direction=asc&amp;sort=users.email">Email</a>
      </th>
      <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=active&amp;direction=asc&amp;sort=users.active">Active</a>
      </th>
      <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=company&amp;direction=asc&amp;sort=users.company">Company</a>
      </th>
      <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=created_at&amp;direction=asc&amp;sort=users.created_at">Created At</a>
      </th>
      <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=updated_at&amp;direction=asc&amp;sort=users.updated_at">Updated At</a>
      </th>
      <th class="action"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
    <td>1</td>
    <td><a href="#email">test0@test.com</a></td>
    <td><i class="glyph-success glyph fa fa-check-circle"></i></td>
    <td>Company test 6646</td>
    <td>04/24/2015</td>
    <td>2015-09-04 08:24:05 UTC</td>
    <td>
      <div class="dropdown-action btn-group dropdown" role="group">
        <button class="btn btn-primary btn-xs dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="glyph fa fa-ellipsis-v fa-fw"></i> Actions <span class="caret"></span>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#open"><i class="glyph fa fa-folder-open"></i> Open</a>
          <a class="dropdown-item" href="#close"><i class="glyph fa fa-folder"></i> Close</a>
          <a class="dropdown-item" data-confirm="Are you sure?" href="#delete"><i class="glyph fa fa-trash"></i> Delete</a>
        </div>
      </div>
    </td>
    </tr>
  </tbody>
</table>
Documentation

Actions can be formatted according to each line.
With the format method you have access to the record to format the desired action.

IdEmailActiveCompanyCreated AtUpdated At
6test5@test.comtrueCompany test 2382017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Show Edit Delete Active
5test4@test.comtrueCompany test 37762017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Show Edit Delete Active
4test3@test.comtrueCompany test 22462017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Show Edit Delete Active
3test2@test.comtrueCompany test 91862017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Show Edit Delete Active
2test1@test.comtrueCompany test 25532017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Show Edit Delete Active
1test0@test.comtrueCompany test 77362017-03-13 14:22:07 UTC2017-03-13 14:22:07 UTC
Show Edit Delete Active
ui_table(store: @users) do |b|
  b.actions do |acs|
    acs.format do |record|
      acs.link 'Show', url: user_path(:id), glyph: 'eye'
      acs.link 'Edit', url: edit_user_path(:id), glyph: 'pencil-alt'
      acs.link 'Delete', url: user_path(:id), glyph: 'trash',  link_html_options: { data: { confirm: 'Are you sure?' }}
      if record.active?
        acs.link 'Active', { url: active_users_path(record.id) }
      else
        acs.link 'Disabled', { url: disabled_users_path(record.id) }
      end
    end
  end
end

<table class="table">
  <thead>
    <tr>
      <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=id&amp;direction=asc&amp;sort=users.id">#</a>
      </th>
      <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=email&amp;direction=asc&amp;sort=users.email">Email</a>
      </th>
      <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=active&amp;direction=asc&amp;sort=users.active">Active</a>
      </th>
      <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=company&amp;direction=asc&amp;sort=users.company">Company</a>
      </th>
      <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=created_at&amp;direction=asc&amp;sort=users.created_at">Created At</a>
      </th>
      <th>
        <a class="dropup" href="/components/tables?action=tables&amp;column_id=updated_at&amp;direction=asc&amp;sort=users.updated_at">Updated At</a>
      </th>
      <th class="action"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a href="#email">test0@test.com</a></td>
      <td><i class="glyph-success glyph fa fa-check-circle"></i></td>
      <td>Company test 6646</td>
      <td>04/24/2015</td>
      <td>2015-09-04 08:24:05 UTC</td>
      <td>
        <div class="dropdown-action btn-group dropdown" role="group">
          <button class="btn btn-primary btn-xs dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="glyph fa fa-ellipsis-v fa-fw"></i> Actions <span class="caret"></span>
          </button>
          <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#show"><i class="glyph fa fa-eye"></i> Show</a>
            <a class="dropdown-item" href="#show"><i class="glyph fa fa-pencil-alt"></i> Edit</a>
            <a class="dropdown-item" data-confirm="Are you sure?" href="#show"><i class="glyph fa fa-trash"></i> Delete</a>
            <a class="dropdown-item" href="#active"><i class="glyph fa fa-check-circle"></i> Active</a>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
Documentation

Table Search component

This component is linked with ui_table component.


ui_table_search_field store: @users

<form class="form-table-search-field" action="/components/tables" accept-charset="UTF-8" method="get">
  <input name="utf8" type="hidden" value="✓">
  <div class="input-group input-group-sm ui_table-search-field">
    <span class="input-group-addon"><i class="glyph fa fa-search"></i></span>
    <input type="hidden" name="only_path" value="true">
    <input type="search" name="search" class="form-control" placeholder="Search by Name...">
    <span class="input-group-btn">
      <button type="button" class="btn btn-secondary"><i class="glyph fa fa-times-circle"></i></button>
    </span>
  </div>
</form>
Documentation

Table Pagination component

This component is linked with ui_table component.

ui_table_pagination store: @users

<ul class="pagination pagination">
  <li class="prev disabled"><span>← Previous</span></li>
  <li class="active"><span>1</span></li>
  <li><a rel="next" href="/components/tables?page=2">2</a></li>
  <li><a href="/components/tables?page=3">3</a></li>
  <li><a href="/components/tables?page=4">4</a></li>
  <li><a href="/components/tables?page=5">5</a></li>
  <li><a href="/components/tables?page=6">6</a></li>
  <li><a href="/components/tables?page=7">7</a></li>
  <li><a href="/components/tables?page=8">8</a></li>
  <li><a href="/components/tables?page=9">9</a></li> <li class="disabled"><span>…</span></li>
  <li><a href="/components/tables?page=49">49</a></li>
  <li><a href="/components/tables?page=50">50</a></li>
  <li class="next"><a rel="next" href="/components/tables?page=2">Next →</a></li>
</ul>
Documentation

Table Pagination per page component

This component is linked with ui_table component.

Displaying all 6 User | Per page: 
ui_table_pagination_per_page store: @users

<form action="/components/tables" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
  <div class="table-pagination-per-page">Displaying User <b>1&nbsp;-&nbsp;3</b> of <b>150</b> in total | Per page:
    <input type="hidden" name="only_path" value="true">
    <select name="per_page" id="per_page" class="form-control">
      <option value="5">5</option>
      <option value="10">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option value="50">50</option>
      <option value="100">100</option>
      <option value="200">200</option>
      <option value="500">500</option>
   </select>
  </div>
</form>
Documentation

Controller arguments

If we wish, for example, count users who have no direct link with the documents. Imagine, for example, a user with products and that these products contain several documents. We wish to count the number of users by documents. We can add arguments in the method table_search_pagination that will help to make joints.

Arguments  = { sortable: {
  column: 'users',
  count:  true,
  joins: "LEFT OUTER JOIN documents_products ON documents_products.document_id = documents.id
          LEFT OUTER JOIN products ON products.id = documents_products.product_id
          LEFT OUTER JOIN products_users ON products_users.product_id = products.id
          LEFT OUTER JOIN users ON users.id = products_users.user_id"
} }
@documents = Document.includes(:users).table_search_pagination(params, session, arguments)

Here the sortable argument means that one wishes to interresser the sorting functionality. For that it is necessary :

  • define the name of the column sorted through the argument column (String)
  • determine whether the treatment is done on counting with the count argument (Boolean)
  • define the join along with the argument (String , Array , Hash)
ui_table store: @documents do |g|
  g.columns do |c|
    c.column :users, { name: 'Users count', count: true, custom_sort: true }
  end
end