# Table

### [Interactive Demo](https://vision.crimsonlogic.studio/jds/v1.2/components.html#simple-table-wrapper)

### Default Table

<div align="left"><img src="/files/NUV1dbWUcG6tuftlloym" alt=""></div>

```
 <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>
```

### Static Table

<div align="left"><img src="/files/-MZmyUjXOoM4VjbcMG-W" alt=""></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>
```

### Data Table -  Desktop&#x20;

<div align="left"><img src="/files/-MZmz33CXH8OEEtCtVLB" alt=""></div>

### Data Table - Mobile View

<div align="left"><img src="/files/-MZmzOSkbQCc2Bh3hKCD" alt=""></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>
```

{% hint style="info" %}
Note: This component requires third party component related js and css which was included in the package.
{% endhint %}

### When to use

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sg-jds.gitbook.io/jds-beta/components/table.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
