JavaScript Grid Web Component

Autonomous open source grid component with RTL support built on Custom Elements and Shadow DOM specifications.

Build	NPM	Bower

How to use

Installation

• Install with npm

$ npm install zino-grid

• Install with bower

$ bower install zino-grid

Initialization

• HTML way

<zino-grid data-url="data.json"></zino-grid>

<script type="module" src="../zino-grid.js"></script>

Grid customizations are possible via data-* attributes.

• using the DOM API

<script type="module" src="../zino-grid.js"></script>

<script>
const grid = document.createElement("zino-grid");
grid.dataset.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>

Styling

:root {
  --background-head: #fff;
  --color-head: #FA4251;
  --color-head-active: #FA4251;
  --background-foot: #fff;
  --color-foot: #222;
  --background-odd: #fff;
  --background-even: #fff;
  --color-odd: #333;
  --color-even: #222;
}
zino-grid {
  margin: 20px auto 0;
  width: 100%;
  max-width: 1024px;
}

Options

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)

Browser Support

Polyfill	Edge	IE11+	Chrome 54+	Firefox 63+	Safari 10.1+	Opera 41+
Yes	✓	✓	✓	✓	✓	✓
No	✗	✗	✓	✓	✓	✓

License

zino-grid is licensed under the MIT license.

Copyright (c) 2018-2020 Dimitar Ivanov