https://github.com/riverside/zino-grid
:tv: Autonomous open source grid component
https://github.com/riverside/zino-grid
customelements ecmascript2015 ecmascript6 es6 grid grid-table gridtable javascript shadowdom table tablegrid web-components webcomponent webcomponents
Last synced: about 1 year ago
JSON representation
:tv: Autonomous open source grid component
- Host: GitHub
- URL: https://github.com/riverside/zino-grid
- Owner: riverside
- License: mit
- Created: 2018-08-26T11:12:41.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-06-04T17:06:35.000Z (almost 3 years ago)
- Last Synced: 2025-02-08T16:59:37.673Z (about 1 year ago)
- Topics: customelements, ecmascript2015, ecmascript6, es6, grid, grid-table, gridtable, javascript, shadowdom, table, tablegrid, web-components, webcomponent, webcomponents
- Language: JavaScript
- Homepage:
- Size: 77.1 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# JavaScript Grid Web Component
Autonomous open source grid component with RTL support built on Custom Elements and Shadow DOM specifications.
| Build | NPM | Bower |
| --- | --- | --- |
| [](https://github.com/riverside/zino-grid/actions/workflows/test.yml) | [](https://www.npmjs.com/package/zino-grid) | [](https://badge.fury.io/bo/zino-grid) |
## How to use
### Installation
- Install with **npm**
```
$ npm install zino-grid
```
- Install with **bower**
```
$ bower install zino-grid
```
### Initialization
- HTML way
```html
```
Grid customizations are possible via `data-*` attributes.
- using the DOM API
```html
const grid = document.createElement("zino-grid");
grid.dataset.url = "data.json";
document.body.appendChild(grid);
```
- using the constructor
```html
import {ZinoGrid} from "../zino-grid.js";
const grid = new ZinoGrid({
url: "data.json"
});
document.body.appendChild(grid);
```
##### Styling
```css
: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