### Initialize Tablesort Instances

Source: https://github.com/tristen/tablesort/blob/main/demo/index.md

Instantiate Tablesort for specific tables using their IDs. This example shows initialization for two tables and one that will handle events.

```javascript
new Tablesort(document.getElementById('defaulting'));
new Tablesort(document.getElementById('column-keys'));

var events = document.getElementById('event-table')
new Tablesort(events);
```

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

### File Size Sort Extension Example

Source: https://context7.com/tristen/tablesort/llms.txt

This extension sorts file sizes with units including KB, MB, GB, TB and their binary equivalents (KiB, MiB, GiB, TiB). Include `tablesort.filesize.js` and initialize Tablesort on the table.

```html
<table id="files-table">
  <thead>
    <tr>
      <th>Filename</th>
      <th>Size</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>document.pdf</td>
      <td>5.35 KB</td>
    </tr>
    <tr>
      <td>video.mp4</td>
      <td>1.2 GB</td>
    </tr>
    <tr>
      <td>image.png</td>
      <td>750 KiB</td>
    </tr>
    <tr>
      <td>archive.zip</td>
      <td>10 MB</td>
    </tr>
  </tbody>
</table>

<script src="tablesort.min.js"></script>
<script src="tablesort.filesize.js"></script>
<script>
  new Tablesort(document.getElementById('files-table'));
</script>
```

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

### Dot-Separated Values Sort Extension Example

Source: https://context7.com/tristen/tablesort/llms.txt

This extension sorts dot-separated numeric values like IP addresses and version numbers by comparing each segment numerically. Include `tablesort.dotsep.js` and initialize Tablesort on the table.

```html
<table id="versions-table">
  <thead>
    <tr>
      <th>Package</th>
      <th>Version</th>
      <th>IP Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>React</td>
      <td>18.2.0</td>
      <td>192.168.1.1</td>
    </tr>
    <tr>
      <td>Vue</td>
      <td>3.3.4</td>
      <td>10.0.0.1</td>
    </tr>
    <tr>
      <td>Angular</td>
      <td>16.1.0</td>
      <td>172.16.0.1</td>
    </tr>
  </tbody>
</table>

<script src="tablesort.min.js"></script>
<script src="tablesort.dotsep.js"></script>
<script>
  new Tablesort(document.getElementById('versions-table'));
</script>
```

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

### Date Sort Extension Example

Source: https://context7.com/tristen/tablesort/llms.txt

This extension sorts date values in various formats, including dd/mm/yy, dd-mm-yyyy, and dates with month or day names. Include `tablesort.date.js` and initialize Tablesort on the table.

```html
<table id="dates-table">
  <thead>
    <tr>
      <th>Event</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Meeting</td>
      <td>15/03/2023</td>
    </tr>
    <tr>
      <td>Conference</td>
      <td>Mon, 20 Jan 2023</td>
    </tr>
    <tr>
      <td>Workshop</td>
      <td>5-12-2022</td>
    </tr>
  </tbody>
</table>

<script src="tablesort.min.js"></script>
<script src="tablesort.date.js"></script>
<script>
  new Tablesort(document.getElementById('dates-table'));
</script>
```

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

### Number Sort Extension Example

Source: https://context7.com/tristen/tablesort/llms.txt

This extension sorts numeric values, including integers, decimals, negative numbers, percentages, and currency values with various prefixes and suffixes. Include `tablesort.number.js` and initialize Tablesort on the table.

```html
<table id="numbers-table">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>$1,234.56</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>$99.99</td>
      <td>-50</td>
    </tr>
    <tr>
      <td>Widget C</td>
      <td>€2,500.00</td>
      <td>75%</td>
    </tr>
  </tbody>
</table>

<script src="tablesort.min.js"></script>
<script src="tablesort.number.js"></script>
<script>
  new Tablesort(document.getElementById('numbers-table'));
</script>
```

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

### Month Name Sort Extension Example

Source: https://context7.com/tristen/tablesort/llms.txt

This extension sorts columns containing full month names (January, February, etc.) in chronological order. Include `tablesort.monthname.js` and initialize Tablesort on the table.

```html
<table id="months-table">
  <thead>
    <tr>
      <th>Report</th>
      <th>Month</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1 Report</td>
      <td>March</td>
    </tr>
    <tr>
      <td>Q2 Report</td>
      <td>January</td>
    </tr>
    <tr>
      <td>Q3 Report</td>
      <td>September</td>
    </tr>
  </tbody>
</table>

<script src="tablesort.min.js"></script>
<script src="tablesort.monthname.js"></script>
<script>
  new Tablesort(document.getElementById('months-table'));
</script>
```

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

