LdTableSort
Local json data table sorter
Features
- json in-data
- header: auto generated (zero config), scroller, customizable
- computed columns (can sort & filter these columns as well)
- format: user definable per column
- sort: native, alphanum (is_sort_alphanum), customizable
- search: allcolumns filter (config.is_searchAllCols_input), customizable
- css in js
- show json valued cells (default JSON.stringify)
- update_data (data)
- row select callback (selCallback)
- side effect free, lightweight
- few dependencies (jQuery)
Working example:
(demo.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- <script src="node_modules/jquery/dist/jquery.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- <script src="https://source.runkitcdn.com/npm/@torcbek/ld_table_sort/ld_table_sort.js?engine=10.x.x&t=1590961565003"></script> -->
<script src="ld_table_sort.js"></script>
</head>
<body>
<h1>LdTableSort Demo</h1>
<div id="myTabDiv"></div>
<script>
let names = ["James", "Anthony", "Matthew", "William", "Joshua", "Jacob", "Jayden"];
let makeData = function(no){
let rows = [];
for (let i = 0; i < no; ++i) {
rows.push({
id: i,
idStr: "" + i,
txt: names[i % names.length],
val: Math.random() * 10,
json: {
a: i,
b: 2*i
}
});
}
return rows;
}
const table_fullConfigExample = new LdTableSort(
document.getElementById('myTabDiv'),
{
// --------------------------------------------------------
// header: optional column definitions
// syntax:
// key: '' - default column label = key name
// key: 'label' - optional user defined column label
// key: {
// label: - optional user defined column label
// format: function - generate value html from cell value
// computed: function - generate value html from row values
// }
// --------------------------------------------------------
header: {
id: '', //gets default header label = 'id'
idStr: {
is_sort_alphanum: true, //sort this column alphanumeric
},
txt: 'Text', //gets header label 'Text'
val: {
label: 'Formatted Value <img src="resources/flag_thumb_no.png">',
// userdefined format (you can also return html)
format: function (cell_val) {
let v = Math.round(cell_val * 1000) / 1000;
return v;
},
},
json : '',
value: {
label: 'Computed Value',
// user defined: computed column values
computed: function (row, i) {
let v = Math.round(row.val * 10) / 10;
return "<div class='special_col'>● " +
i + ' ' + v + '</div>';
}
},
'Computed: * 2': {
// computed column with label defined in key field
computed: function (row) { return row.val * 2; }
},
html_content: {
// compute html formatted values
computed: function (row) {
return " a<br/>b";
}
},
},
// --------------------------------------------------------
// data: js or json array to view
// --------------------------------------------------------
data: makeData(500),
// --------------------------------------------------------
// config: optional configuration
// is_searchAllCols_input - true: add 'all columns' search field
// css_height - set css table height (vertical scrollbar height)
// css_backcolor_th - th {background: .. }
// css_backcolor_th_computed - th {background: .. } for computed columns
// --------------------------------------------------------
config: {
css_backcolor_th : 'rgba(88, 185, 178, 0.95)',
css_backcolor_th_computed : 'rgba(35, 201, 230, 0.95)',
is_searchAllCols_input: true,
css_height: "300px" //scroll field height
}
},
// --------------------------------------------------------
// callback for row / cell clicked
// --------------------------------------------------------
function (selRow, selInfo) { //selected row, info
console.log('selected:', selRow, selInfo);
}
);
</script>
</body>
</html>```