AnyGrids
AnyGrids - Free JavaScript tool for visualizing any business data ✌️
Resources
Installation and usage
Start by installing AnyGrids as a node module and save it as a dependency in your package.json:
npm install anygrids --save
Then, include the JS file from node_modules:
<script src="node_modules/anygrids/anygrids.js"></script>Or via unpkg.com:
<script src="https://unpkg.com/anygrids@latest/anygrids.js"></script>Now, you can create an instance of AnyGrids table:
<div id="anygrids">The component will appear here</div><script> //JSON data example: const data = [ { id: 1, email: "michael.lawson@mail.in", first_name: "Michael", last_name: "Lawson", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/follettkyle/128.jpg", linear: [0, 30, 5, 29, 34], bar: [0, 30, 5, 29, 34], pie: [0.25, 0.30, 0.45], orders: 5, }, { id: 2, email: "lindsay.ferguson@mail.in", first_name: "Lindsay", last_name: "Ferguson", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/araa3185/128.jpg", linear: [0, 30, 5, 29, 34], bar: [0, 30, 5, 29, 34], pie: [0.25, 0.30, 0.45], orders: 25, }, { id: 3, email: "michael.lawson@mail.in", first_name: "Michael", last_name: "Lawson", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/follettkyle/128.jpg", linear: [0, 30, 5, 29, 34], bar: [0, 30, 5, 29, 34], pie: [0.25, 0.30, 0.45], orders: 5, }, { id: 4, email: "lindsay.ferguson@mail.in", first_name: "Lindsay", last_name: "Ferguson", avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/araa3185/128.jpg", linear: [0, 30, 5, 29, 34], bar: [0, 30, 5, 29, 34], pie: [0.25, 0.30, 0.45], orders: 25, } ]; document.addEventListener("DOMContentLoaded", function() { new AnyGrids({ container: 'anygrids', //div id data, //JSON data pagination: { perPage: 2 }, rows: { child: { template: '<div><img src="avatar"> <div style="display:flex;">first_name last_name</div></div>pie_render' } }, columns: [ {field: 'id', title: '', type: 'string', width: 30, sortable: true}, {field: 'email', title: 'E-mail', type: 'string', width: 200}, {field: 'first_name', title: 'First name', type: 'string', width: 200, sortable: true}, {field: 'last_name', title: 'Last name', type: 'string', width: 100, sortable: true}, {field: 'avatar', title: 'Avatar', type: 'image', width: 50, class: 'avatar'}, {field: 'linear', title: 'Linear', type: 'sparklines-linear', width: 150}, {field: 'bar', title: 'Bar', type: 'sparklines-bar', width: 150}, {field: 'pie', title: 'Pie', type: 'sparklines-pie', width: 150}, {field: 'orders', title: 'Orders', type: 'number', width: 150, total: {show: true, label: 'Total orders: '}}, ] }) }); </script>