# Tables

Atmos extensively uses bootstrap 4 `.table` classes you can refer their documentation on their site below

{% embed url="<https://getbootstrap.com/docs/4.1/content/tables/>" %}

### Datatables

Datatables provides advanced interaction controls to your HTML tables it also supports bootstrap 4 tables. to use data table please follow the steps.

you can read detailed documentation of datatable at&#x20;

{% embed url="<https://datatables.net/>" %}

#### Step 1

Include the following in head

```markup
<link rel="stylesheet" href="assets/vendor/DataTables/datatables.min.css">
<link rel="stylesheet" href="assets/vendor/DataTables/DataTables-1.10.18/css/dataTables.bootstrap4.min.css">
```

#### Step 2

Include the following before `</body>`

```markup
<script src="assets/vendor/DataTables/datatables.min.js"></script>
```

#### Step 3

```markup
<table id="example" class="table table-hover" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    ​
    <tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </tfoot>
    ​
    <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>
    <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
    </tr>
    <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
    </tr>
    </tbody>
</table>
```

#### Step 4

Initialize the datatable&#x20;

```javascript
 $('#example').DataTable({
            //DataTable Options
 });
```


---

# 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://docs.atomui.com/ui-elements/tables.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.