- setTable(tableEle) ⇒
SortableTable Specify the table DOM element you want to make sortable table
- events() ⇒
EventEmitter Returns event emitter you can set callback like "events().on('sort',(e)=>{});"
- setData(rows) ⇒
SortableTable Specify the data you want to set in the table
- resetData() ⇒
SortableTable Restore sorted data and sort direction to original
- getData() ⇒
Returns Sorted data
The data returned here is different from the original data specified by setData. Because this library does not change the original data at all. If you want the sort result, call getData method.- sort(colId, forceSortDir)
Sort by the specified column ID. If the sort direction has been specified, the sort is forcibly performed in the specified sort direction.
Otherwise, If the column is active(selected), reverse the sort direction. If the column is NOT active, Sort in the previous sort direction
Kind: global class
Author: Tom Misawa (riversun.org@gmail.com,https://github.com/riversun)
This library makes tables sortable.
- Make the table sortable
- Wroks with plain HTML, Bootstrap, Vue, React and etc.
- No external library required, works as a standalone, no dependency.
- A small size library , 13KB including images.
MIT License
setTable(tableEle) ⇒ SortableTable
Specify the table DOM element you want to make sortable table
Kind: global function
| Param | Type | Description |
|---|---|---|
| tableEle | HTMLTableElement |
HTML DOM Table Object - Specify "sortable-table" in class of parent element of table. - Specify column ID in "data-id" attribute of th element under thead tr. - Add data-header attribute to data header column - Assign "sortable" attribute as a th element attribute to the column to be sorted. Here is an example HTML of table <div class="sortable-table"> <table id="my-table1"> <thead> <tr> <th data-id="id" data-header> <div>#</div> </th> <th data-id="name" sortable> name </th> <th data-id="price" sortable> price($) </th> <th data-id="weight" sortable> weight(carat) </th> </tr> </thead> </table> </div> |
Returns event emitter you can set callback like "events().on('sort',(e)=>{});"
setData(rows) ⇒ SortableTable
Specify the data you want to set in the table
Kind: global function
| Param | Type | Description |
|---|---|---|
| rows | Object |
Array data combining id and value for each row. example: const rows = [ { id: 0, name: 'Diamond', weight: 1.0, price: 9000, }, { id: 1, name: 'Amethyst', weight: 3.0, price: 200, }, { id: 2, name: 'Emerald', weight: 2.5, price: 2500, }, { id: 3, name: 'Ruby', weight: 2.0, price: 2000, }, ]; |
resetData() ⇒ SortableTable
Restore sorted data and sort direction to original
Returns Sorted data
The data returned here is different from the original data specified by setData.
Because this library does not change the original data at all.
If you want the sort result, call getData method.
Kind: global function
Returns: Sorted Data
Sort by the specified column ID. If the sort direction has been specified, the sort is forcibly performed in the specified sort direction.
Otherwise, If the column is active(selected), reverse the sort direction. If the column is NOT active, Sort in the previous sort direction
Kind: global function
| Param | Type | Description |
|---|---|---|
| colId | String |
Specify the column id (specified by data-id) you want to sort |
| forceSortDir | String |
Optional. If specified, sort forcibly. Any one of the following three can be set. asc: Sort specified columns in ascending order desc: Sort specified columns in descending order toggle: Reverse the current sort direction |