Documentation v8.1.1

Preview Downloads Purchase

Overview

Metronic extends Bootstrap Tablesto provide wider variants for multi-purpose usage as static tables or tables integrated with Datatablesas well.

Basic

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500

<div class="table-responsive">
 <table class="table">
  <thead>
   <tr class="fw-bold fs-6 text-gray-800">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>

Cell Spacing

To control cell paddings easily, Bootstrap Guttersclasses .g-* , .gy-* and .gx-* can be used. Use .gs-*to set padding left to the first cell and padding right to the last cell in the row.

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500

<div class="table-responsive">
 <table class="table gs-7 gy-7 gx-7">
  <thead>
   <tr class="fw-semibold fs-6 text-gray-800 border-bottom border-gray-200">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>

Border Styling

Use .table-row-bordered or .table-row-dashed class to set border bottom style row cells. To change the row border color .table-row-gray-{100-900} classes can be used.

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500

<div class="py-5">
 <div class="table-responsive">
  <table class="table table-row-dashed table-row-gray-300 gy-7">
   <thead>
    <tr class="fw-bold fs-6 text-gray-800">
     <th>Name</th>
     <th>Position</th>
     <th>Office</th>
     <th>Age</th>
     <th>Start date</th>
     <th>Salary</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Tiger Nixon</td>
     <td>System Architect</td>
     <td>Edinburgh</td>
     <td>61</td>
     <td>2011/04/25</td>
     <td>$320,800</td>
    </tr>
    <tr>
     <td>Garrett Winters</td>
     <td>Accountant</td>
     <td>Tokyo</td>
     <td>63</td>
     <td>2011/07/25</td>
     <td>$170,750</td>
    </tr>
   </tbody>
  </table>
 </div>
</div>

<div class="py-5">
 <div class="table-responsive">
  <table class="table table-row-dashed table-row-gray-300 gy-7">
   <thead>
    <tr class="fw-bold fs-6 text-gray-800">
     <th>Name</th>
     <th>Position</th>
     <th>Office</th>
     <th>Age</th>
     <th>Start date</th>
     <th>Salary</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Tiger Nixon</td>
     <td>System Architect</td>
     <td>Edinburgh</td>
     <td>61</td>
     <td>2011/04/25</td>
     <td>$320,800</td>
    </tr>
    <tr>
     <td>Garrett Winters</td>
     <td>Accountant</td>
     <td>Tokyo</td>
     <td>63</td>
     <td>2011/07/25</td>
     <td>$170,750</td>
    </tr>
   </tbody>
  </table>
 </div>
</div>

Striped Rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500

<div class="table-responsive">
 <table class="table table-striped gy-7 gs-7">
  <thead>
   <tr class="fw-semibold fs-6 text-gray-800 border-bottom border-gray-200">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>

Striped, Rounded & Bordered

Use .border and .table-striped to set bordered table with striped rows and make it rounded with .table-rounded.

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500

<div class="table-responsive">
 <table class="table table-rounded table-striped border gy-7 gs-7">
  <thead>
   <tr class="fw-semibold fs-6 text-gray-800 border-bottom border-gray-200">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>

Flush Table

Use .table-flush to reset the table and cells base styles so then style the cells individually.

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000

<div class="table-responsive">
 <table class="table table-rounded table-flush">
  <thead>
   <tr class="fw-semibold fs-7 text-danger border-bottom border-gray-200 py-4">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr class="py-5 fw-semibold  border-bottom border-gray-300 fs-6">
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr class="py-5 fw-bold  border-bottom  border-gray-400 fs-4">
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>

Hoverable Rows

Add .table-hover to enable a hover state on table rows within a <tbody>

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500

<div class="table-responsive">
 <table class="table table-hover table-rounded table-striped border gy-7 gs-7">
  <thead>
   <tr class="fw-semibold fs-6 text-gray-800 border-bottom-2 border-gray-200">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>

Active Rows

Highlight a table row or cell by adding .table-active class:

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500

<div class="table-responsive">
 <table class="table table-rounded table-row-bordered border gy-7 gs-7">
  <thead>
   <tr class="fw-semibold fs-6 text-gray-800 border-bottom-2 border-gray-200">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr class="table-active">
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>

Nesting

Border styles, active styles, and table variants are not inherited by nested tables.

First

Last

Handle

Mark

Otto

@mdo

Header	Header	Header
A	First	Last
B	First	Last
C	First	Last

Larry

the Bird

@twitter

<div class="table-responsive">
    <table class="table table-striped table-rounded border border-gray-300 table-row-bordered table-row-gray-300 gy-7 gs-7">
        <thead>
            <tr class="fw-semibold fs-4 text-gray-800">
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <td colspan="4">
                    <table class="table table-row-dashed table-row-gray-500 gy-5 gs-5 mb-0">
                        <thead>
                            <tr class="fw-semibold fs-6 text-gray-800">
                                <th scope="col">Header</th>
                                <th scope="col">Header</th>
                                <th scope="col">Header</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">A</th>
                                <td>First</td>
                                <td>Last</td>
                            </tr>
                            <tr>
                                <th scope="row">B</th>
                                <td>First</td>
                                <td>Last</td>
                            </tr>
                            <tr>
                                <th scope="row">C</th>
                                <td>First</td>
                                <td>Last</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

Responsive

Enable a table with fixed cell widths and responsive modes by referring to the official Bootstrap Tablesdocumentation.

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500

<div class="table-responsive">
    <table class="table table-striped gy-7 gs-7">
        <thead>
            <tr class="fw-semibold fs-6 text-gray-800 border-bottom-2 border-gray-200">
                <th class="min-w-200px">Name</th>
                <th class="min-w-400px">Position</th>
                <th class="min-w-100px">Office</th>
                <th class="min-w-200px">Age</th>
                <th class="min-w-200px">Start date</th>
                <th class="min-w-200px">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
        </tbody>
    </table>
</div>

Sorting States

Add .table-sort-ascor .table-sort-descto <th>to set a column's sort state.

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500

<div class="table-responsive">
 <table class="table table-row-bordered gy-5">
  <thead>
   <tr class="fw-bold fs-6 text-gray-800">
    <th class="table-sort-desc">Name</th>
    <th class="table-sort-asc">Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>

Loading Indicator

Wrap a table with .table-loadingclass and use .table-loading-messageclass to display a loading message.

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750
Ashton Cox	Junior Technical Author	San Francisco	66	2009/01/12	$86,000
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	2012/03/29	$433,060
Airi Satou	Accountant	Tokyo	33	2008/11/28	$162,700
Brielle Williamson	Integration Specialist	New York	61	2012/12/02	$372,000
Herrod Chandler	Sales Assistant	San Francisco	59	2012/08/06	$137,500

<div class="table-responsive table-loading">
 <div class="table-loading-message">
  Loading...
 </div>

 <table class="table table-row-bordered gy-5">
  <thead>
   <tr class="fw-bold fs-6 text-gray-800">
    <th>Name</th>
    <th>Position</th>
    <th>Office</th>
    <th>Age</th>
    <th>Start date</th>
    <th>Salary</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tiger Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   </tr>
   <tr>
    <td>Garrett Winters</td>
    <td>Accountant</td>
    <td>Tokyo</td>
    <td>63</td>
    <td>2011/07/25</td>
    <td>$170,750</td>
   </tr>
  </tbody>
 </table>
</div>