Tables

All Boostrap classes for tables are supported and improved.

Examples

Simple Table with Actions

# Name Job Position Since Salary Actions
1 Andrew Mike Develop 2013 € 99,225
2 John Doe Design 2012 € 89,241
3 Alex Mike Design 2010 € 92,144 
<table class="table">
    <thead>
        <tr>
            <th class="text-center">#</th>
            <th>Name</th>
            <th>Job Position</th>
            <th>Since</th>
            <th class="text-right">Salary</th>
            <th class="text-right">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">1</td>
            <td>Andrew Mike</td>
            <td>Develop</td>
            <td>2013</td>
            <td class="text-right">&euro; 99,225</td>
            <td class="td-actions text-right">
              <button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm " data-original-title="" title="">
                <i class="tim-icons icon-single-02"></i>
              </button>
              <button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm " data-original-title="" title="">
                <i class="tim-icons icon-settings"></i>
              </button>
              <button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm " data-original-title="" title="">
                <i class="tim-icons icon-simple-remove"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">2</td>
            <td>John Doe</td>
            <td>Design</td>
            <td>2012</td>
            <td class="text-right">&euro; 89,241</td>
            <td class="td-actions text-right">
              <button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm " data-original-title="" title="">
                <i class="tim-icons icon-single-02"></i>
              </button>
              <button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm " data-original-title="" title="">
                <i class="tim-icons icon-settings"></i>
              </button>
              <button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm " data-original-title="" title="">
                <i class="tim-icons icon-simple-remove"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td class="text-center">3</td>
            <td>Alex Mike</td>
            <td>Design</td>
            <td>2010</td>
            <td class="text-right">&euro; 92,144</td>
            <td class="td-actions text-right">
              <button type="button" rel="tooltip" class="btn btn-info btn-icon btn-sm btn-simple" data-original-title="" title="">
                <i class="tim-icons icon-single-02"></i>
              </button>
              <button type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm btn-simple" data-original-title="" title="">
                <i class="tim-icons icon-settings"></i>
              </button>
              <button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm btn-simple" data-original-title="" title="">
                <i class="tim-icons icon-simple-remove"></i>
                </button>
            </td>
        </tr>
    </tbody>
</table>

Shopping Cart Table

Product Color Size Price Qty Amount
...
Spring Jacket
by Dolce&Gabbana 		Red M €549 1
€549 
<div class="table-responsive">
  <table class="table table-shopping">
      <thead>
          <tr>
              <th class="text-center"></th>
              <th>Product</th>
              <th class="th-description">Color</th>
              <th class="th-description">Size</th>
              <th class="text-right">Price</th>
              <th class="text-right">Qty</th>
              <th class="text-right">Amount</th>
              <th></th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>
                  <div class="img-container">
                      <img src="https://images.thenorthface.com/is/image/TheNorthFace/NF0A2VFL_619_hero" alt="...">
                  </div>
              </td>
              <td class="td-name">
                  <a href="#jacket">Spring Jacket</a>
                  <br><small>by Dolce&amp;Gabbana</small>
              </td>
              <td>
                  Red
              </td>
              <td>
                  M
              </td>
              <td class="td-number">
                  <small>&#x20AC;</small>549
              </td>
              <td class="td-number">
                  1
                  <div class="btn-group">
                      <button class="btn btn-info btn-sm"> <i class="tim-icons icon-simple-delete"></i> </button>
                      <button class="btn btn-info btn-sm"> <i class="tim-icons icon-simple-add"></i> </button>
                  </div>
              </td>
              <td class="td-number">
                  <small>&#x20AC;</small>549
              </td>
              <td class="td-actions">
                  <button type="button" rel="tooltip" data-placement="left" title="Remove item" class="btn btn-icon btn-simple btn-info">
                      <i class="tim-icons icon-simple-remove"></i>
                  </button>
              </td>
          </tr>
      </tbody>
  </table>
</div>