# Sortable To make tables sortable we use the Sortable plugin by HubSpot which has no dependencies and it's included in our Volta package. Here is how to initialise it and use it:
  1. Include the script, which is distributed within the Volta package

    ```html ```
  2. Add the `data-sortable` attribute to your table
There are other options to initialise dynamic tables, better described in [the sortable docs](https://github.hubspot.com/sortable/api/options/). In summary, you can call an `init` function after generating the tables, like this: ```javascript Sortable.init() ```
Or initialise an individual table, like this: ```javascript exampleTable = document.querySelector('#exampleTable') Sortable.initTable(exampleTable) ```

Additionally, if you need to disable sorting for a particular column, you can just add `data-sortable="false"` to the `` for that column. # Reference table
|Class | Behaviour| |---|---| |`.Vlt-table`| Basic class that must wrap a table to give it the right look and feel| |`.Vlt-table--tall`|Increases the cells padding to give more reading space| |`.Vlt-table--short`|Decreases the cells padding to fit more rows in a smaller space| |`.Vlt-table--nowrap`|Forces all the content on one line| |`.Vlt-table--nohighlight`|Prevents the row highlight on hover| |`.Vlt-table__actions`|For rows with actions discoverable on hover, this must be given to the extra `` at the end of each row that contains the button group| |`.Vlt-table__cell--nowrap`|Given to a ``, it adds white-space: nowrap to the cell (example: we are using it in this very table for the variable cells)| |`.Vlt-table__actions`|For rows with actions discoverable on hover, this must be given to the extra `` at the end of each row that contains the button group| |`.Vlt-table--mobile-stack`|Stacks the table vertically on mobile| |`.Vlt-table__row--nohighlight`|Prevents highlight effect on a specific row | |`.Vlt-table--data`| Basic modifier for data tables to give the correct styles| |`.Vlt-table--data--cols`| Adds vertical lines. To be used in conjunction with number cells to help with readability| |`.Vlt-table--data--teal`| Applies the teal color scheme| |`.Vlt-table--data--dark`| Applies the dark color scheme| |`.Vlt-table__cell--number`| Needed in ID, number and date cells to right align the text and make it easier to compare|
#### Sortable options (available if you need to use a different plugin)
|Class | Behaviour| |---|---| |`.Vlt-table--sortable`| Modifier for the table that gives the sortable styles to the header| |`.Vlt-table__col--sortable`| Automatically added in the ``s of sortable tables by our script above in connection with jQuery Tablesorter, needed for sortable header styles| |`.Vlt-table__col--descending`| Automatically added in the ``s of sortable tables by our script above in connection with jQuery Tablesorter, adds the correct "descending" icon| |`.Vlt-table__col--ascending`| Automatically added in the ``s of sortable tables by our script above in connection with jQuery Tablesorter, adds the correct "ascending" icon|