@riversun/sortable-table
Advanced tools
Library template for both node and browser using ES6,Webpack,Babel,Jest,ESLint
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.
npm install @riversun/sortable-table
And import like,
import SortableTable from '@riversun/sortable-table';
or
<script> tag from CDN<script src="https://cdn.jsdelivr.net/npm/@riversun/sortable-table/lib/sortable-table.js"></script>
Here is the typical code for sortable-table.
Use thead tr th for the table header element. Specify the data-id attribute for the header element th. The data-id attribute is linked to the key in data.
<!DOCTYPE html>
<html lang="en">
<body>
<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>
<script src="https://cdn.jsdelivr.net/npm/@riversun/sortable-table/lib/sortable-table.js"></script>
<script>
const data = [
{
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,
},
];
const sortableTable = new SortableTable();
// set table element
sortableTable.setTable(document.querySelector('#my-table1'));
// set data to be sorted
sortableTable.setData(data);
// handling events
sortableTable.events()
.on('sort', (event) => {
console.log(`[SortableTable#onSort]
event.colId=${event.colId}
event.sortDir=${event.sortDir}
event.data=\n${JSON.stringify(event.data)}`);
});
</script>
</body>
</html>
You can customize cell-rendering by specifying rendering function with #setCellRenderer like as follows.
Run on PEN
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<style>
body {
padding-top: 60px;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Sortable-table on Bootstrap</a>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<div class="p-1 col-sm-12 sortable-table">
<table class="table table-hover table-bordered" id="my-table1">
<thead>
<tr>
<th scope="col" data-id="id" data-header>
<div>#</div>
</th>
<th scope="col" data-id="name" sortable>
name
</th>
<th scope="col" data-id="url" sortable>
url
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="row">
<div class="p-1 col-sm-12">
<h5>Sort by code</h5>
</div>
</div>
<div class="row">
<div class="p-1 col-sm-12 d-flex justify-content-around">
<button id="btnSortName" class="btn btn-primary m-1 w-100">Sort by Name(toggle)</button>
<button id="btnSortPrice" class="btn btn-primary m-1 w-100">Sort by Price(asc)</button>
<button id="btnSortWeight" class="btn btn-primary m-1 w-100">Sort by Weight(desc)</button>
<button id="btnReset" class="btn btn-primary m-1 w-100">Reset</button>
</div>
</div>
</div>
<script src="sortable-table.js"></script>
<script>
const data = [
{
id: 0,
name: 'Apple',
url: 'https://www.apple.com'
},
{
id: 1,
name: 'Amazon',
url: 'https://www.amazon.com'
},
{
id: 2,
name: 'Google',
url: 'https://www.google.com'
},
{
id: 3,
name: 'Facebook',
url: 'https://www.facebook.com'
},
];
const sortableTable = new SortableTable();
// set table element
sortableTable.setTable(document.querySelector('#my-table1'));
// set callback function for table cell custom rendering
sortableTable.setCellRenderer((col, row) => {
const colValue = row[col.id];
// cell-is-a-header
if (col.isHeader) {
if (typeof colValue !== 'undefined') {
return `<th>${colValue}</th>`;
}
return '<th></th>';
}
// cell-is-not-a-header
if (typeof colValue !== 'undefined') {
if (col.id === 'url') {
return `<td><a href="${colValue}" target="_blank">${colValue}</a></td>`;
}
return `<td>${colValue}</td>`;
}
return '<td></td>';
});
// set data to be sorted
sortableTable.setData(data);
// handling events
sortableTable.events()
.on('sort', (event) => {
console.log(`[SortableTable#onSort]
event.colId=${event.colId}
event.sortDir=${event.sortDir}
event.data=\n${JSON.stringify(event.data)}`);
});
// button handlers
document.querySelector('#btnSortName')
.addEventListener('click', () => {
sortableTable.sort('name', 'toggle');//'asc','desc','toggle'
});
document.querySelector('#btnSortPrice')
.addEventListener('click', () => {
sortableTable.sort('price', 'asc');
});
document.querySelector('#btnSortWeight')
.addEventListener('click', () => {
sortableTable.sort('weight', 'desc');
});
document.querySelector('#btnReset')
.addEventListener('click', () => {
sortableTable.resetData();
});
</script>
</body>
</html>
Open Classes and Methods
FAQs
Library template for both node and browser using ES6,Webpack,Babel,Jest,ESLint
We found that @riversun/sortable-table demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.