Clicking on <th> tags reorders rows of an HTML table in ascending/descending order.
### The Important Stuff ###
When enabled, clicking on a table header ("<th>") will reorder the table based on the values belonging to that column of the table. Order is ascending/descending, click to toggle.
### Change Log ###
1.7: (Community Contribution!) Support tables without headers and use tbody
1.6: (Community Contribution!) Better handling of negative numbers
1.5: (Community Contribution!) State saved using chrome local storage, and columns can now be sorted independently
1.4: Added Alphanumeric sorting algorithm
1.3: minor bug fix
1.2: toggle asc/desc
1.1: removed jQuery dependency
1.0: initial upload
### Verbose ###
Tables are clean and great for displaying information - when that information is ordered, at least. It is frustrating to search through a disorganized table, and not much better when the table is ordered using a bad index.
Suppose I am looking through a contact list for a friend and the list is ordered by last name as opposed to first name. If I'm sitting there looking for his first name, I'm going to have a bad time. This extension changes all of that. Every single table posted online can now be easily resorted at the click of the mouse, just as it would in a spreadsheet.
And best of all, this extension is open source! Feel free to fork and/or contribute.
http://github.com/jchamet/html-table-sort
Latest reviews
- (2021-04-05) Cam Blythe: Great! It's really useful for sorting Roblox developer products by price rather than the default ID sort.
- (2021-01-15) Ethan M: I can't get it to work on SeekingAlpha: https://seekingalpha.com/account/portfolio/summary?portfolioId=ABC π
- (2020-10-11) Yurika Mana: Not Work. Here's the table code. <table class="configurable-product-table cart items data table"> <thead> <tr class="first last"> <th class="qty attributes" position: relative; top: 0px;">Size</th> <th class="qty avaibility" position: relative; top: 0px;">Availability</th> <th class="qty unit" position: relative; top: 0px;">Unit Price</th> <th class="qty subtotal" position: relative; top: 0px;">Subtotal</th> <th class="qty" position: relative; top: 0px;">Qty</th> <th class="no-display hidden" position: relative; top: 0px;"></th> </tr> </thead> <tbody class="cart item"> <tr class="item-info" data-product-id="18683"> <td class="qty first-attr bss-swatch" attribute-code="at98_taglia" attribute-value="5211" attribute-id="307"> <input type="hidden" name="bss_super_attribute[0][307]" value="5211" class="swatch-attribute"> <div class="swatch-attribute at98_taglia" attribute-code="at98_taglia" attribute-id="307"><div class="swatch-attribute-options clearfix"><div class="swatch-option text" option-type="0" option-id="5211" option-label="38" option-tooltip-thumb="" option-tooltip-value="38">38</div></div></div></td> <td class="qty">1</td> <td class="qty"> <div>$47,855</div> <div class="unit-old">$68,363</div> </td> <td class="qty subtotal">$0.00</td> <td class="qty"> <input type="text" class="qty_att_product input-text qty validate-not-negative-number required-entry" id="super_group_qty_0" value="0" name="config_table_qty[0]" index="0"> <input type="hidden" class="unit-price" value="47855"> </td> <td class="no-display hidden"> <input type="hidden" value="" name="quote_item_id[0]"> </td> </tr> <tr class="item-info" data-product-id="18683"> <td colspan="100%" class="action"> </td> </tr> <tr class="item-info" data-product-id="18681"> <td class="qty first-attr bss-swatch" attribute-code="at98_taglia" attribute-value="5228" attribute-id="307"> <input type="hidden" name="bss_super_attribute[1][307]" value="5228" class="swatch-attribute"> <div class="swatch-attribute at98_taglia" attribute-code="at98_taglia" attribute-id="307"><div class="swatch-attribute-options clearfix"><div class="swatch-option text" option-type="0" option-id="5228" option-label="40" option-tooltip-thumb="" option-tooltip-value="40">40</div></div></div></td> <td class="qty">1</td> <td class="qty"> <div>$47,855</div> <div class="unit-old">$68,363</div> </td> <td class="qty subtotal">$0.00</td> <td class="qty"> <input type="text" class="qty_att_product input-text qty validate-not-negative-number required-entry" id="super_group_qty_1" value="0" name="config_table_qty[1]" index="1"> <input type="hidden" class="unit-price" value="47855"> </td> <td class="no-display hidden"> <input type="hidden" value="" name="quote_item_id[1]"> </td> </tr> <tr class="item-info" data-product-id="18686"> <td colspan="100%" class="action"> </td> </tr> </tbody> </table>
- (2019-11-25) Erin T: This does not work on the tables I want to sort. I want to sort the list of Facebook posts made for a page under the page's "Insight" tab. There's no effect when I click on the title. When I inspect the element of the header, it is indeed using the "th" tag, but with a lot of class information within it. I'm bummed. I really need to be able to sort this.
- (2019-07-24) chibuike ukegbu: doesn't sort any html table on any website for me
- (2018-12-10) Judy Adams: hi just what i need for sorting the results on Ancestry; works perfectly. i actually prefer the firefox browser i was using tabletools2 for many years but now its gone and there is not another option i have found the tablesorter userscript on greasyfork but it just is not doing a good job. Anyway from what i read you might be able to port your app to firefox as they say that many chrome apps can easily be ported to them with a few small changes. would you please consider doing so you will have a lot of genealogists using ancestry via firefox extra happy. i have all ready posted a link to your app for chrome on an ancestry support page and would do the same if you port it to firefox. please
- (2018-10-18) Working great for my work. Thank you very much
- (2018-08-30) Ezekiel Yovel: Didn't sort properly - the order was all wrong (tried both ascending and descending) all was mixed up. Perhaps it doesn't sort lexicographicaly.
- (2018-01-18) Pez Cuckow: Uncaught TypeError: Cannot read property 'innerHTML' of null at chrome-extension://bpgbkjehkeffmmjfmdlmjjlffgkdcljp/table-sort.js:22:41 at Array.sort (native) at HTMLTableCellElement.tableHeaders.item.onclick (chrome-extension://bpgbkjehkeffmmjfmdlmjjlffgkdcljp/table-sort.js:19:15)
- (2017-07-13) Daveheardt: The extension works on most tables. I'd happily rated this extension with 5 stars if it wasn't taking out tr elements out of the tbody. This breaks the styling on a lot of tables and frankly - its annoying!
- (2017-02-02) Andrew McQuerry: It does what is says it does. Would love some additional options... maybe a white-list or black-list for domain/url path
- (2016-12-07) Kai Wa: hahah works so great. Thanks!
- (2016-04-19) ONO OOGAMI: Does what it should do.
- (2016-01-31) μ΄μΆμ°: μ΄κ±΄ λλ°μ΄μΌ μ λ ¬ μλ¨Ήνλ κ³³μμλ μλλ€!
- (2015-05-25) Za Ka: Does not work on the website I need it.
- (2015-01-19) Jake Forrester: Works great for sorting text, not so well for sorting numbers of varying length. It seems to sort integers as strings (ex: 1, 100, 1000, 2, 200, 2000, 3...)
- (2014-07-10) Antoine Pourchet: Intuitive, easy to use, and it does the job!
Statistics
Installs
1,000
history
Category
Rating
3.5 (27 votes)
Last update / version
2020-01-13 / 1.7
Listing languages
en