|
1 | 1 |  |
2 | | - |
| 2 | + |
3 | 3 |  |
4 | 4 |  |
5 | 5 |  |
|
12 | 12 | - [Documentation.](https://leewannacott.github.io/table-sort-js/docs/about.html) |
13 | 13 | (work in progress) |
14 | 14 | - [npm package.](https://www.npmjs.com/package/table-sort-js) |
15 | | -## Install instructions - pick one option. |
| 15 | +## Install instructions. |
16 | 16 |
|
17 | | -1. Install from npm: ` npm install table-sort-js` |
| 17 | +<b>Option 1.</b> Install from npm: ` npm install table-sort-js` |
18 | 18 |
|
19 | 19 | ```javascript |
20 | 20 | import tableSort from "table-sort-js/table-sort.js"; |
21 | 21 | ``` |
22 | 22 | Refer to the documentation for examples on using table-sort-js with frontend frameworks such as |
23 | 23 | [ReactJS.](https://leewannacott.github.io/table-sort-js/docs/react.html) |
24 | 24 |
|
25 | | -2. [Download table-sort.js](https://leewannacott.github.io/table-sort-js/table-sort.js) (Select save as.) |
| 25 | +<b>Option 2.</b> [Download table-sort.js](https://leewannacott.github.io/table-sort-js/table-sort.js) (Select save as.) |
26 | 26 |
|
27 | 27 | Then add the following script before your HTML table: |
28 | 28 | ```html |
29 | 29 | <script src="table-sort.js"></script> |
30 | 30 | ``` |
31 | 31 | Refer to the documenation for examples how to use table-sort-js with [HTML.](https://leewannacott.github.io/table-sort-js/docs/html5.html) |
32 | | -#### To make a table sortable: |
33 | | -- Add `class="table-sort"` to HTML <table> tags. Click on the columns heads to sort. |
| 32 | +#### To make tables sortable: |
| 33 | + |
| 34 | +- Add `class="table-sort"` to HTML <table> tags. |
| 35 | +- Click on table headers to sort columns. |
34 | 36 |
|
35 | 37 | #### Classes: |
36 | 38 |
|
37 | | -| table classes | Description | |
| 39 | +| <table> classes | Description | |
38 | 40 | | -------------- | ------------------------------------------------ | |
39 | 41 | | "table-sort" | Make the table sortable! (Words, numbers, dates) | |
40 | 42 | | "table-arrows" | Display ascending or descending triangles. | |
41 | 43 | | "remember-sort"| If clicking on different columns remembers sort of the original column. | |
42 | 44 |
|
43 | | -| th classes | Description | |
| 45 | +| <th> classes | Description | |
44 | 46 | | --------------- | ----------------------------------------------------------- | |
45 | 47 | | "order-by-desc" | Order by descending on first click. (default is aescending) | |
46 | 48 | | "file-size" | Sort file sizes(B->TiB) uses the binary prefix. (e.g KiB) | |
47 | 49 | | "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"> | |
48 | 50 |
|
49 | | -#### Notes: |
50 | | - |
51 | | -- Makes use of natural sorting to sort numerical values correctly. |
52 | | -- If `<thead>` does not exist it will be created by using data from first row. `<tbody>` is optional. |
53 | | - |
54 | 51 | #### Development: |
55 | 52 | If you wish to contribute, install instructions can be found [here.](https://leewannacott.github.io/table-sort-js/docs/development.html) |
0 commit comments