{"id":19529142,"url":"https://github.com/riverside/zino-grid","last_synced_at":"2026-05-17T14:36:27.895Z","repository":{"id":57406028,"uuid":"146173709","full_name":"riverside/zino-grid","owner":"riverside","description":":tv: Autonomous open source grid component","archived":false,"fork":false,"pushed_at":"2023-06-04T17:06:35.000Z","size":79,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-08T16:59:37.673Z","etag":null,"topics":["customelements","ecmascript2015","ecmascript6","es6","grid","grid-table","gridtable","javascript","shadowdom","table","tablegrid","web-components","webcomponent","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/riverside.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"https://www.paypal.me/Dimitar81"}},"created_at":"2018-08-26T11:12:41.000Z","updated_at":"2023-02-19T15:27:23.000Z","dependencies_parsed_at":"2024-11-11T01:23:27.868Z","dependency_job_id":"c2a0598f-36bd-4db3-84c7-467536cb6801","html_url":"https://github.com/riverside/zino-grid","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"34179c48c13e699d4c1bc70bb3b45ec69068b4ec"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riverside%2Fzino-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riverside%2Fzino-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riverside%2Fzino-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/riverside%2Fzino-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/riverside","download_url":"https://codeload.github.com/riverside/zino-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240783111,"owners_count":19856776,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["customelements","ecmascript2015","ecmascript6","es6","grid","grid-table","gridtable","javascript","shadowdom","table","tablegrid","web-components","webcomponent","webcomponents"],"created_at":"2024-11-11T01:22:14.132Z","updated_at":"2026-05-17T14:36:22.855Z","avatar_url":"https://github.com/riverside.png","language":"JavaScript","funding_links":["https://www.paypal.me/Dimitar81"],"categories":[],"sub_categories":[],"readme":"# JavaScript Grid Web Component\nAutonomous open source grid component with RTL support built on Custom Elements and Shadow DOM specifications.\n\n| Build | NPM | Bower |\n| --- | --- | --- |\n| [![CI](https://github.com/riverside/zino-grid/actions/workflows/test.yml/badge.svg)](https://github.com/riverside/zino-grid/actions/workflows/test.yml) | [![npm version](https://badge.fury.io/js/zino-grid.svg)](https://www.npmjs.com/package/zino-grid) | [![Bower version](https://badge.fury.io/bo/zino-grid.svg)](https://badge.fury.io/bo/zino-grid) |\n\n## How to use\n\n### Installation\n- Install with **npm**\n```\n$ npm install zino-grid\n```\n\n- Install with **bower**\n```\n$ bower install zino-grid\n```\n\n### Initialization\n- HTML way\n```html\n\u003czino-grid data-url=\"data.json\"\u003e\u003c/zino-grid\u003e\n\n\u003cscript type=\"module\" src=\"../zino-grid.js\"\u003e\u003c/script\u003e\n```\nGrid customizations are possible via `data-*` attributes.\n\n- using the DOM API\n```html\n\u003cscript type=\"module\" src=\"../zino-grid.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\nconst grid = document.createElement(\"zino-grid\");\ngrid.dataset.url = \"data.json\";\ndocument.body.appendChild(grid);\n\u003c/script\u003e\n```\n\n- using the constructor\n```html\n\u003cscript type=\"module\"\u003e\nimport {ZinoGrid} from \"../zino-grid.js\";\nconst grid = new ZinoGrid({\n  url: \"data.json\"\n});\ndocument.body.appendChild(grid);\n\u003c/script\u003e\n```\n\n##### Styling\n```css\n:root {\n  --background-head: #fff;\n  --color-head: #FA4251;\n  --color-head-active: #FA4251;\n  --background-foot: #fff;\n  --color-foot: #222;\n  --background-odd: #fff;\n  --background-even: #fff;\n  --color-odd: #333;\n  --color-even: #222;\n}\nzino-grid {\n  margin: 20px auto 0;\n  width: 100%;\n  max-width: 1024px;\n}\n```\n\n## Options\n|Option|Required|Type|Default|Description|\n|---|:---:|---|---|---|\n|**url**|Yes|String|**(empty)**|An URL with data to display in JSON format.|\n|**page**|No|Number|**1**|Currently displayed page.|\n|**perPage**|No|Number|**5**|Number of records displayed per page.|\n|**debug**|No|Boolean|**false**|Log actions in DevTools console.|\n|**filter**|No|Boolean|**false**|Allows a filtering functionallity.|\n|**sort**|No|Boolean|**false**|Allows a sort by column functionallity.|\n|**reorder**|No|Boolean|**false**|Allows a column reordering functionallity.|\n|**dir**|No|String|**ltr**|Text direction. Accepted values are **ltr** (left-to-right) and **rtl** (right-to-left)|\n\n## Browser Support\n|Polyfill|Edge|IE11+|Chrome 54+|Firefox 63+|Safari 10.1+|Opera 41+|\n|---|:---:|:---:|:---:|:---:|:---:|:---:|\n|Yes|✓|✓|✓|✓|✓|✓|\n|No|✗|✗|✓|✓|✓|✓| \n\n## License\nzino-grid is licensed under the MIT license.\n\nCopyright (c) 2018-2020 Dimitar Ivanov\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friverside%2Fzino-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Friverside%2Fzino-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friverside%2Fzino-grid/lists"}