diff --git a/README.md b/README.md index 977f0cc..30f772b 100644 --- a/README.md +++ b/README.md @@ -1,41 +1,51 @@ -![table-sort-js](https://img.shields.io/npm/v/table-sort-js) -![table-sort-js](https://img.shields.io/npm/dm/table-sort-js) -![table-sort-js](https://img.shields.io/github/repo-size/leewannacott/table-sort-js) -![table-sort-js](https://img.shields.io/github/license/LeeWannacott/table-sort-js) -![table-sort-js](https://img.shields.io/github/actions/workflow/status/leewannacott/table-sort-js/jest.yml?branch=master) +![npm version](https://img.shields.io/npm/v/table-sort-js) +![npm downloads](https://img.shields.io/npm/dm/table-sort-js) +[![jsDeliver downloads](https://data.jsdelivr.com/v1/package/npm/table-sort-js/badge)](https://www.jsdelivr.com/package/npm/table-sort-js) +![repo size](https://img.shields.io/github/repo-size/leewannacott/table-sort-js) +![MIT licence](https://img.shields.io/github/license/LeeWannacott/table-sort-js) +![build status](https://img.shields.io/github/actions/workflow/status/leewannacott/table-sort-js/jest.yml?branch=master) -## TABLE-SORT-JS. +# TABLE-SORT-JS. - Description: HTML table sorting library with sort type inference builtin and browser extension available. [#VanillaJS](http://vanilla-js.com/) - [Demo](https://leewannacott.github.io/Portfolio/#/GitHub) - [Documentation.](https://leewannacott.github.io/table-sort-js/docs/about.html) (work in progress) -- [npm package.](https://www.npmjs.com/package/table-sort-js) +- [npm package.](https://www.npmjs.com/package/table-sort-js) and [jsDelivr](https://www.jsdelivr.com/package/npm/table-sort-js) - [Firefox](https://addons.mozilla.org/en-US/firefox/addon/table-sort-js/) and [Chrome](https://chrome.google.com/webstore/detail/table-sort-js/dioemkojkjhlhmfiocgniipejgkbfibb) browser extensions: Tables of any website you visit become sortable! ## Install instructions. -Option 1. Install from npm: ` npm install table-sort-js` +- Option 1: Install from npm: +```javascript +npm install table-sort-js +``` ```javascript import tableSort from "table-sort-js/table-sort.js"; ``` +Examples on using table-sort-js with frontend frameworks such as [React.js](https://leewannacott.github.io/table-sort-js/docs/react.html) and [Vue.js](https://leewannacott.github.io/table-sort-js/docs/vue.html) -Refer to the documentation for examples on using table-sort-js with frontend frameworks such as -[React.js](https://leewannacott.github.io/table-sort-js/docs/react.html) and [Vue.js](https://leewannacott.github.io/table-sort-js/docs/vue.html) +- Option 2: Load as script from a Content Delivery Network (CDN): +```javascript + +``` +Or Minified (smaller size, but harder to debug!): +```javascript + +``` +Refer to the documenation for examples on how to use table-sort-js with [HTML](https://leewannacott.github.io/table-sort-js/docs/html5.html) -Option 2. Download [table-sort.js](https://leewannacott.github.io/table-sort-js/table-sort.js) (Select save as.), or download a [minified version](https://cdn.jsdelivr.net/npm/table-sort-js) (~5kB) +- Option 3: Download [table-sort.js](https://cdn.jsdelivr.net/npm/table-sort-js@latest/table-sort.js) (Select save as.), or download a [minified version](https://cdn.jsdelivr.net/npm/table-sort-js@latest/table-sort.min.js) (~5kB) -Then add the following script before your HTML table: +Then rename and add the following script before your HTML table: ```html ``` -Refer to the documenation for examples on how to use table-sort-js with [HTML](https://leewannacott.github.io/table-sort-js/docs/html5.html) - -#### To make tables sortable: +## To make tables sortable: - Add `class="table-sort"` to HTML <table> tags. - Click on table headers to sort columns. @@ -49,6 +59,8 @@ Refer to the documenation for examples on how to use table-sort-js with [HTML](h | "table-arrows" | Display ascending or descending triangles. | | "remember-sort" | If clicking on different columns remembers sort of the original column. | +
+ | <th> classes | Description | | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | | "data-sort" | Sort by [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes), e.g <td data-sort="42"> | @@ -56,13 +68,17 @@ Refer to the documenation for examples on how to use table-sort-js with [HTML](h | "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) | | "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](https://en.wikipedia.org/wiki/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... | -| "numeric-sort" | Sorts numbers - Positive, Negative (Both minus and parenthesis representations), and Decimals | + +
| <th> Classes that change defaults. | Description | | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | @@ -70,6 +86,6 @@ Refer to the documenation for examples on how to use table-sort-js with [HTML](h | "alpha-sort" | Sort alphabetically (z11,z2); default is [natural sort](https://en.wikipedia.org/wiki/Natural_sort_order) (z2,z11). | | "punct-sort" | Sort punctuation; default ignores punctuation. | -#### Development: +## Development: If you wish to contribute, install instructions can be found [here.](https://leewannacott.github.io/table-sort-js/docs/development.html)