### Event Listeners for Sorting Lifecycle

Source: https://context7.com/tristen/tablesort/llms.txt

Tablesort dispatches `beforeSort` and `afterSort` events on the table element. Use these events to hook into the sorting process, for example, to show loading indicators.

```javascript
const table = document.getElementById('my-table');
const sort = new Tablesort(table);

// Listen for sort events
table.addEventListener('beforeSort', function() {
  console.log('Sorting is about to begin...');
  // Show loading indicator, disable UI, etc.
});

table.addEventListener('afterSort', function() {
  console.log('Sorting complete!');
  // Hide loading indicator, update UI state, etc.
});
```

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

### Internationalized String Sort Extension Example

Source: https://context7.com/tristen/tablesort/llms.txt

This extension uses the JavaScript Intl.Collator API for locale-aware string comparison, properly handling accented characters and language-specific sorting rules. Include `tablesort.intl.js` and initialize Tablesort on the table with `data-sort-method="intl"`.

```html
<table id="intl-table">
  <thead>
    <tr>
      <th data-sort-method="intl">Name</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Müller</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Muller</td>
      <td>France</td>
    </tr>
    <tr>
      <td>Möller</td>
      <td>Sweden</td>
    </tr>
  </tbody>
</table>

<script src="tablesort.min.js"></script>
<script src="tablesort.intl.js"></script>
<script>
  new Tablesort(document.getElementById('intl-table'));
</script>
```

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

### Serve Tablesort Demo Locally

Source: https://github.com/tristen/tablesort/blob/main/README.md

Run the Jekyll server to view the Tablesort demo locally.

```sh
jekyll serve
```

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

### Initialization with Options

Source: https://context7.com/tristen/tablesort/llms.txt

Customize sorting behavior by passing a configuration object. Options include setting the default sort order to descending or specifying a custom data attribute for sort values.

```javascript
const table = document.getElementById('my-table');

// Sort descending by default
const sort = new Tablesort(table, {
  descending: true
});

// Use custom data attribute for sort values
const sortWithCustomAttr = new Tablesort(table, {
  sortAttribute: 'data-custom-sort-val'
});
```

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

### Import and Initialize Tablesort in Node.js/Browserify

Source: https://github.com/tristen/tablesort/blob/main/README.md

Import the tablesort library and initialize it with an element and optional options.

```javascript
import tablesort from 'tablesort';

tablesort(el, options);
```

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

### Run Tablesort Tests

Source: https://github.com/tristen/tablesort/blob/main/README.md

Execute the test suite for Tablesort using npm.

```sh
npm test
```

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

### Include Tablesort and Sort Types in HTML

Source: https://github.com/tristen/tablesort/blob/main/README.md

Include the main Tablesort script and any desired sort type scripts in your HTML. Then, initialize Tablesort by passing the ID of the table element.

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

Source: https://github.com/tristen/tablesort/blob/main/demo/_layouts/default.html

This script initializes the analytics object and defines its methods. It's designed to be included in your HTML to load the analytics script.

```javascript
var analytics=analytics||[];(function(){var e=["identify","track","trackLink","trackForm","trackClick","trackSubmit","page","pageview","ab","alias","ready","group"];var t=function(e){return function(){analytics.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var n=0;n<e.length;n++)analytics[e[n]]=t(e[n])})();analytics.load=function(e){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=("https:"===document.location.protocol?"https://":"http://")+"d2dq2ahtl5zl1z.cloudfront.net/analytics.js/v1/"+e+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)}; analytics.load("ppyh4q5xb3");
```

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

### Initialize Tablesort for Multi-Column Sorting

Source: https://github.com/tristen/tablesort/blob/main/test/index.html

Initialize Tablesort. Multi-column sorting is enabled by default. Users can hold shift and click on multiple headers to sort by multiple columns.

```javascript
tableMulti = document.getElementById('sort-multi');
new Tablesort(tableMulti);
```

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

### Initialize Tablesort with Dot Separated Keys

Source: https://github.com/tristen/tablesort/blob/main/test/index.html

Initialize Tablesort. For dot-separated version numbers, use the `data-sort-method='dotsep'` attribute on the `<th>` element.

```javascript
tableSortDotsep = document.getElementById('sort-dotsep');
new Tablesort(tableSortDotsep);
```

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

