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
• How to install
• Creating a grid
• Options
• Demo
• Browser support

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

• React Grid Component
• HTML Imports
• HTML Templates

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.