Grid Custom Element

Posted on: September 6, 2018 by Dimitar Ivanov

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.

Table of contents


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>
    const grid = document.createElement("zino-grid");
    grid.url = "data.json";
  • using the constructor
    <script type="module">
    import {ZinoGrid} from "../zino-grid.js";
    const grid = new ZinoGrid({
        url: "data.json"


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)


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
See also
Share this post

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.


Comments are closed