JavaScript client-side HTML table sorting library with no dependencies required.

Last update: Dec 14, 2022

Overview

TABLE-SORT-JS.

Description: A JavaScript client-side HTML table sorting library with no dependencies required.
Demo
Documentation. (work in progress)
npm package.

Install instructions.

Option 1. Install from npm: npm install table-sort-js

import tableSort from "table-sort-js/table-sort.js";

Refer to the documentation for examples on using table-sort-js with frontend frameworks such as ReactJS.

Option 2. Download table-sort.js (Select save as.)

Then add the following script before your HTML table:

<script src="table-sort.js"></script>

Refer to the documenation for examples how to use table-sort-js with HTML.

To make tables sortable:

Add class="table-sort" to HTML <table> tags.
Click on table headers to sort columns.

Classes:

<table> classes	Description
"table-sort"	Make the table sortable! (Words, numbers, dates)
"table-arrows"	Display ascending or descending triangles.
"remember-sort"	If clicking on different columns remembers sort of the original column.

<th> classes	Description
"order-by-desc"	Order by descending on first click. (default is aescending)
"file-size"	Sort file sizes(B->TiB) uses the binary prefix. (e.g KiB)
"data-sort"	Sort by data attributes, e.g <td data-sort="42">
"disable-sort"	Disallow sorting the table by this specific column

Development:

If you wish to contribute, install instructions can be found here.

Comments

Bug: Incorrectly ordering when colspan attribute is used

If attribute colspan is used in the table header, the following columns are not ordered correctly.

<th scope="col">Column 1</th>                 <- sorted correctly
<th scope="col" colspan="2">Column 2</th>     <- sorted correctly
<th scope="col">Column 3</th>                 <- sorted incorrectly (sorted by "Column 2")
<th scope="col">Column 4</th>                 <- sorted incorrectly (sorted by "Column 3")

opened by msebela 15

Sort by units

Thanks for this sort library @LeeWannacott

Is it possible to add a way to sort by units such as KB/KiB, MB/MiB, GB/GiB etc? Currently the sort doesn't take these units into account if a number is prefixed to them.

opened by MichaelM00 12
Uncaught ReferenceError: the is not defined
Hi, I tried installing the library in every way possible and it always throws this error in the console when I try to use it:

Uncaught ReferenceError: the is not defined at makeTableSortable (table-sort.js:42) at HTMLDocument.tableSortJs (table-sort.js:35)

any ideas?
opened by Bedkow 7
Vue.html updated!

@LeeWannacott Hi there, after a long studious fight to find the solution I was able to come up with something. During my research, it was the most common code that can be used for your library in vue. It is simple and easy because I have tested it. Other solutions can be complicated. You told me to avoid them! I will try to find a way to make other solutions simpler. But now, if you accept my pull request.. I will start work on the Angular examples and then later come onto other Vue examples!

Regards!

opened by haiderali171 5
Support display: none;

When implementing a feature that displays tr that matches the text entered by the user, it is likely that the implementation will simply hide tr that do not match by specifying display: none;. However, the current table-sort.js does not work if a tr with display: none; is included in a table. This problem can be easily fixed by simply fixing it to get tr that is not display: none.

opened by blono 3
Add sorting for Weekdays, Months and Clothes sizes.
table-sort-js doesn't currently sort for Weekdays, Months, Clothe Sizes. You could implement these on a class tag for <th> e.g class="months" class="weekdays" class="clothing-sizes".

Months: January, February, March, April, May, June, July, August, September, October, November, December. Weekdays: Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday. Clothe sizes: XS, S, M, L, XL ....

[X] days-of-week

[ ] months

[ ] clothes-sizes

good first issue
opened by LeeWannacott 3
Support multiple class for the table element

Most table elements will already have some class attached to it.