### Basic HTML Table Initialization

Source: https://context7.com/tristen/tablesort/llms.txt

Initialize Tablesort on an HTML table using script tags. Ensure the table has thead and tbody elements. The tablesort.min.js and tablesort.number.js files are required.

```html
<table id="my-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>28</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>34</td>
      <td>Chicago</td>
    </tr>
    <tr>
      <td>Charlie</td>
      <td>22</td>
      <td>Boston</td>
    </tr>
  </tbody>
</table>

<script src="tablesort.min.js"></script>
<script src="tablesort.number.js"></script>
<script>
  // Initialize sorting on the table
  new Tablesort(document.getElementById('my-table'));
</script>
```

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

### Initialize Tablesort

Source: https://github.com/tristen/tablesort/blob/main/test/index.html

Basic initialization of Tablesort on an HTML table element. No special configuration is needed for default ascending sort.

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

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

### Initialize Tablesort with Custom Column Keys

Source: https://github.com/tristen/tablesort/blob/main/test/index.html

Initialize Tablesort. To specify custom sort keys for a column, add the `data-sort-keys` attribute to the `<th>` element.

```javascript
tableSortColumnKeys = document.getElementById('sort-column-keys');
new Tablesort(tableSortColumnKeys);
```

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

### Initialize Tablesort with Descending Order

Source: https://github.com/tristen/tablesort/blob/main/test/index.html

Initialize Tablesort with the `descending: true` option to sort the table in descending order by default.

```javascript
tableDescend = document.getElementById('sort-descend');
new Tablesort(tableDescend, { descending: true });
```

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

### Initialize Tablesort

Source: https://github.com/tristen/tablesort/blob/main/demo/_includes/header.html

Instantiate Tablesort by providing the ID of the HTML table element you want to sort. Ensure the table has an ID attribute.

```javascript
new Tablesort(document.getElementById('sort'));
```

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

### Module Import and Initialization

Source: https://context7.com/tristen/tablesort/llms.txt

Import Tablesort as an ES module for use in modern JavaScript applications. It can be called with or without the 'new' keyword.

```javascript
import Tablesort from 'tablesort';

// Initialize on a table element
const table = document.getElementById('my-table');
const sort = Tablesort(table);

// Or with the new keyword
const sort = new Tablesort(table);
```

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

### Initialize Tablesort with Column Exclusion

Source: https://github.com/tristen/tablesort/blob/main/test/index.html

Initialize Tablesort. By default, all columns are sortable. To exclude a column, add the `data-sort-method='none'` attribute to the `<th>` element.

```javascript
tableExclude = document.getElementById('sort-exclude');
new Tablesort(tableExclude);
```

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

### Initialize Tablesort with Custom Sort Attribute

Source: https://github.com/tristen/tablesort/blob/main/test/index.html

Initialize Tablesort with a custom sort attribute. Use the `sortAttribute` option to specify which attribute to use for sorting.

```javascript
tableSortCustomAttr = document.getElementById('sort-custom-attribute');
new Tablesort(tableSortCustomAttr, { sortAttribute: "data-realname" });
```

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

### Handle Sorting Events

Source: https://github.com/tristen/tablesort/blob/main/demo/index.md

Attach custom event listeners for 'beforeSort' and 'afterSort' events on a Tablesort instance. Ensure the 'addEvent' helper function is defined.

```javascript
addEvent(events, 'beforeSort', function(e) {
    alert('Table is about to be sorted!');
  });
  addEvent(events, 'afterSort', function(e) {
    alert('Table sorted!');
  });
```

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

### Add and Remove Table Rows Dynamically

Source: https://github.com/tristen/tablesort/blob/main/demo/index.md

This script demonstrates how to dynamically add or remove rows from a table and then refresh the Tablesort instance to recognize the changes. It uses a predefined array of trumpeters for adding new rows.

