Tables

Tables

Standard Sortable Table with Title

Company First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table with Hover Rows

Company First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Standard Sortable Table with Scrollable Content

Company First Name Last Name Username Numeric First Name Last Name Username Company First Name Last Name Username
1 Mark Otto @mdo 172,345 Mark Otto @mdo 1 Mark Otto @mdo
2 Jacob Thornton @fat 28,963,004 Jacob Thornton @fat 2 Jacob Thornton @fat
3 Larry the Bird @twitter 38,345,100 Larry the Bird @twitter 3 Larry the Bird @twitter
1 Mark Otto @mdo 3,245 Mark Otto @mdo 1 Mark Otto @mdo
2 Jacob Thornton @fat 21,963,046 Jacob Thornton @fat 2 Jacob Thornton @fat
3 Larry the Bird @twitter 52,345,197 Larry the Bird @twitter 3 Larry the Bird @twitter
1 Mark Otto @mdo 572,375 Mark Otto @mdo 1 Mark Otto @mdo
2 Jacob Thornton @fat 1,963,789 Jacob Thornton @fat 2 Jacob Thornton @fat
3 Larry the Bird @twitter 907,345,623 Larry the Bird @twitter 3 Larry the Bird @twitter

Standard Table with Colored Rows

Company First Name Last Name Username
1 Mark Otto @mdo
1 Mark Otto @mdo
2 Jacob Thornton @fat
2 Jacob Thornton @fat
3 Larry the Bird @twitter
3 Larry the Bird @twitter
1 Mark Otto @mdo
1 Mark Otto @mdo
2 Jacob Thornton @fat
2 Jacob Thornton @fat
Note: D&B's tables follow the same convention as outlined on Bootstrap's website: http://getbootstrap.com/css/#tables. However, the DataTables jQuery plugin is used in this example to create the functionality. If you choose not to use DataTables, you will need to use the classes added by DataTables to achieve the same styling.
<div class="panel">
  <div class="panel-heading">
    <h3 class="panel-title">Standard Sortable Table with Title</h3>
  </div>
  <div class="panel-body panel-table">
    <table id="exampleTable1" class="table">
      ...           
    </table>
  </div>  <!-- /.panel-table -->
</div>  <!-- /.panel -->

<div class="panel">
  <div class="panel-heading">
    <h3 class="panel-title">Table with Hover Rows</h3>
  </div>
  <div class="panel-body panel-table">
    <table  id="exampleTable2" class="table table-hover">
      ...           
    </table>
  </div>  <!-- /.panel-table -->
</div>  <!-- /.panel -->

<div class="panel">
  <div class="panel-heading">
    <h3 class="panel-title">Standard Sortable Table with Scrollable Content</h3>
  </div>
  <div class="panel-body panel-table">
    <table id="exampleTable3" class="table">
      ...           
    </table>
  </div>  <!-- /.panel-table -->
</div>  <!-- /.panel -->

<div class="panel">
  <div class="panel-heading">
    <h3 class="panel-title">Standard Table with Colored Rows</h3>
  </div>
  <div class="panel-body panel-table">
    <table id="exampleTable4" class="table">
      ...           
    </table>
  </div>  <!-- /.panel-table -->
</div>  <!-- /.panel -->
filed under: