Tablesort

https://tristen.ca/tablesort/demo/
Admin
Tablesort is a small, simple, and dependency-free JavaScript sorting component that enables...
Tokens:1,760
Snippets:26
Trust Score:9
Update:5 months ago
Show doc for...
Tokens:
Raw
### Basic Tablesort Initialization

Source: https://tristen.ca/tablesort/demo

Include the tablesort script and initialize it on a table element. Ensure you include necessary sort type scripts if not using the default string sort.

```html
<script src='tablesort.min.js'></script>

<!-- Include sort types you need -->
<script src='tablesort.number.js'></script>
<script src='tablesort.date.js'></script>

<script>
  new Tablesort(document.getElementById('table-id'));
</script>
```

--------------------------------

### Initialize Tablesort with Descending Order

Source: https://tristen.ca/tablesort/demo

To sort in descending order by default, pass an options object with `descending: true` as the second parameter to the Tablesort constructor.

```javascript
new Tablesort(document.getElementById('table-id'), {
  descending: true
});
```

--------------------------------

### Handle Tablesort Events

Source: https://tristen.ca/tablesort/demo

Attach event listeners to the table element to execute custom logic before (`beforeSort`) or after (`afterSort`) a sorting operation occurs.

```javascript
var table = document.getElementById('table-id');
var sort = new Tablesort(table);

table.addEventListener('beforeSort', function() {
  alert('Table is about to be sorted!');
});

table.addEventListener('afterSort', function() {
  alert('Table sorted!');
});
```

--------------------------------

### Sort by Column Keys with Colspan

Source: https://tristen.ca/tablesort/demo

Use the 'data-sort-column-key' attribute on headers to link them to specific cells for sorting, even when colspans are present. This is useful when the data to be sorted is not in the same column as its header.

```html
<table class='sort'>
<thead>
  <tr>
    <th>Product</th>
    <th colspan="2" data-sort-column-key="price">Price</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Apples</td>
    <td>Sale!</td>
    <td data-sort-column-key="price">20</td>
  </tr>
  <tr>
    <td>Bread</td>
    <td>Out of stock</td>
    <td data-sort-column-key="price">10</td>
  </tr>
  <tr>
    <td>Radishes</td>
    <td>In Stock!</td>
    <td data-sort-column-key="price">30</td>
  </tr>
</tbody>
</table>
```

--------------------------------

### Specify Sort Method for a Column

Source: https://tristen.ca/tablesort/demo

Force a specific sorting method for a column by adding the `data-sort-method` attribute to the corresponding `<th>` element. The attribute value should match the name of a registered sort function.

```html
<table>
  <thead>
    <tr>
      <th>Number</th>
      <th data-sort-method='dotsep'>Version</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>3.7.2004</td>
    </tr>
    <tr>
      <td>2</td>
      <td>1.08.2013</td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### Use Custom Sort Attribute

Source: https://tristen.ca/tablesort/demo

Configure Tablesort to use a custom attribute for sorting data by setting the `sortAttribute` option during initialization.

```javascript
var table = document.getElementById('table-id');
var sort = new Tablesort(table, { sortAttribute: 'data-custom-sort-val'});
```

--------------------------------

### Specify Table Heading Row for Sorting

Source: https://tristen.ca/tablesort/demo

If a table has multiple heading rows, designate the row that should enable sorting by adding the `data-sort-method='thead'` attribute to the desired `<tr>` element.

```html
<table>
  <thead>
    <tr data-sort-method='thead'><th>Sort Row</th></tr>
    <tr><th>Not Sort Row</th></tr>
  </thead>
  <tbody>
    <tr><td>2</td></tr>
    <tr><td>1</td></tr>
    <tr><td>3</td></tr>
  </tbody>
</table>
```

--------------------------------

### Set Default Sort Column

Source: https://tristen.ca/tablesort/demo

To automatically sort the table by a specific column upon initialization, add the `data-sort-default` attribute to the corresponding `<th>` element.

```html
<th data-sort-default>Born</th>
```

--------------------------------

### Override Data for Sorting with `data-sort` Attribute

Source: https://tristen.ca/tablesort/demo

Provide a `data-sort` attribute on `<td>` elements to specify the exact value used for sorting, overriding the cell's visible content.

```html
<tr>
  <td>1</td>
  <td data-sort='1357656438'>01/08/13 @ 8:47:18am EST</td>
</tr>
<tr>
  <td>2</td>
  <td data-sort='1078673085'>3/7/2004 @ 9:24:45 EST</td>
</tr>
```

--------------------------------

### Refresh Sort After Appending Data

Source: https://tristen.ca/tablesort/demo

Call the `refresh()` method on the Tablesort instance after adding new data to the table to ensure the sorting functionality is updated.

```javascript
var table = document.getElementById('table-id');
var sort = new Tablesort(table);

// Make some Ajax request to fetch new data and on success:
sort.refresh();
```

--------------------------------

### Disable Sorting for Specific Columns or Rows

Source: https://tristen.ca/tablesort/demo

Use the `data-sort-method='none'` attribute on `<th>` or `<tr>` elements to prevent sorting for those specific table parts.

```html
<th data-sort-method='none'>Name</th>

<tr data-sort-method='none'>
  <td>1</td>
  <td>Gonzo the Great</td>
  <td>12-2-70</td>
  <td>Radishes</td>
  <td>$0.63</td>
</tr>
```

--------------------------------

### Disable Reverse Sort for a Column

Source: https://tristen.ca/tablesort/demo

To override the default reverse sort behavior for a specific column, add the `data-sort-reverse` attribute to its `<th>` element.

```html
<th data-sort-reverse>A table header</th>
```
Tokens:
Raw