I would suggest to change the call to if (sortableTable.className === "table-sort") { into if (sortableTable.classList.contains("table-sort")) {

Cheers

opened by PierreR 3
Vue 3.0 Example was added!

@LeeWannacott Have a look! I added the Vue 3.0 example on the same page! I may have saved the original files in the same folders due to upstream conflicts I was previously having (but were taken care of!).

opened by haiderali171 2
Sort by data-attribute

Hi, your library can sort by dates, but my date format is (02.19.2020) Therefore, I would suggest adding the ability to sort by date attribute in which you can, for example, put time in milliseconds

opened by fisherspoon 2
Addition of Vue3.0 example (Pull V2)

@LeeWannacott I have made this request as per the instructions you prescribed in the previous and now closed pull request. Hopefully, I have done it right this time! Cheers

opened by haiderali171 1
PR without package.json or package.lock.json

@LeeWannacott is this what you wanted? I did backup the aforementioned files (ping me if you need them!). This PR is without those files though as this is what you wished for!

opened by haiderali171 1
Numbers do not sort correctly with differing decimal counts

When creating a table while using several decimal counts the sorting counts number of decimals as higher than a higher value, this can be seen in the provided screenshot.

opened by Osiaris 2

Colspan sorting appears to be ignoring data-sort column values

Now the #58 has landed,colspan is working in that clicks on subsequent <th> elements aren't sorting the wrong column. However, it looks like the colspan columns are ignoring the data-sort attribute of a given column.

Expected

A click on the colspan element to sort first by the data-sort attribute of the first column inside the colspan, and then by the value of the cells in that same column if a cell doesn't have the data-sort attribute.

What's happening today

It looks like the table is ignoring the data-sort attribute and just always sorting by the value.

Reproducible case

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .table-sort td,
        .table-sort th {
          padding: 10px;
        }

        .table-sort th {
          background: #808080;
          color: #fff;
          cursor: pointer;
          font-weight: normal;
          text-align: left;
          text-transform: capitalize;
          vertical-align: baseline;
          white-space: nowrap;
        }

        .table-sort th:hover {
          color: #000;
        }
    </style>
</head>
<body>
    <table class="available table-sort table-arrows">
        <thead>
            <tr>
                <th class="disable-sort"></th>
                <th class="">Category</th>
                <th class="show_name">Show</th>
                <th colspan="2" class="">Overall</th>
                <th colspan="2" class="">On Our Dates</th>
                <th class="">First Sold Out</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="tags"></td>
                <td class="category">Comedy</td> <td class="show_name">Show 1</td>
                <td class="ratio all" data-sort="72">18/25</td>
                <td class="pct all">72%</td>
                <td class="ratio ours" data-sort="75">3/4</td>
                <td class="pct ours">75%</td>
                <td>2022-07-30</td>
            </tr><tr>
                <td class="tags"></td>
                <td class="category">Music</td>
                <td class="show_name">Show 2</td>
                <td class="ratio all" data-sort="60">6/10</td>
                <td class="pct all">60%</td>
                <td class="ratio ours" data-sort="75">3/4</td>
                <td class="pct ours">75%</td>
                <td>2022-08-04</td>
            </tr><tr>
                <td class="tags"></td>
                <td class="category">Theatre</td>
                <td class="show_name">Show 3</td>
                <td class="ratio all" data-sort="47">7/15</td>
                <td class="pct all">47%</td>
                <td class="ratio ours" data-sort="75">3/4</td>
                <td class="pct ours">75%</td>
                <td>2022-07-19</td>
            </tr><tr>
                <td class="tags"></td>
                <td class="category">Comedy</td>
                <td class="show_name">Show 4</td>
                <td class="ratio all" data-sort="67">10/15</td>
                <td class="pct all">67%</td>
                <td class="ratio ours" data-sort="67">2/3</td>
                <td class="pct ours">67%</td>
                <td>2022-07-19</td>
            </tr><tr>
                <td class="tags"></td>
                <td class="category">Comedy</td>
                <td class="show_name">Show 5</td>
                <td class="ratio all" data-sort="75">9/12</td>
                <td class="pct all">75%</td>
                <td class="ratio ours" data-sort="50">1/2</td>
                <td class="pct ours">50%</td>
                <td>2022-07-29</td>
            </tr><tr>
                <td class="tags"></td>
                <td class="category">Comedy</td>
                <td class="show_name">Show 6</td>
                <td class="ratio all" data-sort="67">16/24</td>
                <td class="pct all">67%</td>
                <td class="ratio ours" data-sort="50">2/4</td>
                <td class="pct ours">50%</td>
                <td>2022-07-26</td>
            </tr><tr>
                <td class="tags"></td>
                <td class="category">Comedy</td>
                <td class="show_name">Show 7</td>
                <td class="ratio all" data-sort="62">16/26</td>
                <td class="pct all">62%</td>
                <td class="ratio ours" data-sort="50">2/4</td>
                <td class="pct ours">50%</td>
                <td>2022-07-31</td>
            </tr>
        </tbody>
    </table>
    <script src="https://leewannacott.github.io/table-sort-js/table-sort.js"></script>
</body>
</html>

opened by nk9 6

Base Feature: Make table-sort-js do a stable-sort by default.

Make table-sort-js do stable sorting so the user does not experience inconsistent sorting when sorting with columns that have duplicated values in their <td>.

https://streamable.com/dz2q12#

opened by LeeWannacott 1
Question: sort on a special row on loading site

Hi, I'm generating my table from database data. The data is fetched in several foreach loops. So I cannot sort my data by default. Is there a option to use your sorting on loading the site? (like I am clicking on a tablehead) Thank you.

opened by nadjak77 3
Feature request: Ability to exclude a row from table-sort

I have icons in my table, which uses table-sort-js. I then noticed that you can sort by icon, which I didn't want. I read the documentation and there is no feature to exclude a row. That's why I requested this feature

opened by leap0x7b 2

Releases(1.8.0)

1.8.0(Aug 7, 2022)
What's Changed

fix: colspan messing with other column sorting by @scodes73 in https://github.com/LeeWannacott/table-sort-js/pull/59

New Contributors

@scodes73 made their first contribution in https://github.com/LeeWannacott/table-sort-js/pull/59

Full Changelog: https://github.com/LeeWannacott/table-sort-js/compare/1.7.9...1.8.0
Source code(tar.gz)
Source code(zip)
1.7.9(May 7, 2022)
What's Changed

Add support for "disable-sort" class per column by @vhtkrk in https://github.com/LeeWannacott/table-sort-js/pull/57

New Contributors

@vhtkrk made their first contribution in https://github.com/LeeWannacott/table-sort-js/pull/57

Full Changelog: https://github.com/LeeWannacott/table-sort-js/compare/1.6.9...1.7.9
Source code(tar.gz)
Source code(zip)
1.6.9(Apr 10, 2022)
What's Changed

Support display: none; by @blono in https://github.com/LeeWannacott/table-sort-js/pull/56

New Contributors

@blono made their first contribution in https://github.com/LeeWannacott/table-sort-js/pull/56

Full Changelog: https://github.com/LeeWannacott/table-sort-js/compare/1.6.8...1.6.9
Source code(tar.gz)
Source code(zip)
table-sort.js(13.37 KB)
1.6.8(Jan 19, 2022)
What's Changed in release 1.6.8

Create LICENSE by @LeeWannacott in https://github.com/LeeWannacott/table-sort-js/pull/6

updated: Readme.md example table updated by @anupshrestha11 in https://github.com/LeeWannacott/table-sort-js/pull/12

Use relative path for the demo's script src by @erlliam in https://github.com/LeeWannacott/table-sort-js/pull/16

Set thead's cursor styling instantly by @erlliam in https://github.com/LeeWannacott/table-sort-js/pull/17

Refactor by @erlliam in https://github.com/LeeWannacott/table-sort-js/pull/18

Refactor code and reuse values by @erlliam in https://github.com/LeeWannacott/table-sort-js/pull/20

Added more tests by @aliosman21 in https://github.com/LeeWannacott/table-sort-js/pull/22

Create jest.yml by @LeeWannacott in https://github.com/LeeWannacott/table-sort-js/pull/24

Move code converting Kib, Mib ... etc to bytes to removeUnitTypeConvertToBytes by @emadflash in https://github.com/LeeWannacott/table-sort-js/pull/38

PR without package.json or package.lock.json by @haiderali171 in https://github.com/LeeWannacott/table-sort-js/pull/41

Move dependencies in package.json to be dev dependencies. #40 by @ylsv in https://github.com/LeeWannacott/table-sort-js/pull/42

Addition of Vue3.0 example (Pull V2) by @haiderali171 in https://github.com/LeeWannacott/table-sort-js/pull/49

Fix missing thead by @LeeWannacott in https://github.com/LeeWannacott/table-sort-js/pull/55

New Contributors

@LeeWannacott made their first contribution in https://github.com/LeeWannacott/table-sort-js/pull/6

@anupshrestha11 made their first contribution in https://github.com/LeeWannacott/table-sort-js/pull/12

@erlliam made their first contribution in https://github.com/LeeWannacott/table-sort-js/pull/16

@aliosman21 made their first contribution in https://github.com/LeeWannacott/table-sort-js/pull/22

@emadflash made their first contribution in https://github.com/LeeWannacott/table-sort-js/pull/38

@ylsv made their first contribution in https://github.com/LeeWannacott/table-sort-js/pull/42

Full Changelog: https://github.com/LeeWannacott/table-sort-js/commits/1.6.8
Source code(tar.gz)
Source code(zip)
table-sort.js(13.08 KB)

JavaScript client-side HTML table sorting library with no dependencies required.

Related tags

Overview

TABLE-SORT-JS.

Install instructions.

To make tables sortable:

Classes:

Development:

Comments

Expected

What's happening today

Reproducible case

Releases(1.8.0)

1.8.0(Aug 7, 2022)

What's Changed

New Contributors

1.7.9(May 7, 2022)

What's Changed

New Contributors

1.6.9(Apr 10, 2022)

What's Changed

New Contributors

1.6.8(Jan 19, 2022)

What's Changed in release 1.6.8

New Contributors

Owner

Lee Wannacott

A table component for your Mantine data-rich applications, supporting asynchronous data loading, column sorting, custom cell data rendering, row context menus, dark theme, and more.

✏️ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.

Fast and minimal JS server-side writer and client-side manager.

Easy server-side and client-side validation for FormData, URLSearchParams and JSON data in your Fresh app 🍋

Another table select prompt plugin of inquirer.js, with powerful table render and filters.

Creates a table of contents in a DOM element optionally linked to with anchors. No jQuery or other dependencies.

A vanilla JavaScript library that automatically generates the "Table of Contents" of an HTML document.

Simple modern JavaScript ES6 library that fetches JSON data into an HTML table which displays nicely within a Bootstrap 4 Card.

An unreliable and overall unusable sorting library for numbers with a global cache on the edge.

A Javascript library to export svg charts from the DOM and download them as an SVG file, PDF, or raster image (JPEG, PNG) format. Can be done all in client-side.

A vanilla javascript library to generate Avataaars on the client or server side!

Fnon is a client-side JavaScript library for models, loading indicators, notifications, and alerts which makes your web projects much better.

Make drag-and-drop easier using DropPoint. Drag content without having to open side-by-side windows

This is an application that entered the market with a mobile application in real life. We wrote the backend side with node.js and the mobile side with flutter.

This plugin allows side-by-side notetaking with videos. Annotate your notes with timestamps to directly control the video and remember where each note comes from.

This Plugin is For Logseq. If you're using wide monitors, you can place journals, linked references, and journal queries side by side.

An interactive Bitcoin tutorial for orange-pilled beginners. Illustrates technical Bitcoin concepts using JavaScript and some Bitcoin Core RPC commands. Programming experience is helpful, but not required.

Quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code

Yunisdev-table2csv - Lightweight library to convert HTML table to CSV file