Tables

Striped Table

Title	Title	Title	Title
This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information

= ui.nfg :table, :striped do
  = render partial: 'elements/tables/table_body', locals: { lots_of_data: false }

<table class="table table-striped">
  <thead>
    <tr>
      <th>Title</th>
      <th>Title</th>
      <th>Title</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
    </tr>
    <tr>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
    </tr>
    <tr>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
    </tr>
  </tbody>
</table>

Bordered Table

Note: "borderless" is not the opposite of a bordered table. Bordered, when false, adds no modifier class to the table.

Title	Title	Title	Title
This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information

= ui.nfg :table, :bordered do
  = render partial: 'elements/tables/table_body', locals: { lots_of_data: false }



Title
Title
Title
Title




This is information
This is information
This is information
This is information


This is information
This is information
This is information
This is information


This is information
This is information
This is information
This is information

<h1>Tables</h1>
<h3>Striped Table</h3>
<table class="table table-striped">
  <thead>
    <tr>
      <th>Title</th>
      <th>Title</th>
      <th>Title</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
    </tr>
    <tr>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
    </tr>
    <tr>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
    </tr>
  </tbody>
</table>
<div class='row'>
  <div class='col-md-6'>
    <pre><code>= ui.nfg :table, :striped do&#x000A;  = render partial: 'elements/tables/table_body', locals: { lots_of_data: false }</code></pre>
  </div>
  <div class='col-md-6'>
    <pre><code>&lt;table class=&quot;table table-striped&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Title&lt;/th&gt;
      &lt;th&gt;Title&lt;/th&gt;
      &lt;th&gt;Title&lt;/th&gt;
      &lt;th&gt;Title&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;This is information&lt;/td&gt;
      &lt;td&gt;This is information&lt;/td&gt;
      &lt;td&gt;This is information&lt;/td&gt;
      &lt;td&gt;This is information&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;This is information&lt;/td&gt;
      &lt;td&gt;This is information&lt;/td&gt;
      &lt;td&gt;This is information&lt;/td&gt;
      &lt;td&gt;This is information&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;This is information&lt;/td&gt;
      &lt;td&gt;This is information&lt;/td&gt;
      &lt;td&gt;This is information&lt;/td&gt;
      &lt;td&gt;This is information&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
  </div>
</div>
<hr>
<h3>Bordered Table</h3>
<p>Note: "borderless" is not the opposite of a bordered table. Bordered, when false, adds no modifier class to the table.</p>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>Title</th>
      <th>Title</th>
      <th>Title</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
    </tr>
    <tr>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
    </tr>
    <tr>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
    </tr>
  </tbody>
</table>
<div class='row'>
  <div class='col-md-6'>
    <pre><code>= ui.nfg :table, :bordered do&#x000A;  = render partial: 'elements/tables/table_body', locals: { lots_of_data: false }</code></pre>
  </div>
  <div class='col-md-6'>
    <pre><code>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>Title</th>
              <th>Title</th>
              <th>Title</th>
              <th>Title</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>This is information</td>
              <td>This is information</td>
              <td>This is information</td>
              <td>This is information</td>
            </tr>
            <tr>
              <td>This is information</td>
              <td>This is information</td>
              <td>This is information</td>
              <td>This is information</td>
            </tr>
            <tr>
              <td>This is information</td>
              <td>This is information</td>
              <td>This is information</td>
              <td>This is information</td>
            </tr>
          </tbody>
        </table>

Responsive Tables

<< Scroll left and right to see all data >>

Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title
This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information

= ui.nfg :table, :responsive do
  = render partial: 'elements/tables/table_body', locals: { lots_of_data: true }

<p class="mb-1 text-right text-muted font-size-sm">&lt;&lt; Scroll left and right to see all data &gt;&gt;</p>
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
      </tr>
      <tr>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
      </tr>
      <tr>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
      </tr>
      <tr>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
      </tr>
    </tbody>
  </table>
</div>

Responsive Table with custom caption:

caption: 'Custom caption'

Custom caption

Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title
This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information

= ui.nfg :table, :responsive, caption: 'Custom caption' do
  = render partial: 'elements/tables/table_body', locals: { lots_of_data: true }

<p class="mb-1 text-right text-muted font-size-sm">Custom caption</p>
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
      </tr>
      <tr>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
      </tr>
      <tr>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
      </tr>
      <tr>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
      </tr>
    </tbody>
  </table>
</div>

Responsive Table with caption turned off:

caption: nil || false

Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title	Title
This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information	This is information

= ui.nfg :table, :responsive, caption: nil do
  = render partial: 'elements/tables/table_body', locals: { lots_of_data: true }

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
      </tr>
      <tr>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
      </tr>
      <tr>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
      </tr>
      <tr>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
        <td>This is information</td>
      </tr>
    </tbody>
  </table>
</div>

Sizable tables

Tables are either their default size or made `:sm`

Title	Title	Title	Title
This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information
This is information	This is information	This is information	This is information

= ui.nfg :table, :sm do
  = render partial: 'elements/tables/table_body', locals: { lots_of_data: false }

<table class="table table-sm">
  <thead>
    <tr>
      <th>Title</th>
      <th>Title</th>
      <th>Title</th>
      <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
    </tr>
    <tr>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
    </tr>
    <tr>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
      <td>This is information</td>
    </tr>
  </tbody>
</table>