leewannacott / table-sort-js Goto Github PK

View Code? Open in Web Editor NEW

68.0 5.0 27.0 2.33 MB

HTML table sorting with no dependencies.

Home Page: https://cdn.jsdelivr.net/npm/table-sort-js@latest/table-sort.js

License: MIT License

HTML 24.64% JavaScript 69.68% CSS 5.26% Shell 0.43%

javascript html table sorting vanilla-js table-sort-js table-sorting table-sort sort-table sortable

table-sort-js's Introduction

TABLE-SORT-JS.

Description: HTML table sorting library with sort type inference builtin and browser extension available. #VanillaJS
Demo
Documentation. (work in progress)
npm package. and jsDelivr
Firefox and Chrome browser extensions: Tables of any website you visit become sortable!

Install instructions.

Option 1: Load as script from a Content Delivery Network (CDN):

<script src="https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.min.js"></script>

Or non-minified version (larger size, but easier to debug!):

<script src="https://cdn.jsdelivr.net/npm/table-sort-js/table-sort.js"></script>

Example on how to use table-sort-js with HTML

Option 2: Install from npm:

npm install table-sort-js

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

Examples on using table-sort-js with frontend frameworks such as React.js and Vue.js

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, file sizes)...
"no-class-infer"	Turns off inference for adding sort classes automatically i.e (file-size-sort, runtime-sort, dates-dmy-sort).
"table-arrows"	Display ascending or descending triangles.
"remember-sort"	If clicking on different columns remembers sort of the original column.
"cells-sort"	sort cells (td) rather than table rows (tr); useful for keeping table rows with classes/attributes in place.

<th> classes	Description
"data-sort"	Sort by data attributes, e.g <td data-sort="42">. Useful for doing custom sorts.
"dates-mdy-sort"	Sorts dates in US style mm/dd/yyyy format;. e.g (12/28/2023). Can use "/" or "-" as separator. Overides inferred "dates-dmy-sort" class.
"onload-sort"	Sort column on loading of the page. Simulates a click from the user. (can only sort onload for one column)
"disable-sort"	Disallow sorting the table by this specific column.

<th> Inferred Classes.	Description
"numeric-sort"	Sorts numbers including decimals - Positive, Negative (in both minus and parenthesis representations).
	Supports common currencies e.g ($£€¥) and percentage signs e.g (0.39%)
"dates-dmy-sort"	Sorts dates in dd/mm/yyyy format. e.g (18/10/1995). Can use "/" or "-" as separator.
"dates-ymd-sort"	Sorts dates in ISO 8601 yyyy/mm/dd format. e.g (2021/10/28). Use "/" or "-" as separator.
"file-size-sort"	Sorts file sizes(B->TiB) uses the binary prefix. (e.g 10 B, 100 KiB, 1 MiB); optional space between number and prefix.
"runtime-sort"	Sorts runtime in hours minutes and seconds e.g (10h 1m 20s). Useful for sorting the GitHub actions Run time column...

<th> Classes that change defaults.	Description
"order-by-desc"	Order by descending on first click. (default is aescending)
"alpha-sort"	Sort alphabetically (z11,z2); default is natural sort (z2,z11).
"punct-sort"	Sort punctuation; default ignores punctuation.

Development:

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

table-sort-js's People

Contributors

Stargazers

Watchers

table-sort-js's Issues

Move dependencies in package.json to be dev dependencies.

It's a more accurate description of what they are.

Publish the library as a package on npm.

Only the <td> and their values are moved

When you sort the table, only the <td> elements are moved, not the <tr>. That could be ok, but the associated ids in the <tr> don't move either, making it difficult if we want to make further treatment on the table (changing data for example)

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

days-of-week
months
clothes-sizes

Give table-sort-js the ability to sort tables horizontally.

table-sort-js only sorts tables vertically by table column headers. Some user's might want to sort horizontally by the left most column; Add an optional tag to allow sorting horizontally.

Relevant file: https://github.com/LeeWannacott/table-sort-js/blob/master/public/table-sort.js

Run a minifier over code.

Run a minifier over shipped code. Setup GitHub workflow to minify table-sort.js.

Setup test/table.js to handle multiple columns.

As of now the testing is only setup for testing a single column change test/table.js to handle multiple columns.

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.

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?

