Lesson 8: Tables

Tables in Bootstrap

Tables are actually not much different in Bootstrap. Their use has declined over the years since they are not used for layout anymore. So, Bootstrap focuses on what they were intended for: displaying tabular data. There is one addition to tables that may blow your mind....


A Standard Table

This lesson should be pretty simple. I mean, it's a table. All you need to know is the available options and how to modify them. This example is really a "kitchen sink" table. It applies the table class, applies borders with table-bordered, alternates row colors with table-striped, and applies a hover effect to the rows with table-hover. I have included the CSS style to customize the hover color since the stock effect uses the same gray as the alt table rows.

# First Last House Quidditch Wand Pet
1 Harry Potter Gryffindor Yes Holly Owl
2 Ron Weasley Gryffindor Yes Willow Owl
3 Hermione Granger Gryffindor No Vinewood Cat
4 Neville Longbottom Gryffindor No Cherry Toad
5 Seamus Finnigan Gryffindor No Unknown None
6 Dean Thomas Gryffindor No Unknown None
7 Draco Malfoy Slytherin Yes Hawthorn None
8 Vincent Crabbe Slytherin Yes Unknown None
9 Gregory Goyle Slytherin Yes Unknown None
10 Luna Lovegood Ravenclaw No Unknown None
11 Cho Chang Ravenclaw Yes Unknown None
12 Ernie MacMillan Hufflepuff No Unknown None
13 Hannah Abbott Hufflepuff No Unknown None


<style>
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #FF9001;
}
</style>

<table class="table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">House</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Harry</td>
      <td>Potter</td>
      <td>Gryffindor</td>
    </tr>
  </tbody>
</table>

Responsive Table

This one is a bit underwealming. I thought a "responive table" would scale as the screen shrinks but the way it works is to encapsulate the table in a box that allows the user to scroll around to see the info. It's not a super elegant solution, but it works without messing up the data display, which is a good thing.

# First Last House Quidditch Wand Pet
1 Harry Potter Gryffindor Yes Holly Owl
2 Ron Weasley Gryffindor Yes Willow Owl
3 Hermione Granger Gryffindor No Vinewood Cat
4 Neville Longbottom Gryffindor No Cherry Toad
5 Seamus Finnigan Gryffindor No Unknown None
6 Dean Thomas Gryffindor No Unknown None
7 Draco Malfoy Slytherin Yes Hawthorn None
8 Vincent Crabbe Slytherin Yes Unknown None
9 Gregory Goyle Slytherin Yes Unknown None
10 Luna Lovegood Ravenclaw No Unknown None
11 Cho Chang Ravenclaw Yes Unknown None
12 Ernie MacMillan Hufflepuff No Unknown None
13 Hannah Abbott Hufflepuff No Unknown None

making this happen is as easy as surrounding your table with a DIV set with the class table-responsive.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

The Filterable Table

This is the one that is likely to blow your mind. You can easily make it so users can filter a table by keyword. And I do mean easily....

# First Last House Quidditch Wand Pet
1 Harry Potter Gryffindor Yes Holly Owl
2 Ron Weasley Gryffindor Yes Willow Owl
3 Hermione Granger Gryffindor No Vinewood Cat
4 Neville Longbottom Gryffindor No Cherry Toad
5 Seamus Finnigan Gryffindor No Unknown None
6 Dean Thomas Gryffindor No Unknown None
7 Draco Malfoy Slytherin Yes Hawthorn None
8 Vincent Crabbe Slytherin Yes Unknown None
9 Gregory Goyle Slytherin Yes Unknown None
10 Luna Lovegood Ravenclaw No Unknown None
11 Cho Chang Ravenclaw Yes Unknown None
12 Ernie MacMillan Hufflepuff No Unknown None
13 Hannah Abbott Hufflepuff No Unknown None

This one is super easy too.

  1. Add an input field (no form tag needed) above your table with the ID set to "myInput".
  2. Set an ID of "theInfo" on the TBODY tag.
  3. Add the jQuery script into the right spot in your page....I like to put it at the bottom. Just make sure it is below the link to jQuery.
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#theInfo tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

<input class="form-control form-control-lg" id="myInput" type="text" placeholder="Filter...">

<table class="table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">House</th>
    </tr>
  </thead>
  <tbody id="theInfo">
    <tr>
      <th scope="row">1</th>
      <td>Harry</td>
      <td>Potter</td>
      <td>Gryffindor</td>
    </tr>
  </tbody>
</table>

That's really all there is to tables. They are coded the same way they always have been. There are a few more examples in the Bootstrap documentation.