zino-grid v1.0.3

JavaScript Grid Web Component

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

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

Browser Support

License

zino-grid is licensed under the MIT license.

Copyright (c) 2018-2020 Dimitar Ivanov