Tables

Please read the official Bootstrap documentation for a full list of options.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

No wrap Dashkit only

Prevents table cell content from wrapping to another line

# First Last Handle Decription
1 Mark Otto @mdo Lorem ipsum dolor sit amet, consectetur adipisicing elit.
2 Jacob Thornton @fat Lorem ipsum dolor sit amet, consectetur adipisicing elit.
3 Larry the Bird @twitter Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<table class="table table-sm table-nowrap">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
      <th scope="col">Decription</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
    </tr>
  </tbody>
</table>

Sorting Dashkit only Plugin

Adds a sorting functionality to your tables powered by List.js. Please read the official plugin documentation for a full list of options or the lists section of the current documentation for custom initialization options.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="table-responsive" data-list='{"valueNames": ["tables-row", "tables-first", "tables-last", "tables-handle"]}'>
  <table class="table table-sm">
    <thead>
      <tr>
        <th scope="col">
          <a href="#" class="text-muted list-sort" data-sort="tables-row">#</a>
        </th>
        <th scope="col">
          <a href="#" class="text-muted list-sort" data-sort="tables-first">First</a>
        </th>
        <th scope="col">
          <a href="#" class="text-muted list-sort" data-sort="tables-last">Last</a>
        </th>
        <th scope="col">
          <a href="#" class="text-muted list-sort" data-sort="tables-handle">Handle</a>
        </th>
      </tr>
    </thead>
    <tbody class="list">
      <tr>
        <th scope="row" class="tables-row">1</th>
        <td class="tables-first">Mark</td>
        <td class="tables-last">Otto</td>
        <td class="tables-handle">@mdo</td>
      </tr>
      <tr>
        <th scope="row" class="tables-row">2</th>
        <td class="tables-first">Jacob</td>
        <td class="tables-last">Thornton</td>
        <td class="tables-handle">@fat</td>
      </tr>
      <tr>
        <th scope="row" class="tables-row">3</th>
        <td class="tables-first">Larry</td>
        <td class="tables-last">the Bird</td>
        <td class="tables-handle">@twitter</td>
      </tr>
    </tbody>
  </table>
</div>