Write tests for features that require testing of multiple columns (after #60).

Once issue #60 completed: Write tests for #58 colspan issue and remember-sort tag.

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.

Refactor file-size-sort

file-size-sort functionality currently bloats half the code base. fix it!

placeholder for pull request

Restructure the project.

Having table-sort.js in public folder is confusing to contributors. Have public-sort.js in src folder and then have GitHub action workflow to copy it into public and the npm folder when ready to ship.

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

Feature: Add the ability to search for items in the table with optional search bar.

Add the ability to search for items in the table with optional search bar.

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")

Bug: the doesn't exist anymore so table needs a <thead>

Need to change the to createTableHead (Should be easy issue)

For lines:

the.appendChild(sortableTable.rows[0]);
      sortableTable.insertBefore(the, sortableTable.firstChild);

Test that npm package works with React, Vue and Angular.

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>

Publish the library as a package on npm.

Update example table.

Update the example table in the README to better showcase what types table sort can sort.

Add a second file-size tag class option for metric prefix.

Currently there is a file-size option: <th class="file-size-sort"> . This outputs to a binary prefix (e.g. KiB, MiB .. etc)
Give an option to output to metric prefix (e.g. KB, MB ... etc) . Possibly on class="metric-file-size-sort", or similar.

Relevant file: public/table-sort.js

placeholder for pull request

Display an arrow after the the user has clicked a column header to sort the table

Give the user visual feedback after they have clicked a column header to sort the table. An up or down arrow depending on whether the table has been sorted in ascending or descending order.

Relevant file: https://github.com/LeeWannacott/table-sort-js/blob/master/public/table-sort.js

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

refactor file-size-sort

file-size-sort functionality currently bloats half the code base. fix it!

Mixed positive and negative numbers don't sort correctly for "en-US" at least

Hi! New to this project. Very nice and lightweight...thanks!

I notice that the list of numbers (3, -2, 1) sorts ascending as (1, -2, 3), rather than (-2, 1, 3) as I think would be more expected.

It looks like this is the result of including the ignorePunctuation parameter to localeCompare. Naively, if we just eliminated ignorePunctuation, it would work as expected, in at least this case. But I'm sure this was done for a reason. Can you let me know why so I can see if I can propose a solution?

Thanks again!

Bug: Using tags inside <td></td> with "file-size" class and React breaks file-size sort.

Using tags inside <td></td>. With "file-size" class and React breaks file-size sort.

Using tags inside <td></td> for example:
<td><center> {${repo.size}KB}</center></td>

Centering works however it breaks the file-size sort function.

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

Make browser extensions

When user clicks on column to sort and then different column to sort goes back to clicking original column should go back to sorting by the default option.

When user clicks on a column to sort and then a different column to sort and then goes back to the original column it should go back to sorting to the default option (as though it was the first click on the column: ascending) instead of desc (unless order-by-desc tag is used). Currently it doesn't

Not necessarily a bug; but an implementation that makes more sense.

Implementation should be changed to this:
https://streamable.com/sl349w

Add support for Safari web browser.

If table-sort-js doesn't support MacOS's Safari web browser; then add support.

Relevant file: https://github.com/LeeWannacott/table-sort-js/blob/master/public/table-sort.js

Set up testing for sorting by data attribute.

This would require making change to test/table.js and test/table.test.js to write some tests.

Documentation: Make example for Angular.

Make example documentation for using TABLE-SORT-JS with VueJS and Angular.
Suitable issue for someone with experience using these frameworks.

There is an example for ReactJS made already in public/docs/react.html.

We need examples for other front-end frameworks such as VueJS and Angular.
Relevant files:
public/docs/vue.html
public/docs/angular.html

Testing: Setup GitHub actions workflow to check for broken links.

Write a script that checks for broken links and then:
Setup GitHub actions workflow to check for broken links. Links might become broken; we should make this a part of automated testing CI.

Bug: Table-arrows bugged when clicking on another column.

🐛 Table-arrows bugged when clicking on another column.

Because changed the functionality with this, but arrows is going of times clicked.

 // Checking if user has clicked different column from the first column if yes reset times clicked.
        columnIndexesClicked.push(columnIndex);
        if (timesClickedColumn === 1 && columnIndexesClicked.length > 1) {
          const lastColumnClicked =
            columnIndexesClicked[columnIndexesClicked.length - 1];
          const secondLastColumnClicked =
            columnIndexesClicked[columnIndexesClicked.length - 2];
          if (lastColumnClicked !== secondLastColumnClicked) {
            timesClickedColumn = 0;
            columnIndexesClicked.shift();
          }
        }

Relevant files: table-sort.js in public.

Write more tests.

Write more tests for sorting; that don't already exist..

Install: First clone repository and run npm install
Run tests using: npm run test
Write tests in: https://github.com/LeeWannacott/table-sort-js/blob/master/test/table.test.js

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#

Add a tag class for disabling sort on specific table columns.

The user might not want all columns to sort when clicked allow them to disable specific columns with a class such as: disable-sort.

Feature: Add the option for pagination.

Add the ability to paginate if the table becomes a certain size.

placeholder for pull request

Uncaught TypeError: doc.getElementsByTagName is not a function or its return value is not iterable at HTMLDocument.tableSortJs (table-sort.js:21) I think its this error here

Uncaught TypeError: doc.getElementsByTagName is not a function or its return value is not iterable
at HTMLDocument.tableSortJs (table-sort.js:21) I think its this error here

Need to fix it. For index.html to be able to be opened.

leewannacott / table-sort-js Goto Github PK

table-sort-js's Introduction

TABLE-SORT-JS.

Install instructions.

To make tables sortable:

Classes:

Development:

table-sort-js's People

Contributors

Stargazers

Watchers

Forkers

table-sort-js's Issues

Expected

What's happening today

Reproducible case

Recommend Projects

Recommend Topics

Recommend Org