```javascript
var trumpeters = [
    {
      "name": "Miles Davis",
      "born": 1926
    },
    {
      "name": "Dizzy Gillespie",
      "born": 1917
    },
    {
      "name": "Wynton Marsalis",
      "born": 1961
    },
    {
      "name": "Tom Harell",
      "born": 1946
    },
    {
      "name": "Roy Hargrove",
      "born": 1969
    },
    {
      "name": "Chet Baker",
      "born": 1929
    },
    {
      "name": "Nicholas Payton",
      "born": 1973
    },
    {
      "name": "Wallace Roney",
      "born": 1960
    },
    {
      "name": "Rex Stewart",
      "born": 1907
    },
    {
      "name": "Tim Hagans",
      "born": 1954
    },
    {
      "name": "Roy Eldridge",
      "born": 1911
    },
    {
      "name": "Freddie Hubbard",
      "born": 1938
    }
  ]
  var r = document.getElementById('refresh-table');
  var add = document.getElementById('add');
  var remove = document.getElementById('remove');
  var refresh = new Tablesort(r);

  function cancel(event) {
    (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
    (event.stopPropagation) ? event.stopPropagation() : event.cancelBubble = true;
  }
  function addEvent(object, event, method) {
      if (object.attachEvent) {
          object['e' + event + method] = method;
          object[event + method] = function(){object['e' + event + method](window.event);};
          object.attachEvent('on' + event, object[event + method]);
      } else {
      object.addEventListener(event, method, false);
      }
  };

  addEvent(add, 'click', function(e) {
    cancel(e);
    var player = trumpeters[Math.floor(Math.random() * trumpeters.length)];

    var rowCount = r.rows.length;
    var row = r.insertRow(rowCount);

    var cellName = row.insertCell(0);
        cellName.innerHTML = player.name;

    var cellBorn = row.insertCell(1);
        cellBorn.innerHTML = player.born;

    refresh.refresh();
  });
  addEvent(remove, 'click', function(e) {
    cancel(e);
    var rowCount = r.rows.length;
    if (rowCount === 2) return;
    r.deleteRow(rowCount - 1);
  });
```

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

### Default Sort Initialization

Source: https://github.com/tristen/tablesort/blob/main/demo/index.md

To automatically sort a table when a Tablesort instance is created, add the 'data-sort-default' attribute to the header cell.

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

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

### Handle Tablesort Events

Source: https://github.com/tristen/tablesort/blob/main/demo/index.md

Attach event listeners to the table element to react to 'beforeSort' and 'afterSort' events. These events fire before and after the table is sorted, respectively.

```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!');
});
```

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

### Default Sort Column Configuration

Source: https://context7.com/tristen/tablesort/llms.txt

Set a column to be sorted automatically on initialization by adding the `data-sort-default` attribute to the header cell.

```html
<table id="my-table">
  <thead>
    <tr>
      <th>Name</th>
      <th data-sort-default>Born</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Roy Eldridge</td>
      <td>1911</td>
    </tr>
    <tr>
      <td>Tim Hagans</td>
      <td>1954</td>
    </tr>
    <tr>
      <td>Freddie Hubbard</td>
      <td>1938</td>
    </tr>
  </tbody>
</table>

<script>
  // Table will automatically sort by "Born" column on initialization
  new Tablesort(document.getElementById('my-table'));
</script>
```

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

### Sorting with Column Keys (Colspan Support)

Source: https://context7.com/tristen/tablesort/llms.txt

Use `data-sort-column-key` on `<th>` and `<td>` elements to link headers to specific cells in tables with `colspan`. All linked elements must share the same key value.

```html
<table id="my-table">
  <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>

<script src="tablesort.min.js"></script>
<script src="tablesort.number.js"></script>
<script>
  new Tablesort(document.getElementById('my-table'));
</script>
```

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

### Initialize Tablesort for Row Sorting

Source: https://github.com/tristen/tablesort/blob/main/test/index.html

Initialize Tablesort. To sort rows, add the `data-sort-row='true'` attribute to the `<tr>` element.

```javascript
tableSortRowSet = document.getElementById('sort-row-set');
new Tablesort(tableSortRowSet);
```

```javascript
tableSortRowAuto = document.getElementById('sort-row-auto');
new Tablesort(tableSortRowAuto);
```

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

### Helper Function for Event Binding

Source: https://github.com/tristen/tablesort/blob/main/demo/index.md

A utility function to add event listeners to DOM elements, supporting both modern browsers (addEventListener) and older IE versions (attachEvent).

```javascript
function addEvent(object, event, method) {
      if (object.attachEvent) {
          object['e' + event + method] = method;
          object[event + method] = function(){object['e' + event + method](window.event);};
          object.attachEvent('on' + event, object[event + method]);
      } else {
      object.addEventListener(event, method, false);
      }
  };
```

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

### Initialize Tablesort with Default Sort Column

Source: https://github.com/tristen/tablesort/blob/main/test/index.html

Initialize Tablesort. To set a default sort column, add the `data-sort-default='true'` attribute to the `<th>` element.

