pyrite-table
v0.1.5
Published
Table Component VanillaJS
Downloads
5
Readme
Table component with VanillaJS DEMO
Installation
- NPM
npm install pyrite-table
- Single-file DOWNLOAD
<script src="pyrite-table.min.js"></script>
Usage EXAMPLES
- ES6
import Table from 'pyrite-table';
const config = { ... };
const model = [{ ... }, ... ];
Table.load(config, model);
- CommonJS
const Table = require('pyrite-table');
const config = { ... };
const model = [{ ... }, ... ];
Table.load(config, model);
- Single-file
var config = { ... };
var model = [{ ... }, ... ];
pyrite.Table.load(config, model);
Config
{
table: "id-table",
loading: "id-loading",
fields: [{
title: "Col Title",
field: "property.in.model", // Optional if there is a custom template.
id: "id-for-filtering", // Use only when has a field value.
autorefresh: Number, // Optional: Number of miliseconds.
template: (row) => { // Optional: Custom template function.
return `<a href="mailto:${row.field_name}">${row.field_name}</a>`;
},
order: (a, b) => { // Optional: Custom order function or disabled if is equal to false.
if (a.field_name > b.field_name) return 1;
else if (a.field_name < b.field_name) return -1;
return 0;
}
}, ... ],
search: {
id: "id-for-global-search",
fields: ["property.in.model", "another.property", ... ] // Optional: By default all fields.
},
text: {
id: "id-text"
},
pagination: {
id: "id-pagination",
limit: Number // Number of results per page.
}
}
Model
[{
"name": "Pepe",
"lastname": "Garcia",
"age": 21,
"city": "Gijon"
}, {
"name": "Jose",
"lastname": "Alonso",
"age": 12,
"city": "Oviedo"
}, {
"name": "Maria",
"lastname": "Fernandez",
"age": 22,
"city": "Aviles"
}, {
"name": "Pepa",
"lastname": "Rodriguez",
"age": 33,
"city": "Loroñe"
}, ... ]