Author: | grid-js |
---|---|
Views Total: | 1,083 views |
Official Page: | Go to website |
Last Update: | January 29, 2023 |
License: | MIT |
Preview:

Description:
Grid.js is a tiny yet advanced, feature-rich, developer-friendly data table/grid library for representing tabular data on the web.
Key Features:
- Works as a standalone JS library.
- Loads tabular data from any JS data.
- Async data import.
- Also works with the existing HTML table.
- Server & client Side rendering.
- Server or Client Side search.
- Server or Client Side pagination.
- Server or Client Side sorting.
- Cell formatting.
- Free for both personal and commercial use.
- And much more.
Install & Download:
# NPM $ npm install gridjs --save
How to use it:
1. Import the Grid.js.
// ES Module import { Grid } from "gridjs"; // theme import "gridjs/dist/theme/mermaid.css";
// browser <script src="./dist/gridjs.umd.js"></script> // theme <link href="./dist/theme/mermaid.min.css" rel="stylesheet" />
// OR <script type="module"> import { Grid, html } from "https://unpkg.com/gridjs?module"; </script>
2. Create a container to hold the data grid.
<div id="example"></div>
3. Generate a basic data grid from an array of tabular data as follows:
new gridjs.Grid({ columns: ["Name", "Email", "URL"], data: [ ["CSS", "[email protected]", "https://www.cssscript.com"], ["Script", "[email protected]", "https://www.cssscript.com"], ["Com", "[email protected]", "https://www.cssscript.com"] ] }).render(document.getElementById("example"));
4. Or from an existing HTML table.
function () { const tableRef = useRef(null); const wrapperRef = useRef(null); useEffect(() => { const grid = new gridjs.Grid({ from: tableRef.current, }).render(wrapperRef.current); }); return ( <> <table ref={tableRef}> <thead> <tr> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>[email protected]</td> </tr> <tr> <td>Mike</td> <td><b>[email protected]</b></td> </tr> </tbody> </table> <div ref={wrapperRef} /> </> ); }
5. Add a pagination control to the data grid.
new gridjs.Grid({ columns: ["Name", "Email", "URL"], data: [ ["CSS", "[email protected]", "https://www.cssscript.com"], ["Script", "[email protected]", "https://www.cssscript.com"], ["Com", "[email protected]", "https://www.cssscript.com"] ], pagination: true })
6. Add a search field to the data grid.
new gridjs.Grid({ columns: ["Name", "Email", "URL"], data: [ ["CSS", "[email protected]", "https://www.cssscript.com"], ["Script", "[email protected]", "https://www.cssscript.com"], ["Com", "[email protected]", "https://www.cssscript.com"] ], search: true })
7. Determine if the data grid is sortable.
new gridjs.Grid({ columns: ["Name", "Email", "URL"], data: [ ["CSS", "[email protected]", "https://www.cssscript.com"], ["Script", "[email protected]", "https://www.cssscript.com"], ["Com", "[email protected]", "https://www.cssscript.com"] ], sort: true })
// or new gridjs.Grid({ columns: [{ name: "Name", sort: true, }, { name: "Email" }, { name: "URL", width: '50%' }] });
8. Display a loading indicator while loading tabular data.
new gridjs.Grid({ columns: ["Name", "Email", "URL"], data: () => { return new Promise(resolve => { setTimeout(() => resolve([ ["CSS", "[email protected]", "https://www.cssscript.com"], ["Script", "[email protected]", "https://www.cssscript.com"], ["Com", "[email protected]", "https://www.cssscript.com"] ]), 2000); }); } })
9. Import tabular data from a remote data source.
new gridjs.Grid({ server: { url: '/path/to/api/', then: data => data.results.map(customData => [customData.title, customData.description, customData.author]) } })
10. Determine the width of the data grid.
new gridjs.Grid({ width: '100%', autoWidth: true })
11. Update configs & tabular data.
grid.updateConfig({ // new configs here });
12. Apply custom styles to the table.
new gridjs.Grid({ style: { td: { border: '1px solid #ccc' }, table: { 'font-size': '15px' } } })
13. Or add an additional CSS class to the table.
new gridjs.Grid({ className: { td: 'my-td-class', table: 'custom-table-class' } })
14. Determine whether to fix the table header on the top. Default: false.
new gridjs.Grid({ fixedHeader: true })
15. Localize the component.
new gridjs.Grid({ language: { 'search': { 'placeholder': '🔍 Search...' }, 'pagination': { 'previous': '⬅️', 'next': '➡️', 'showing': '😃 Displaying', 'results': () => 'Records' } } })
16. Enable the selection plugin, which enables users to select rows or cells. You can then retrieve the selected rows/cells from the plugin store.
// ES Module import { RowSelection } from "gridjs/plugins/selection";
// OR <script src="./plugins/selection/dist/selection.umd.js"></script>
const grid = new Grid({ columns: [ { id: 'awesomeCheckbox', name: 'Select', plugin: { component: RowSelection, props: { id: (row) => row.cell(2).data } } }, { name: 'Name', formatter: (cell) => `Name: ${cell}` }, 'Email', ], sort: true, data: Array(5).fill().map(x => [ faker.name.findName(), faker.internet.email(), ]) }); grid.on('ready', () => { // find the plugin with the give plugin ID const checkboxPlugin = grid.config.plugin.get('awesomeCheckbox'); // subscribe to the store events checkboxPlugin.props.store.on('updated', function (state, prevState) { console.log('checkbox updated', state, prevState); }); })
17. Multi languages. Built-in languages:
- en_US
- es_ES
- fr_FR
- it_IT
- tr_TR
// ES Moduleimport { frFR } from "gridjs/l10n";
// OR <script src="./l10n/dist/l10n.umd.js"></script>
18. Event handlers
grid.on('rowClick', (...args) => console.log('row: ' + JSON.stringify(args), args)); grid.on('cellClick', (...args) => console.log('cell: ' + JSON.stringify(args), args));
Changelog:
v6.0.6 (01/29/2023)
- Bugfixes
v6.0.5 (01/18/2023)
- Bugfixes
v6.0.4 (01/18/2023)
- Bugfixes
v6.0.1 (01/17/2023)
- Grid.js v6 – Functional Component
- Add Spanish (LATAM) translation
- Create cs_CZ.ts
- Bugfixes
v5.1.0 (08/20/2022)
- Add new ua_UA locale file
- Add Malay translation
- Add norwegian locale (nb_NO)
- Add fa_IR locale
- Add Brazilian Portuguese locale/translation
- Add Chinese locale (cn_CN)
- Add Japanese locale (ja_JP)
- Add indonesian locale id_ID
- Add new locale (ru_RU)
- Add new locale (pt_PT)
- Add new locale (ko_KR)
- Bugfixes
v5.0.1 (06/07/2021)
- The mail library is now available in different formats (es, modern, umd) + sourcemaps
- Plugins are now available under gridjs/plugins namespace, e.g. import { RowSelection } from “gridjs/plugins/selection”
- Use gridjs/l10n namespace to import the available Locales, e.g. import { frFR } from “gridjs/l10n”;
- Add turkish language support
- Search ignore content of hidden columns
- Italian support updated
v4.0.0 (04/24/2021)
- Bug Fixes
- resizable: adding resizable module + changing the ShadowTable algorithm
v3.4.0 (03/13/2021)
- Fixed: MessageRow should only consider the visible column
- Adding th content element
v3.3.0 (02/08/2021)
- Adding ‘tr’ className to the config object
- ‘column.attributes’ object will be used for header cells (‘th’) as well
v3.2.2 (01/15/2021)
- Add plugins config property
v3.2.1 (01/01/2021)
- Fixed: MessageRow click won’t trigger rowClick event
v3.2.0 (12/15/2020)
- grid: extending className config and improving the pagination plugin a11y
v3.1.0 (12/03/2020)
- Bug Fixes
v3.0.2 (11/16/2020)
- Fix: sort: button background-color
v3.0.1 (11/15/2020)
- Bugfixes
- row: adding cell(index: number) function
- adding Lerna
- plugin: adding PluginBaseComponent
v2.1.0 (10/04/2020)
- feat: adding hidden flag to columns
v2.0.0 (09/28/2020)
- Adding selector to columns and changing the type of ID to string
- Adding nested headers
- Adding custom attributes config to <td>
v1.17.0 (08/31/2020)
- adding custom attributes config
v1.16.0 (08/29/2020)
- adding data-column-id attribute to td and th element
v1.15.4 (08/24/2020)
- Bug Fix
v1.15.3 (08/23/2020)
- feat(container): setting the state to Status.Ready once the component is rendered
v1.15.2 (08/09/2020)
- fix(from): use innerHTML if td/th has one text element
v1.15.1 (08/03/2020)
- fix(server): Server initiator must remove functions from args
v1.15.0 (08/02/2020)
- Adding data callback to ServerStorage
v1.14.0 (07/26/2020)
- feat: id should accept a function as well
- chore: exclude tests/** in tsconfig
v1.13.0 (07/25/2020)
- feat(serach): adding selector function
v1.12.0 (07/19/2020)
- feat(tabular): adding toArray
- Adding PluginManager
- fix(theme): adding padding-top to the container to unblock child box-shadow
v1.11.0 (07/11/2020)
- Adding fixed header
- Fixed Search should not call actions.search when keyword is undefined
v1.10.0 (07/05/2020)
- Adding global EventEmitter
- Fix(pipeline): unregister should check the steps datatype
Also have a look at DataGridXL, which does not have as many features, but is super-performant and user-friendly, also for larger data sets.