```javascript
tableDefault = document.getElementById('sort-default');
new Tablesort(tableDefault);
```

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

### Sorting by Column Keys

Source: https://github.com/tristen/tablesort/blob/main/demo/index.md

Use 'data-sort-column-key' to explicitly link a header to specific cells for sorting, useful for tables with colspans or when data is not in a direct column.

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

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

### Extend Tablesort with Custom Sort Functionality

Source: https://github.com/tristen/tablesort/blob/main/README.md

Extend Tablesort to add custom sorting logic. Define a regular expression to test table cell items and a comparison function for sorting.

```javascript
Tablesort.extend('name', item => {

  // Regular expression to test against.
  // `item` is a table value to evaluate.
  return /foo/.test(item);
}, (a, b) => {

  // Custom sort functionality goes here.
  // e.g var n = (a > b) ? -1 : 1;
  return n;
});
```

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

### Helper Function to Cancel Event Propagation

Source: https://github.com/tristen/tablesort/blob/main/demo/index.md

A utility function to prevent default browser actions and stop event propagation, ensuring custom event handling takes precedence.

```javascript
function cancel(event) {
    (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
    (event.stopPropagation) ? event.stopPropagation() : event.cancelBubble = true;
  }
```

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

### Extend Tablesort with Custom Sort Types

Source: https://context7.com/tristen/tablesort/llms.txt

Register custom sort types with a name, pattern detection, and comparison function. Use this for data formats not automatically supported by Tablesort.

```javascript
Tablesort.extend('hexcolor', function(item) {
  // Pattern detection: returns true if item looks like a hex color
  return /^#[0-9A-Fa-f]{6}$/.test(item);
}, function(a, b) {
  // Sort function: convert hex to decimal for comparison
  const numA = parseInt(a.slice(1), 16);
  const numB = parseInt(b.slice(1), 16);
  return numB - numA;
});
```

```javascript
// Custom sort for percentage values
Tablesort.extend('percentage', function(item) {
  return /^\d+(\.\d+)?%\$/.test(item);
}, function(a, b) {
  const numA = parseFloat(a);
  const numB = parseFloat(b);
  return numB - numA;
});
```

```javascript
// Usage
new Tablesort(document.getElementById('my-table'));
```

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

### Specify Sort Method for a Column

Source: https://github.com/tristen/tablesort/blob/main/demo/index.md

Force a specific sorting method for a column by adding the 'data-sort-method' attribute to the table header (th). 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>
```

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

### Reverse Sort Order for Specific Columns

Source: https://context7.com/tristen/tablesort/llms.txt

Make a specific column sort in the opposite direction of the default by adding the `data-sort-reverse` attribute to its header cell.

```html
<table id="my-table">
  <thead>
    <tr>
      <th>Name</th>
      <th data-sort-reverse>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>87</td>
    </tr>
  </tbody>
</table>

<script src="tablesort.min.js"></script>
<script src="tablesort.number.js"></script>
<script>
  new Tablesort(document.getElementById('my-table'));
</script>
```

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

### Specify Header Row in Multi-Row Thead

Source: https://context7.com/tristen/tablesort/llms.txt

For tables with multiple header rows, designate the sortable row by adding `data-sort-method='thead'` to the desired `<tr>` element. Other header rows will not be sortable.

```html
<table id="my-table">
  <thead>
    <tr data-sort-method="thead">
      <th>Sortable Header</th>
      <th>Another Sortable</th>
    </tr>
    <tr>
      <th>Sub-header (not sortable)</th>
      <th>Another sub-header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Value A</td>
    </tr>
    <tr>
      <td>Data 2</td>
      <td>Value B</td>
    </tr>
  </tbody>
</table>

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

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

### Specify Table Heading Row for Sorting

Source: https://github.com/tristen/tablesort/blob/main/demo/index.md

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

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

### Default CSS for Tablesort Sort Indicators

Source: https://context7.com/tristen/tablesort/llms.txt

Includes default CSS styles for sort indicators using ARIA attributes. This styling makes sortable headers visually distinct and shows sort direction arrows.

```css
/* Make sortable headers show pointer cursor */
th[role=columnheader]:not([data-sort-method='none']) {
  cursor: pointer;
}
```

```css
/* Sort direction indicator arrow */
th[role=columnheader]:not([data-sort-method='none']):after {
  content: '';
  float: right;
  margin-top: 7px;
  border-width: 0 4px 4px;
  border-style: solid;
  border-color: #404040 transparent;
  visibility: hidden;
  opacity: 0;
  user-select: none;
}
```

