Table
Tables display sets of data across rows and columns. The features of table include record count, search, column sorting, page count, pagination.
Last updated
Tables display sets of data across rows and columns. The features of table include record count, search, column sorting, page count, pagination.
Last updated
<div class="table-responsive default-table">
<table class="table">
<thead>
<tr>
<th scope="col">Table Header</th>
<th scope="col">Table Header</th>
<th scope="col">Table Header</th>
<th scope="col">Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text goes here</td>
<td>Text goes here</td>
<td>Text goes here</td>
<td>Text goes here</td>
</tr>
<tr>
<td>Text goes here</td>
<td>Text goes here</td>
<td>Text goes here</td>
<td>Text goes here</td>
</tr>
<tr>
<td>Text goes here</td>
<td>Text goes here</td>
<td>Text goes here</td>
<td>Text goes here</td>
</tr>
</tbody>
</table>
</div><div class="static-table">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="#">1</td>
<td data-title="First">Mark</td>
<td data-title="Last">Otto</td>
<td data-title="Status"><span class="jds-tag has-success-light">Approved</span></td>
</tr>
<tr>
<td data-title="#">2</td>
<td data-title="First">Jacob</td>
<td data-title="Last">Thornton</td>
<td data-title="Status"><span class="jds-tag has-error-light">Rejected</span></td>
</tr>
<tr>
<th data-title="#">3</th>
<td data-title="First">Larry</td>
<td data-title="Last">the Bird</td>
<td data-title="Status"><span class="jds-tag has-example-light">Example</span></td>
</tr>
</tbody>
</table>
<div class="'pagination-container'">
<ul class="pagination justify-content-end">
<li class="page-item disabled"><a class="page-link" href="#"><i class="fal fa-chevron-left"></i><span class="sr-only">Previous</span></a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#"><i class="fal fa-chevron-right"></i><span class="sr-only">Next</span></a></li>
</ul>
</div>
</div>
</div><table id="datatables-example" class="display nowrap dataTable dtr-inline collapsed" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th class="text-center">Age</th>
<th style="width: 120px">Start date</th>
<th style="width: 100px">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td class="text-center">61</td>
<td>2011/04/25</td>
<td class="text-right">$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td class="text-center">63</td>
<td>2011/07/25</td>
<td class="text-right">$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td class="text-center">66</td>
<td>2009/01/12</td>
<td class="text-right">$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td class="text-center">22</td>
<td>2012/03/29</td>
<td class="text-right">$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td class="text-center">33</td>
<td>2008/11/28</td>
<td class="text-right">$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td class="text-center">61</td>
<td>2012/12/02</td>
<td class="text-right">$372,000</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td class="text-center">43</td>
<td>2012/12/18</td>
<td class="text-right">$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td class="text-center">19</td>
<td>2010/03/17</td>
<td class="text-right">$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td class="text-center">66</td>
<td>2012/11/27</td>
<td class="text-right">$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td class="text-center">64</td>
<td>2010/06/09</td>
<td class="text-right">$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td class="text-center">59</td>
<td>2009/04/10</td>
<td class="text-right">$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td class="text-center">41</td>
<td>2012/10/13</td>
<td class="text-right">$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td class="text-center">35</td>
<td>2012/09/26</td>
<td class="text-right">$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td class="text-center">30</td>
<td>2011/09/03</td>
<td class="text-right">$345,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td class="text-center">40</td>
<td>2009/06/25</td>
<td class="text-right">$675,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td class="text-center">21</td>
<td>2011/12/12</td>
<td class="text-right">$106,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sydney</td>
<td class="text-center">23</td>
<td>2010/09/20</td>
<td class="text-right">$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td class="text-center">47</td>
<td>2009/10/09</td>
<td class="text-right">$1,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td class="text-center">42</td>
<td>2010/12/22</td>
<td class="text-right">$92,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td class="text-center">28</td>
<td>2010/11/14</td>
<td class="text-right">$357,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td class="text-center">28</td>
<td>2011/06/07</td>
<td class="text-right">$206,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td class="text-center">48</td>
<td>2010/03/11</td>
<td class="text-right">$850,000</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td class="text-center">37</td>
<td>2009/08/19</td>
<td class="text-right">$139,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td class="text-center">61</td>
<td>2013/08/11</td>
<td class="text-right">$98,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td class="text-center">47</td>
<td>2009/07/07</td>
<td class="text-right">$87,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td class="text-center">64</td>
<td>2012/04/09</td>
<td class="text-right">$138,575</td>
</tr>
</tbody>
</table>Note: This component requires third party component related js and css which was included in the package.
Tables should be used for:
Displaying tabular information such as statistics.
Making comparisons between information.
Tables should not be used for:
Displaying non-tabular data (Using lists would be more appropriate).
Laying out a page.
Large sections within a page.
