Advanced Table Plugin – Grid.js uses Preact under the hood to display templates and uses minimal Flux syntax to communicate with other components. It is a tiny bit superior, feature-rich, developer-friendly information table/grid library for representing tabular information on the internet.
Key Features:
- Small. Only 12 KB with all plug-ins (mini, gzip)
- Quickly! Grid.js has an in-house pipeline that takes care of data caching and manipulation
- Works with all web frameworks
- Supports all modern web browsers
- No seller lock
- MIT Licensed and FREE!
How to make use of it:
1. Install & Download:
# NPM $ npm install gridjs --save
2. Import the Grid.js.
// node.js import { Grid } from "gridjs"; // theme import "gridjs/dist/theme/mermaid.css"; // browser // theme
3. Create a container to carry the information grid.
4. Generate a fundamental information grid from an array of tabular information as follows:
new gridjs.Grid({ columns: ["Name", "Email", "URL"], data: [ ["CSS", "css@example.com", "https://webcodeflow.com/"], ["Script", "script@gmail.com", "https://webcodeflow.com/"], ["Com", "com@gmail.com", "https://webcodeflow.com/"] ] }).render(document.getElementById("example"));
5. Or from a current HTML table.
function () { const tableRef = useRef(null); const wrapperRef = useRef(null); useEffect(() => { const grid = new gridjs.Grid({ from: tableRef.current, }).render(wrapperRef.current); }); return ( <>
Name | |
---|---|
John | john@example.com |
Mike | mike@example.com |
6. Add pagination management to the information grid.
new gridjs.Grid({ columns: ["Name", "Email", "URL"], data: [ ["CSS", "css@example.com", "https://webcodeflow.com/"], ["Script", "script@gmail.com", "https://webcodeflow.com/"], ["Com", "com@gmail.com", "https://webcodeflow.com/"] ], pagination: true })
7. Add a search area to the information grid.
new gridjs.Grid({ columns: ["Name", "Email", "URL"], data: [ ["CSS", "css@example.com", "https://webcodeflow.com/"], ["Script", "script@gmail.com", "https://webcodeflow.com/"], ["Com", "com@gmail.com", "https://webcodeflow.com/"] ], search: true })
8. Determine if the information grid is sortable.
new gridjs.Grid({ columns: ["Name", "Email", "URL"], data: [ ["CSS", "css@example.com", "https://webcodeflow.com/"], ["Script", "script@gmail.com", "https://webcodeflow.com/"], ["Com", "com@gmail.com", "https://webcodeflow.com/"] ], sort: true })
// or new gridjs.Grid({ columns: [{ name: "Name", sort: true, }, { name: "Email" }, { name: "URL", width: '50%' }] });
9. Display a loading indicator whereas loading tabular information.
new gridjs.Grid({ columns: ["Name", "Email", "URL"], data: () => { return new Promise(resolve => { setTimeout(() => resolve([ ["CSS", "css@example.com", "https://webcodeflow.com/"], ["Script", "script@gmail.com", "https://webcodeflow.com/"], ["Com", "com@gmail.com", "https://webcodeflow.com/"] ]), 2000); }); } })
10. Import tabular information from a distant information supply.
new gridjs.Grid({ server: { url: '/path/to/api/', then: data => data.results.map(customData => [customData.title, customData.description, customData.author]) } })
11. Determine the width of the information grid.
new gridjs.Grid({ width: '100%', autoWidth: true })
12. Update configs & tabular information.
grid.updateConfig({ // new configs here });
13. Event handlers
grid.on('rowClick', (...args) => console.log('row: ' + JSON.stringify(args), args)); grid.on('cellClick', (...args) => console.log('cell: ' + JSON.stringify(args), args));
Full-featured Data Table JavaScript Library, Javascript Table Library
Changelog:
v1.15.3 (08/23/2020)
- feat(container): setting the state to Status.Ready as soon as the element is rendered
v1.15.2 (08/09/2020)
- repair(from): use innerHTML if td/th has one textual content factor
v1.15.1 (08/03/2020)
- repair(server): Server initiator should take away capabilities from args
v1.15.0 (08/02/2020)
- Adding information callback to ServerStorage
v1.14.0 (07/26/2020)
- feat: id ought to settle for a perform as nicely
- chore: exclude assessments/** in tsconfig
v1.13.0 (07/25/2020)
- feat(serach): including selector perform
v1.12.0 (07/19/2020)
- feat(tabular): including toArray
- Adding PluginManager
- repair(theme): including padding-top to the container to unblock youngster box-shadow
v1.11.0 (07/11/2020)
- Adding fastened header
- Fixed Search mustn’t name actions.search when the key phrase is undefined
v1.10.0 (07/05/2020)
- Adding international EventEmitter
- Fix(pipeline): unregister ought to examine the steps datatype
See Demo And Download
Official Website(grid-js): Click Here
This superior jQuery/javascript plugin is developed by grid-js. For extra Advanced Usages, please go to the official website.
Be First to Comment