Getting Started
Components

Table

Description

Create of organize your data in tables.

FREE
This component is available for free. It implements the Bootstrap Table component. See the installation instructions below for more details.

Arguments

Name Default Type Description
html_attributes {} Hash Any attributes for the used html wrapper tag

Examples

Default 

<% dataset = [
     {name: "John Doe", email: "john.doe@example.com", phone: "123 123456", website: "https://example.com"},
     {name: "Jane Doe", email: "jane.doe@example.com", phone: "123 123456", website: "https://example.com"}
   ] %>

<%= render Railsboot::TableComponent.new do |table| %>
  <% table.with_head.with_row do |row| %>
    <% row.with_cell(tag: "th").with_content("Name") %>
    <% row.with_cell(tag: "th").with_content("Email") %>
    <% row.with_cell(tag: "th").with_content("Phone") %>
    <% row.with_cell(tag: "th").with_content("Website") %>
  <% end %>
  <% table.with_body do |body| %>
    <% dataset.each do |data| %>
      <% body.with_row do |row| %>
        <% row.with_cell { link_to data[:name], nil } %>
        <% row.with_cell { data[:email] } %>
        <% row.with_cell { data[:phone] } %>
        <% row.with_cell { data[:website] } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
      <th>Website</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="/components/table">John Doe</a></td>
      <td>john.doe@example.com</td>
      <td>123 123456</td>
      <td>https://example.com</td>
    </tr>
    <tr>
      <td><a href="/components/table">Jane Doe</a></td>
      <td>jane.doe@example.com</td>
      <td>123 123456</td>
      <td>https://example.com</td>
    </tr>
  </tbody>
</table>

Slots

head Railsboot::TableComponent::HeadComponent

The thead of the table component.

Name Default Type Description
html_attributes {} Hash Any attributes for the used html wrapper tag
body Railsboot::TableComponent::BodyComponent

The tbody of the table component.

Name Default Type Description
html_attributes {} Hash Any attributes for the used html wrapper tag
row Railsboot::Table::RowComponent

A table row within either the head or body component.

Name Default Type Description
html_attributes {} Hash Any attributes for the used html wrapper tag
cell Railsboot::Table::CellComponent

A table cell within a table row component.

Name Default Type Description
tag td String Tag of the cell
Options: th, td
html_attributes {} Hash Any attributes for the used html wrapper tag

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

  • A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
  • A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
  • The desired component itself (app/components/railsboot/table_component.rb).
  • A view template (app/components/railsboot/table_component.html.erb) for the component unless it's rendered inline.
  • Any other dependent components such as Slots (just if the component needs those)
  • Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
  • A test file for the components (test/components/railsboot/table_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Stepper Table of Contents