- Technologies used: TypeScript/JavaScript, HTML, CSS, webpack, webpack-dev-server
- Table with some typical business functionalities and nice styling,
- Init the sTable library providing valid library directory:
<script src="sTable.js"></script>
- Create some html container, in which sTable will reside:
<div id="s-table-container"></div>
- Create sTable instance inside provided html container with data and columns definition:
const htmlElement = document.getElementById('s-table-container');
const sTableConfig = {
data: [
{ "id": 1, "name": "John Doe", "age": 30, "email": "[email protected]", "active": true },
{ "id": 2, "name": "Jane Smith", "age": 25, "email": "[email protected]", "active": false },
{ "id": 3, "name": "Mike Johnson", "age": 35, "email": "[email protected]", "active": true },
{ "id": 4, "name": "Emily Davis", "age": 28, "email": "[email protected]", "active": true }
],
columns: [
{ name: 'id' },
{ name: 'name' },
{ name: 'age' },
{ name: 'email' },
{ name: 'active' }
]
}
sTable.create(htmlElement, sTableConfig);
Whole example on how to use this library can be found in example_standalone.html file or on github repository.
Run npm run serve to run webpack-dev-server with hot code recompile and serve.
Example website using sTable can be viewed at http://localhost:9000/example.html.
Run npm run pack-lib to build library using webpack and pack it using npm.