{"id":13657598,"url":"https://github.com/tofsjonas/sortable","last_synced_at":"2025-04-09T09:00:17.650Z","repository":{"id":37663404,"uuid":"96293738","full_name":"tofsjonas/sortable","owner":"tofsjonas","description":"Vanilla JavaScript table sort","archived":false,"fork":false,"pushed_at":"2025-02-26T17:43:29.000Z","size":442,"stargazers_count":472,"open_issues_count":2,"forks_count":50,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-04-02T08:19:35.038Z","etag":null,"topics":["event-listener","javascript","sort","sortable","table","table-sorting","tablesort","tablesorter","tiny","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tofsjonas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-05T08:06:47.000Z","updated_at":"2025-03-31T09:34:45.000Z","dependencies_parsed_at":"2023-01-31T19:15:48.300Z","dependency_job_id":"23b91abb-2326-4c05-a020-68bab5909b6f","html_url":"https://github.com/tofsjonas/sortable","commit_stats":{"total_commits":58,"total_committers":9,"mean_commits":6.444444444444445,"dds":0.603448275862069,"last_synced_commit":"d0feb974f5e5aac796001aed2f80b11e0a5169e8"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tofsjonas%2Fsortable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tofsjonas%2Fsortable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tofsjonas%2Fsortable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tofsjonas%2Fsortable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tofsjonas","download_url":"https://codeload.github.com/tofsjonas/sortable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248008627,"owners_count":21032556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["event-listener","javascript","sort","sortable","table","table-sorting","tablesort","tablesorter","tiny","vanilla-javascript","vanilla-js"],"created_at":"2024-08-02T05:00:46.250Z","updated_at":"2025-04-09T09:00:17.611Z","avatar_url":"https://github.com/tofsjonas.png","language":"TypeScript","readme":"\u003c!-- markdownlint-disable MD033 MD026 --\u003e\n\u003ch1\u003esortable\u003c/h1\u003e\n\u003ch5\u003e- a tiny, vanilla/plain JavaScript table sorter\u003c/h5\u003e\n\n[![GitHub Issues or Pull Requests](https://img.shields.io/github/issues/tofsjonas/sortable)](https://github.com/tofsjonas/sortable) [![NPM Version](https://img.shields.io/npm/v/sortable-tablesort)](https://www.npmjs.com/package/sortable-tablesort) [![NPM Downloads](https://img.shields.io/npm/dw/sortable-tablesort)](https://www.npmjs.com/package/sortable-tablesort) [![GitHub Repo stars](https://img.shields.io/github/stars/tofsjonas/sortable)](https://github.com/tofsjonas/sortable) [![jsdelivr](https://data.jsdelivr.com/v1/package/gh/tofsjonas/sortable/badge)](https://www.jsdelivr.com/package/gh/tofsjonas/sortable)\n\nMakes any table with **class=\"sortable\"**, er, sortable. The user can click on a table header and change the sorting of the table rows.\n\nJust include the JavaScript and it will work. No function calls are needed, everything is handled by an **eventListener**.\n\n\u003ch2\u003eDemo\u003c/h2\u003e\n\nYou can find a simple demo on \u003chttps://tofsjonas.github.io/sortable/\u003e\n\n\u003ch2\u003eTable of Contents\u003c/h2\u003e\n\n- [Factoids](#factoids)\n- [\"Installation\"](#installation)\n  - [1. link to jsDelivr](#1-link-to-jsdelivr)\n  - [2. copy file to assets folder](#2-copy-file-to-assets-folder)\n  - [3. npm package](#3-npm-package)\n    - [a) use links in the html](#a-use-links-in-the-html)\n    - [b) import files in javascript](#b-import-files-in-javascript)\n- [Non-sortable field](#non-sortable-field)\n  - [...using `class=\"no-sort\"`](#using-classno-sort)\n  - [...using `CSS`](#using-css)\n  - [...using `td` instead of `th`](#using-td-instead-of-th)\n- [Indicators/arrows on the left side](#indicatorsarrows-on-the-left-side)\n- [NOTE ABOUT CSS/SCSS](#note-about-cssscss)\n  - [Sticky headers](#sticky-headers)\n- [Sorting sizes, dates and such](#sorting-sizes-dates-and-such)\n- [Alternative sorting](#alternative-sorting)\n- [Colspans/Sort on specific column](#colspanssort-on-specific-column)\n- [Concerning `rowspan`](#concerning-rowspan)\n- [Ascending sort](#ascending-sort)\n- [Tiebreaker / secondary sort](#tiebreaker--secondary-sort)\n- [Empty/null rows always last](#emptynull-rows-always-last)\n- [Accessibility](#accessibility)\n- [Sort Events](#sort-events)\n- [Sort on load](#sort-on-load)\n- [Thank you...](#thank-you)\n\n## Factoids\n\n- **1.52KB** minified. (795 bytes gzipped)\n\n- Works with **JavaScript generated tables**. (since we are using an eventListener)\n\n- **Lightning fast**. _Huge_ tables will make it slow and may freeze the browser, especially for mobiles, so you know...\n\n- Requires **thead** and **tbody**.\n\n- **rowspan** is not supported 😢\n\n- **cross browser**, ~~ie9+~~ No longer ie9 compatible. Then again, maybe it already wasn't 🤷\n\n- NOT tested with React, Angular, Vue, etc.\n\n- Works with [Svelte](https://svelte.dev/)!\n\n## \"Installation\"\n\nThere are three ways to use sortable, all of which have their pros and cons. [S Anand](https://github.com/sanand0) and [dkhgh](https://github.com/dkhgh) had some [interesting thoughts](https://github.com/tofsjonas/sortable/issues/28) about it.\n\n### 1. link to jsDelivr\n\n```html\n\u003ctable class=\"sortable\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003e\u003cspan\u003eRole\u003c/span\u003e\u003c/th\u003e\n      \u003cth\u003eName\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eGenius\u003c/td\u003e\n      \u003ctd\u003eRick\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ca href=\"javascript:alert('standalone javascript works!');\"\u003eSidekick\u003c/a\u003e\u003c/td\u003e\n      \u003ctd\u003eMorty\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/gh/tofsjonas/sortable@latest/dist/sortable.min.css\" rel=\"stylesheet\" /\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/tofsjonas/sortable@latest/dist/sortable.min.js\"\u003e\u003c/script\u003e\n```\n\nThe `span` on line four is just there to prove that you can have elements inside `th`!\n\n⚠️ _If you are concerned about bugs, I recommend using version numbers instead of \"latest\"._\n\n### 2. copy file to assets folder\n\nSame as above, but link to your own files from the `dist` directory\n\n```html\n...\n\u003clink href=\"/assets/sortable.min.css\" rel=\"stylesheet\" /\u003e\n\u003cscript src=\"/assets/sortable.min.js\"\u003e\u003c/script\u003e\n...\n```\n\n### 3. npm package\n\nFirst,\n\n```bash\nnpm install sortable-tablesort\n# yarn add sortable-tablesort\n# pnpm install sortable-tablesort\n```\n\nNow you can:\n\n#### a) use links in the html\n\nSame as above, with links to files from the `dist` directory\n\n```html\n...\n\u003clink href=\"./node_modules/sortable-tablesort/dist/sortable.min.css\" rel=\"stylesheet\" /\u003e\n\u003cscript src=\"./node_modules/sortable-tablesort/dist/sortable.min.js\"\u003e\u003c/script\u003e\n...\n```\n\nor\n\n#### b) import files in javascript\n\n```javascript\n// main.js\nimport 'sortable-tablesort/dist/sortable.min.css'\nimport 'sortable-tablesort/dist/sortable.min.js'\n```\n\n## Non-sortable field\n\n### ...using `class=\"no-sort\"`\n\nIf you wish to disable sorting for a specific field, the easiest (and best) way is to add `class=\"no-sort\"` to it, like so:\n\n```html\n\u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth class=\"no-sort\"\u003eRole\u003c/th\u003e\n    \u003cth\u003eName\u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/thead\u003e\n```\n\nSorting will not be triggered if you click on \"Role\".\n\n### ...using `CSS`\n\nThis is a bit trickier, but it doesn't require any changes to the html, so I guess it could be worth it in some cases.\n\n```css\n/* the first column in every sortable table should not be sortable*/\n.sortable th:nth-child(1) {\n  pointer-events: none;\n}\n\n/* the seventh column in the second .sortable table should not be sortable*/\n.sortable:nth-of-type(2) th:nth-child(7) {\n  pointer-events: none;\n}\n```\n\n### ...using `td` instead of `th`\n\nThe eventListener only triggers on `th`, not `td`, so this would disable sorting for \"Role\":\n\n```html\n\u003cthead\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eRole\u003c/td\u003e\n    \u003cth\u003eName\u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/thead\u003e\n```\n\n⚠️ _Since `th` and `td` are not the same thing, you would most likely still have to use CSS to make them look the way you want. (It might also mess with accessibility.) In **some** cases it could be worth it, but I recommend the `.no-sort` alternative_.\n\n## Indicators/arrows on the left side\n\nIf you have text that is aligned on the right side, you may want to have the arrows on the left side.\n\nThis is solved by adding a class to the css and using `::before` instead of `::after`.\n\n(You can of course use a pure css solution, without class names - just like with the [non-sortable field](#non-sortable-field) - but _that_ I will leave for you to figure out.)\n\n```css\n.sortable th.indicator-left::after {\n  content: '';\n}\n.sortable th.indicator-left::before {\n  margin-right: 3px;\n  content: '▸';\n}\n/* etc. */\n```\n\n\u003e _Full example: [CSS](https://github.com/tofsjonas/sortable/blob/main/sortable-base.css), [SCSS](https://github.com/tofsjonas/sortable/blob/main/src/sortable-base.scss)_\n\n## NOTE ABOUT CSS/SCSS\n\nThe `css/scss` in this repo was only ever meant as an example. It was never intended to be actually _used_.\n\nThat said, if you're feeling lazy, here are two stylesheets you can use:\n\n```html\n\u003c!-- This will add arrows, as well as support for .no-sort and .indicator-left --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/gh/tofsjonas/sortable@latest/sortable-base.min.css\" rel=\"stylesheet\" /\u003e\n\n\u003c!-- This will make it look like the tables in the example, with arrows, striped rows etc. --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/gh/tofsjonas/sortable@latest/sortable.min.css\" rel=\"stylesheet\" /\u003e\n```\n\n### Sticky headers\n\nI'm not sure if it's a good idea to have it in the main css, BUT if you are using the above `sortable(.min).css` file (not the -base files) and want sticky headers, you can simply add the class `sticky` to the table.\n\nBlame [razorkyle](https://github.com/razorkyle), it was his idea! 😜\n\n```html\n\u003ctable class=\"sortable sticky\"\u003e\n  ...\n\u003c/table\u003e\n```\n\nIf you are not using the css file, you can use the following css:\n\n```css\n.sortable thead th {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n```\n\n## Sorting sizes, dates and such\n\nUsing the `data-sort` attribute in `tbody` \u003e `td` you can have one visible value and one sortable value. This is useful in case you have for instance sizes like kb, Mb, GB, or really weird date formats. 😉\n\n```html\n\u003ctable class=\"sortable\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eMovie Name\u003c/th\u003e\n      \u003cth\u003eSize\u003c/th\u003e\n      \u003cth\u003eRelease date\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eZack Snyder's Justice League\u003c/td\u003e\n      \u003ctd data-sort=\"943718400\"\u003e900MB\u003c/td\u003e\n      \u003ctd data-sort=\"20210318\"\u003e03/18/2021\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eThe Sound of Music\u003c/td\u003e\n      \u003ctd data-sort=\"1610612736\"\u003e1.5GB\u003c/td\u003e\n      \u003ctd data-sort=\"19651209\"\u003e12/09/1965\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n## Alternative sorting\n\nIf you click on a table header while holding **shift** or **alt** an alternative\n`data-sort-alt` attribute will override `data-sort`.\n\n```html\n\u003ctable class=\"sortable\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eMovie Name\u003c/th\u003e\n      \u003cth\u003eSize\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd data-sort-alt=\"c\" data-sort=\"a\"\u003eA\u003c/td\u003e\n      \u003ctd data-sort-alt=\"b\" data-sort=\"c\"\u003eB\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd data-sort-alt=\"e\" data-sort=\"f\"\u003eD\u003c/td\u003e\n      \u003ctd data-sort-alt=\"f\" data-sort=\"e\"\u003eE\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd data-sort-alt=\"e\" data-sort=\"f\"\u003eD\u003c/td\u003e\n      \u003ctd data-sort-alt=\"f\" data-sort=\"e\"\u003eE\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n## Colspans/Sort on specific column\n\nUsing the `data-sort-col` attribute in `thead` \u003e `th`, you can sort on a different column than the one that was clicked. For instance if you want to have colspans. Like so:\n\n```html\n\u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth\u003e\u003c/th\u003e\n    \u003cth\u003eCategory\u003c/th\u003e\n    \u003cth class=\"show_name\"\u003eShow\u003c/th\u003e\n    \u003cth colspan=\"2\"\u003eOverall\u003c/th\u003e\n    \u003cth colspan=\"2\" data-sort-col=\"5\"\u003eOn Our Dates\u003c/th\u003e\n    \u003cth data-sort-col=\"7\"\u003eFirst Sold Out\u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"tags\"\u003e\u0026nbsp;\u003c/td\u003e\n    \u003ctd class=\"category\"\u003eComedy\u003c/td\u003e\n    \u003ctd class=\"show_name\"\u003eShow 1\u003c/td\u003e\n    \u003ctd class=\"ratio all\" data-sort=\"72\"\u003e18/25\u003c/td\u003e\n    \u003ctd class=\"pct all\"\u003e72%\u003c/td\u003e\n    \u003ctd class=\"ratio ours\" data-sort=\"75\"\u003e3/4\u003c/td\u003e\n    \u003ctd class=\"pct ours\"\u003e75%\u003c/td\u003e\n    \u003ctd\u003e2022-07-30\u003c/td\u003e\n  \u003c/tr\u003e\n  ...\n\u003c/tbody\u003e\n```\n\n## Concerning `rowspan`\n\nRowspans are not supported. Maybe I could do a half-assed implementation, but I don't think it would be worth it. You can read my justification in [Issue 71](https://github.com/tofsjonas/sortable/issues/71)\n\nIf you have a good idea, please let me know!\n\n## Ascending sort\n\nBy adding `asc` to `table`, the default sorting direction will be **ascending** instead of descending\n\n```html\n\u003ctable class=\"sortable asc\"\u003e\n  \u003cthead\u003e\n    ...\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    ...\n  \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n## Tiebreaker / secondary sort\n\nIf you wish to sort by a different column when two values are equal, you can use the `data-sort-tbr` attribute, like so:\n\n```html\n\u003ctable class=\"sortable asc\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth data-sort-tbr=\"1\"\u003eYear\u003c/th\u003e\n      \u003cth\u003eMonth\u003c/th\u003e\n      \u003cth\u003eDay\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e2010\u003c/td\u003e\n      \u003ctd\u003e07\u003c/td\u003e\n      \u003ctd\u003e25\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e2010\u003c/td\u003e\n      \u003ctd\u003e11\u003c/td\u003e\n      \u003ctd\u003e12\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e2010\u003c/td\u003e\n      \u003ctd\u003e04\u003c/td\u003e\n      \u003ctd\u003e25\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\nWhen clicking **Year**, if they are the same, we will sort on **Month**.\n\n## Empty/null rows always last\n\nAdding `class=\"n-last\"` to `\u003ctable class=\"sortable\"\u003e` will make empty/null values always be sorted last, similar to what SQL does with `ORDER BY foo NULLS LAST`.\n\n```html\n\u003ctable class=\"sortable n-last\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eText\u003c/th\u003e\n      \u003cth class=\"indicator-left\"\u003eNumber\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ejkl\u003c/td\u003e\n      \u003ctd\u003e0.4\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eThis will always be sorted after the others\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eabc\u003c/td\u003e\n      \u003ctd\u003e0\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003edef\u003c/td\u003e\n      \u003ctd\u003e0.2\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n```\n\n⚠️ _Note that a string of blank spaces is **not** considered null/empty. `\u003ctd data-sort=\" \"\u003e\u003c/td\u003e` will be sorted normally._\n\n## Accessibility\n\nSortable is not very accessible in its raw form. It does not support screen readers, and it does not have any keyboard support. Including `sortable.a11y.min.js` in your project will add some basic accessibility features.\n\n```html\n\u003ctable class=\"sortable\"\u003e\n  ...\n\u003c/table\u003e\n\u003clink href=\"dist/sortable.min.css\" rel=\"stylesheet\" /\u003e\n\u003cscript src=\"dist/sortable.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"dist/sortable.a11y.min.js\"\u003e\u003c/script\u003e\n```\n\nBy including the file the global function `enhanceSortableAccessibility` will automatically run through all existing `.sortable` tables, but you can also run it manually, like so:\n\n```js\nenhanceSortableAccessibility([table1, table2,...etc.])\n```\n\nThe function adds an `aria-label` to each th, as well as `tabindex=\"0\"` to each th in the thead of each table, making it possible to tab through the headers. It updates the `aria-label` depending on the direction.\n\nIf you want to import it instead:\n\n```ts\nimport { enhanceSortableAccessibility } from 'sortable-tablesort/dist/esm/enhanceSortableAccessibility'\nenhanceSortableAccessibility([table1, table2,...etc.])\n```\n\n## Sort Events\n\nThe table element dispatches two custom events that bubble up the DOM tree:\n\n- `sort-start`: Fired when sorting begins\n- `sort-end`: Fired when sorting is complete\n\nYou can listen for these events on any parent element, including the document itself:\n\n```js\n// Listen for events from any sortable table\ndocument.addEventListener('sort-start', function (e) {\n  console.log('Sorting started on:', e.target) // logs the table element\n})\n\ndocument.addEventListener('sort-end', function (e) {\n  console.log('Sorting complete on:', e.target) // logs the table element\n})\n\n// Or listen to a specific table\nconst table = document.querySelector('.sortable')\ntable.addEventListener('sort-start', () =\u003e console.log('Sorting started'))\ntable.addEventListener('sort-end', () =\u003e console.log('Sorting complete'))\n```\n\n## Sort on load\n\nIf you wish to sort a table on load, I would recommend doing something like this:\n\n```html\n\u003ctable class=\"sortable\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eMovie Name\u003c/th\u003e\n      \u003cth id=\"movie-size\"\u003eSize\u003c/th\u003e\n      \u003cth\u003eRelease date\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    ...\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003cscript\u003e\n  window.addEventListener('load', function () {\n    const el = document.getElementById('movie-size')\n    // without id:\n    // const el = document.querySelector('.sortable th:first-child')\n    // const el = document.querySelector('.sortable th:nth-child(2)')\n    // const el = document.querySelectorAll('.sortable')[3].querySelector('th:nth-child(7)')\n    // etc.\n    if (el) {\n      el.click()\n    }\n  })\n\u003c/script\u003e\n```\n\nCombine this with `\u003ctable class=\"sortable asc\"\u003e` to reverse the sort order. Or do `el.click()` twice!\n\n## Thank you...\n\n- ...[Nikita Dunajevs](https://github.com/dunajevs) for the [ascending sort](#ascending-sort) idea!\n\n- ...[wodny](https://github.com/wodny) for the [alternative sorting](#alternative-sorting) idea!\n\n- ...[Nick Kocharhook](https://github.com/nk9) for the [colspan sorting](#colspanssort-on-specific-column) idea!\n\n- ...[mxve](https://github.com/mxve) for the **nested elements** inside `th` fix!\n\n- ...[Christian Petersson](https://github.com/Issen007) and [Abit Salihu](https://github.com/abitsalihu) for the [sort on load](#sort-on-load) example!\n\n- ...[GazHay](https://github.com/gazhay) for the idea to sort multiple `\u003ctbody /\u003e`!\n\n- ...[Gordan Ratkovic](https://github.com/GordanRatkovic) for the [tiebreaker / secondary sort](#tiebreaker--secondary-sort) idea!\n\n- ...[chatcoda](https://github.com/chatcoda) for the `\u003ctd\u003e\u003c/td\u003e` / `\u003ctd\u003e0\u003c/td\u003e` sorting bug fix!\n\n- ...[Christian Garbs](https://github.com/mmitch) for fixing the `dataset` bug!\n\n- ...[Witold Baryluk](https://github.com/baryluk) for pointing out some inefficiencies!\n\n- ...[Nick](https://github.com/data-handler) for raising a whole bunch of issues! 🤯️\n\n- ...[James Pudson](https://github.com/nepsilon) for the [empty last](#emptynull-rows-always-last) suggestion, AND for finding the \"`data-sort` ignored when empty\" bug! 🥳️\n\n- ...[Jojo-IO](https://github.com/Jojo-IO) for the finding the \"`parseFloat` messes up time values\" bug!\n\n- ...[Steve Wirt](https://github.com/swirtSJW) for lifting the Accessibility issue! 🦾️\n\n- ...[GazHay](https://github.com/gazhay) for the [sort events](#sort-events) idea!\n","funding_links":[],"categories":["TypeScript","HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftofsjonas%2Fsortable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftofsjonas%2Fsortable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftofsjonas%2Fsortable/lists"}