{"id":16532425,"url":"https://github.com/sayan751/au2-data-grid","last_synced_at":"2025-07-24T00:04:04.364Z","repository":{"id":83262396,"uuid":"423396486","full_name":"Sayan751/au2-data-grid","owner":"Sayan751","description":"Aurelia2 data-grid implementation based on CSS grid","archived":false,"fork":false,"pushed_at":"2025-07-14T19:52:09.000Z","size":2423,"stargazers_count":3,"open_issues_count":5,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-14T23:49:19.395Z","etag":null,"topics":["aurelia2","data-grid"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Sayan751.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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,"zenodo":null}},"created_at":"2021-11-01T08:50:43.000Z","updated_at":"2025-07-14T19:10:02.000Z","dependencies_parsed_at":"2024-06-23T02:01:53.299Z","dependency_job_id":"6d022821-17b7-419d-85e2-24f1f596cfae","html_url":"https://github.com/Sayan751/au2-data-grid","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/Sayan751/au2-data-grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayan751%2Fau2-data-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayan751%2Fau2-data-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayan751%2Fau2-data-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayan751%2Fau2-data-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sayan751","download_url":"https://codeload.github.com/Sayan751/au2-data-grid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sayan751%2Fau2-data-grid/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266770186,"owners_count":23981519,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["aurelia2","data-grid"],"created_at":"2024-10-11T18:12:36.283Z","updated_at":"2025-07-24T00:04:04.330Z","avatar_url":"https://github.com/Sayan751.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @sparser/au2-data-grid\r\n\r\n\r\n[![npm version](https://img.shields.io/npm/v/@sparser/au2-data-grid)](https://www.npmjs.com/package/@sparser/au2-data-grid)\r\n[![npm download](https://img.shields.io/npm/dt/@sparser/au2-data-grid?label=npm%20download)](https://www.npmjs.com/package/@sparser/au2-data-grid)\r\n![build status](https://github.com/Sayan751/au2-data-grid/workflows/build/badge.svg)\r\n\r\n[Documentation](./package/README.md)\r\n\r\nThis repository contains a data-grid implementation based on Aurelia2 and CSS grid. The highlight of this implementation is that the grid can be defined completely in markup which gives you the freedom of using your own awesome Aurelia2 custom elements. An example usage looks something like below.\r\n\r\n```html\r\n\u003cdata-grid model.bind=\"people\"\u003e\r\n\r\n  \u003c!-- column #1 --\u003e\r\n  \u003cgrid-column\u003e\r\n    \u003cheader\u003e\r\n      \u003cvalue-text value=\"First name\"\u003e\u003c/value-text\u003e        \u003c!-- custom element --\u003e\r\n    \u003c/header\u003e\r\n    \u003cnormal-text value.bind=\"item.fname\"\u003e\u003c/normal-text\u003e   \u003c!-- custom element --\u003e\r\n  \u003c/grid-column\u003e\r\n\r\n  \u003c!-- column #2 --\u003e\r\n  \u003cgrid-column\u003e\r\n    \u003cheader\u003e\r\n      \u003cvalue-text value=\"Last name\"\u003e\u003c/value-text\u003e\r\n    \u003c/header\u003e\r\n    \u003cnormal-text value.bind=\"item.lname\"\u003e\u003c/normal-text\u003e\r\n  \u003c/grid-column\u003e\r\n\r\n  \u003c!-- column #3 --\u003e\r\n  \u003cgrid-column\u003e\r\n    \u003cheader\u003e\r\n      \u003cvalue-text value=\"Age\"\u003e\u003c/value-text\u003e\r\n    \u003c/header\u003e\r\n    \u003cnormal-text value.bind=\"item.age\"\u003e\u003c/normal-text\u003e\r\n  \u003c/grid-column\u003e\r\n\u003c/data-grid\u003e\r\n```\r\nIn the example above a custom element named `value-text` is used for the header and for the content another custom element named `normal-text` is used.\r\n\r\nMoreover, the following features are also supported:\r\n\r\n- Configurable item selection: single as well as multiple or none.\r\n- Static content or content backed with backend services (does not provide any HTTP pipeline; thus, giving freedom of reusing your own HTTP pipeline).\r\n- Page-able content/data.\r\n- Data can be sorted via callback.\r\n- Columns can be reordered, without essentially rerendering the grid completely.\r\n- Columns can be resized (also without rerendering the grid).\r\n\r\n## Examples\r\n\r\nExamples can be found in the `./examples/webpack-apps` directory.\r\n\r\n| Name           | Description                                                                                                                                                        |\r\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\r\n| non-customized | This is a non-customized example of the data-grid. The app contains two examples: one static list, and another one is with backed with a backend resource service (located at `./examples/fake-service`). |\r\n| customized-header | This example shows how to customized the header template. |\r\n| customized-grid | This example shows how to customized the header as well as the grid template. |\r\n\r\n\r\n## Development\r\n\r\nThis is a npm7 workspace.\r\nThus, after cloning the repo you just need to do a `npm ci` at the root to download all the dependencies.\r\n\r\nThe core package is located at the `./package` directory.\r\nYou can start a watch with `npm run watch`. This is useful when you want to test you changes quickly in one of the example webpack-apps.\r\n\r\nThe webpack-apps as well as the fake-service can be started with `npm start`.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsayan751%2Fau2-data-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsayan751%2Fau2-data-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsayan751%2Fau2-data-grid/lists"}