Categories
Grid Custom Element
The HTML standard supports displaying a tabular data using a TABLE element. The lack of support of essential features as sorting, filtering and pagination, make the use of TABLE element a bit limited.
A grid component provides the above features and many more and is a natural successor of TABLE element. But if you want to benefit of a grid features you need to use a third-party grid component since a grid is not a native HTML element.
The <zino-grid>
component is an autonomous custom element
that is build on Custom Elements and
Shadow DOM specifications, both part of
Web Components suit of technologies.
Features
Let's preview the most notable features of <zino-grid>
component.
- Sorting
- Filtering
- Pagination
- Column reordering
- JSON data
- Data caching
- RTL support
- Themable
- NPM and Bower support
- Excellent browser support
- Modern syntax (ES6)
- Open source (MIT license)
How to install
Easy install is provided via the both NPM and Bower package managers.
// using NPM $ npm install zino-grid // using Bower $ bower install zino-grid
Creating a grid
A grid could be created by 3 different ways as shown below:
- as an HTMLElement
<zino-grid data-url="data.json"></zino-grid> <script type="module" src="zino-grid.js"></script>
- using the DOM API
<script type="module" src="zino-grid.js"></script> <script> const grid = document.createElement("zino-grid"); grid.url = "data.json"; document.body.appendChild(grid); </script>
- using the constructor
<script type="module"> import {ZinoGrid} from "../zino-grid.js"; const grid = new ZinoGrid({ url: "data.json" }); document.body.appendChild(grid); </script>
Options
All options are available through a data-*
attributes.
Option | Required | Type | Default | Description |
---|---|---|---|---|
url | Yes | String | (empty) | An URL with data to display in JSON format. |
page | No | Number | 1 | Currently displayed page. |
perPage | No | Number | 5 | Number of records displayed per page. |
debug | No | Boolean | false | Log actions in DevTools console. |
filter | No | Boolean | false | Allows a filtering functionallity. |
sort | No | Boolean | false | Allows a sort by column functionallity. |
reorder | No | Boolean | false | Allows a column reordering functionallity. |
dir | No | String | ltr | Text direction. Accepted values are ltr (left-to-right) and rtl (right-to-left) |
Demo
This is a full-featured demo of the zino-grid custom element. The source code is available at GitHub.
Browser Compatibility
The zino-grid uses the ES6 syntax and is built on specifications like Custom Elements, Shadow DOM, and ES6 Template Literals. So, you'll need a polyfill only if you intend to support browsers that doesn't implement those specs, e.g. IE and Edge.
Polyfill | Edge | IE11+ | Chrome 54+ | Firefox 63+ | Safari 10.1+ | Opera 41+ |
---|---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes | Yes |
No | No | No | Yes | Yes | Yes | Yes |
Tell me what do you think about this grid component and what features to add to improve. Thanks so much for reading and don't forget to share it.
Subscribe to our newsletter
Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.
0 Comments
Comments are closed