```css
/* Ascending sort arrow (points up) */
th[aria-sort=ascending]:not([data-sort-method='none']):after {
  border-bottom: none;
  border-width: 4px 4px 0;
}
```

```css
/* Show arrow on sorted column */
th[aria-sort]:not([data-sort-method='none']):after {
  visibility: visible;
  opacity: 0.4;
}
```

```css
/* Show arrow on hover/focus */
th[role=columnheader]:not([data-sort-method='none']):focus:after,
th[role=columnheader]:not([data-sort-method='none']):hover:after {
  visibility: visible;
  opacity: 1;
}
```

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

### Use Custom Sort Attribute

Source: https://github.com/tristen/tablesort/blob/main/demo/index.md

Configure Tablesort to use a custom data attribute for sorting values instead of the default 'data-sort' by setting the 'sortAttribute' option.

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

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

### Refresh Tablesort Instance

Source: https://github.com/tristen/tablesort/blob/main/test/index.html

Refresh the Tablesort instance after dynamically adding or removing rows. This ensures the sorting is updated correctly.

```javascript
var refresh = new Tablesort(tableRefresh);
var rowCount = tableRefresh.rows.length;
var row = tableRefresh.insertRow(rowCount);
var cellName = row.insertCell(0);
cellName.innerHTML = 0;
refresh.refresh();
```

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

### Refresh Sort After Appending Data

Source: https://github.com/tristen/tablesort/blob/main/demo/index.md

After adding new data to the table, call the 'refresh' method on the Tablesort instance to re-initialize sorting for the updated table content.

```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();
```

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

### Exclude Columns from Sorting

Source: https://context7.com/tristen/tablesort/llms.txt

Prevent specific columns from being sortable by adding `data-sort-method="none"` to the header cell. These columns will not respond to clicks.

```html
<table id="my-table">
  <thead>
    <tr>
      <th data-sort-method="none">Actions</th>
      <th>Name</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><button>Edit</button></td>
      <td>Alice</td>
      <td>2023-01-15</td>
    </tr>
    <tr>
      <td><button>Edit</button></td>
      <td>Bob</td>
      <td>2023-02-20</td>
    </tr>
  </tbody>
</table>

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

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

### Exclude Column from Sorting

Source: https://github.com/tristen/tablesort/blob/main/demo/index.md

Add the 'data-sort-method="none"' attribute to a table header (th) or a table row (tr) to prevent it from being sorted.

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

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

### Custom Sort Values with data-sort Attribute

Source: https://context7.com/tristen/tablesort/llms.txt

Use the `data-sort` attribute on `<td>` elements to provide a custom sorting value, overriding the visible text. This is useful for sorting formatted dates or numbers.

```html
<table id="my-table">
  <thead>
    <tr>
      <th>Event</th>
      <th>Timestamp</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Login</td>
      <td data-sort="1357656438">01/08/13 @ 8:47:18am EST</td>
    </tr>
    <tr>
      <td>Logout</td>
      <td data-sort="1078673085">3/7/2004 @ 9:24:45 EST</td>
    </tr>
    <tr>
      <td>Update</td>
      <td data-sort="1420070400">01/01/15 @ 12:00:00am EST</td>
    </tr>
  </tbody>
</table>

<script src="tablesort.min.js"></script>
<script src="tablesort.number.js"></script>
<script>
  new Tablesort(document.getElementById('my-table'));
</script>
```

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

### Override Sort Data with data-sort Attribute

Source: https://github.com/tristen/tablesort/blob/main/demo/index.md

Use the 'data-sort' attribute on table cells to provide specific values for sorting, overriding the cell's inner text. This is useful for normalizing data.

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

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

### Exclude Rows from Sorting

Source: https://context7.com/tristen/tablesort/llms.txt

Add `data-sort-method='none'` to a `<tr>` element to prevent it from being reordered during sorting. This keeps the row in its original position.

```html
<table id="my-table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr data-sort-method="none">
      <td>-</td>
      <td>Total</td>
      <td>$100.00</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Apples</td>
      <td>$25.00</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Oranges</td>
      <td>$75.00</td>
    </tr>
  </tbody>
</table>

<script src="tablesort.min.js"></script>
<script src="tablesort.number.js"></script>
<script>
  new Tablesort(document.getElementById('my-table'));
</script>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.