{"id":16298969,"url":"https://github.com/ghiscoding/angular-slickgrid","last_synced_at":"2025-04-08T09:09:08.231Z","repository":{"id":39614258,"uuid":"105788553","full_name":"ghiscoding/Angular-Slickgrid","owner":"ghiscoding","description":"Angular-Slickgrid is a wrapper of the lightning fast \u0026 customizable SlickGrid datagrid, it also includes multiple Styling Themes","archived":false,"fork":false,"pushed_at":"2024-05-23T01:23:46.000Z","size":165375,"stargazers_count":387,"open_issues_count":0,"forks_count":115,"subscribers_count":28,"default_branch":"master","last_synced_at":"2024-05-23T01:26:39.931Z","etag":null,"topics":["angular","bootstrap-theme","data-table","datagrid","datatable","dataview","graphql","grid","material-theme","odata","slickgrid","typescript"],"latest_commit_sha":null,"homepage":"https://ghiscoding.github.io/Angular-Slickgrid","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/ghiscoding.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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":"ghiscoding","patreon":null,"open_collective":null,"ko_fi":"ghiscoding","tidelift":null,"custom":null}},"created_at":"2017-10-04T16:01:50.000Z","updated_at":"2024-08-24T22:20:16.576Z","dependencies_parsed_at":"2023-10-15T05:31:08.525Z","dependency_job_id":"9f3f6c09-082d-4cfd-a3c2-8f09bfdf1a68","html_url":"https://github.com/ghiscoding/Angular-Slickgrid","commit_stats":{"total_commits":2603,"total_committers":25,"mean_commits":104.12,"dds":0.7099500576258164,"last_synced_commit":"35f552ae827fea88f916b23517d92abfc0c006d7"},"previous_names":[],"tags_count":363,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2FAngular-Slickgrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2FAngular-Slickgrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2FAngular-Slickgrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ghiscoding%2FAngular-Slickgrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ghiscoding","download_url":"https://codeload.github.com/ghiscoding/Angular-Slickgrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247809963,"owners_count":20999816,"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":["angular","bootstrap-theme","data-table","datagrid","datatable","dataview","graphql","grid","material-theme","odata","slickgrid","typescript"],"created_at":"2024-10-10T20:46:09.473Z","updated_at":"2025-04-08T09:09:08.208Z","avatar_url":"https://github.com/ghiscoding.png","language":"TypeScript","readme":"# Angular-Slickgrid\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)\n[![NPM downloads](https://img.shields.io/npm/dy/angular-slickgrid)](https://npmjs.org/package/angular-slickgrid)\n[![npm](https://img.shields.io/npm/v/angular-slickgrid.svg?logo=npm\u0026logoColor=fff\u0026label=npm)](https://www.npmjs.com/package/angular-slickgrid)\n\n[![Actions Status](https://github.com/ghiscoding/Angular-Slickgrid/workflows/CI%20Build/badge.svg)](https://github.com/ghiscoding/Angular-Slickgrid/actions)\n[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg?logo=cypress)](https://www.cypress.io/)\n[![Vitest](https://img.shields.io/badge/tested%20with-vitest-fcc72b.svg?logo=vitest)](https://vitest.dev/)\n[![codecov](https://codecov.io/gh/ghiscoding/Angular-Slickgrid/branch/master/graph/badge.svg)](https://codecov.io/gh/ghiscoding/Angular-Slickgrid)\n\n\n### Brief introduction\nOne of the best JavasSript data grid [SlickGrid](https://github.com/mleibman/SlickGrid), which was originally developed by @mleibman, is now available to the Angular world. SlickGrid beats most other data grids in terms of features, customizability and performance (running smoothly with even a million rows). Angular-Slickgrid is a wrapper on top of [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal/) (which is a dependency), in the early beginning we used the `6pac/SlickGrid` fork but that was dropped in \u003e=[v7.0](https://github.com/ghiscoding/Angular-Slickgrid/releases/tag/v7.0.3) since Slickgrid-Universal is now a standalone project. SlickGrid was also recently rewritten with browser native code (no more ~jQuery~ 🎉).\n\n### License\n[MIT License](LICENSE)\n\n## Documentation\n📕 [Documentation](https://ghiscoding.gitbook.io/angular-slickgrid/getting-started/quick-start) website powered by GitBook for version 7+ (_or use the [Wikis](https://github.com/ghiscoding/Angular-Slickgrid/wiki) for older versions_).\n\nFor common issues, see the [Troubleshooting Section](#troubleshooting-section) below\n\n## Installation\nAvailable in Stackblitz (Codeflow) below, this can also be used to provide an issue repro.\n\n[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https:///pr.new/ghiscoding/angular-slickgrid)\n\nA good starting point is the **[Docs - Quick Start](https://ghiscoding.gitbook.io/angular-slickgrid/getting-started/quick-start)** and/or simply clone the [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository. Please review all documentation and closed issues before opening any new issue, also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest\u0026q=slickgrid) unless you think there's a bug with the library.\n\n```sh\nnpm install angular-slickgrid\n```\n\n#### Basic Grid\n\n```ts\nimport { type Column, type GridOption } from 'angular-slickgrid';\n\nexport class GridComponent implements OnInit {\n  columnDefinitions: Column[] = [];\n  gridOptions: GridOption;\n  dataset: any[] = [];\n\n  onInit() {\n    this.columnDefinitions = [\n      { id: 'firstName', name: 'First Name', field: 'firstName', sortable: true },\n      { id: 'lastName', name: 'Last Name', field: 'lastName', sortable: true },\n      { id: 'age', name: 'Age', field: 'age', type: 'number', sortable: true }\n    ];\n    this.dataset = [\n      { id: 1, firstName: 'John', lastName: 'Doe', age: 20 },\n      { id: 2, firstName: 'Jane', lastName: 'Smith', age: 21 }\n    ];\n    this.gridOptions = { /*...*/ }; // optional grid options\n  }\n}\n```\n\n```html\n\u003cangular-slickgrid gridId=\"grid2\"\n    [columnDefinitions]=\"columnDefinitions\"\n    [gridOptions]=\"gridOptions\"\n    [dataset]=\"dataset\"\u003e\n\u003c/angular-slickgrid\u003e\n```\n### Troubleshooting\n\n\u003e [!WARNING]\n\u003e Because of its use of native Custom Event, this project **does not** work well with `strictTemplates`, so please make sure to either disable `strictTemplates` or cast your event as `any` (see this [discussion](https://github.com/ghiscoding/Angular-Slickgrid/discussions/815) for more info)\n\n### Styling Themes\n\nMultiple styling themes are available\n- Default (UI agnostic)\n- Bootstrap (see all Angular-Slickgrid [live demos](https://ghiscoding.github.io/Angular-Slickgrid/))\n- Material (see [Slickgrid-Universal](https://ghiscoding.github.io/slickgrid-universal/#/example07))\n- Salesforce (see [Slickgrid-Universal](https://ghiscoding.github.io/slickgrid-universal/#/example16))\n\nAlso note that all of these themes also have **Dark Theme** equivalent and even though Bootstrap is often used for live demos, it does work as well with any other UI framework like Bulma, Material, ...\n\n### Demo page\n`Angular-Slickgrid` works with all `Bootstrap` versions, you can see a demo of each one below. It also works well with any other frameworks like Material or Bulma and there are also couple of extra styling themes based on Material \u0026 Salesforce which are also available. You can also use different SVG icons, you may want to look at the [Docs - SVG Icons](https://ghiscoding.gitbook.io/angular-slickgrid/styling/svg-icons) for more info.\n\n[Angular-Slickgrid-Demos](https://github.com/ghiscoding/angular-slickgrid-demos) includes the following:\n- [Bootstrap 5 demo](https://ghiscoding.github.io/Angular-Slickgrid) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap5-demo-with-translate) - Code samples which uses `ngx-translate` to support multiple locales.\n- [Bootstrap 5 (single Locale)](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap5-demo-with-locales) / [examples repo](https://github.com/ghiscoding/angular-slickgrid-demos/tree/master/bootstrap5-demo-with-locales) - Code Sample with a single Locale (without `ngx-translate`)\n\n#### Working Demo\nFor a complete set of working demos (40+ examples), we strongly suggest you clone [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository (instructions are provided inside it). The demo repo provides multiple examples and are updated on every new project release, so it is updated frequently and is also the GitHub live demo page for both the [Bootstrap 5 demo](https://ghiscoding.github.io/Angular-Slickgrid) and [Bootstrap 5 demo (single Locale)](https://ghiscoding.github.io/angular-slickgrid-demos).\n\n```sh\ngit clone https://github.com/ghiscoding/angular-slickgrid-demos\ncd bootstrap5-demo-with-translate # or any of the other demos\nnpm install\nnpm start\n```\n\n### Like it? ⭐ it\nYou like to use **Angular-Slickgrid**? Be sure to upvote ⭐ and perhaps support me with caffeine [☕](https://ko-fi.com/ghiscoding) or GitHub sponsoring and feel free to contribute.\n\n\u003ca href='https://ko-fi.com/ghiscoding' target='_blank'\u003e\u003cimg height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi3.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /\u003e\u003c/a\u003e\n\n### Contributions\nIf you wish to contribute, please make sure to follow the steps shown in the [CONTRIBUTING](https://github.com/ghiscoding/Angular-Slickgrid/blob/master/CONTRIBUTING.md) guide.\n\n## Latest News \u0026 Releases\nMake sure to check out the [Releases](https://github.com/ghiscoding/Angular-Slickgrid/releases) section for all latest News \u0026 Releases.\n\n## Angular Compatibility\n\n\u003e **Note** please be aware that only the latest major version of Angular-Slickgrid will be supported and receive bug fixes (it's already a lot of work for a single developer like me to support).\n\n| Angular-Slickgrid | Angular version | Migration Guide | Notes |\n|-------------------|-----------------|-----------------|-------|\n| 8.x               | \u003e=18.0 | [Migration 8.x](https://ghiscoding.gitbook.io/angular-slickgrid/migrations/migration-to-8.x)     | Modern UI / Dark Mode, requires Slickgrid-Universal [5.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v5.0.0) version |\n| 7.x               | \u003e=17.0 | [Migration 7.x](https://ghiscoding.gitbook.io/angular-slickgrid/migrations/migration-to-7.x)     | merge SlickGrid into Slickgrid-Universal, requires Slickgrid-Universal [4.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v4.0.2) version |\n| 6.x               | \u003e=16.0 | [Migration 6.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-6.x)     | removal of jQuery (now uses browser native code), requires Slickgrid-Universal [3.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v3.0.0) version |\n| 5.x               | \u003e=14.0 | [Migration 5.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-5.x)     | removal of jQueryUI, requires Slickgrid-Universal [2.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v2.0.0) version |\n| 4.x               | \u003e=13.0 | [Migration 4.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-4.x)     | for Ivy build only, requires Slickgrid-Universal [1.x](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v1.1.1) version |\n| 3.x               | \u003e=12.0 | [Migration 3.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-3.x) | the lib now uses [Slickgrid-Universal](https://github.com/ghiscoding/slickgrid-universal) monorepo [v0.19.2](https://github.com/ghiscoding/slickgrid-universal/releases/tag/v0.19.2). Also, IE11 is EOL and no longer supported. |\n| 2.x               | 7-11.x | [Migration 2.x](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Migration-to-2.x) | support multiple grids on same page     |\n| 1.x               | 4-6.x  |                 |      |\n\n**Note** For a full compatibility table of every Angular-Slickgrid versions with Slickgrid-Universal, please take a look at the [Versions Compatibility Table - Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Versions-Compatibility-Table).\n\nFor Angular 12+ see the instructions below - [Angular 12 with WebPack 5 - polyfill issue](#angular-12-with-webpack-5---how-to-fix-polyfill-error).\n\n### ngx-translate Compatibility\n\nAngular-Slickgrid uses `ngx-translate` library to support Locales, it is also required that is even when using a single Locale. The reason is because, we use `@Optional() TranslateService` in the lib and for that to work, it requires `ngx-translate` to be installed. Once you run the build and if you are using a single Locale then the tree shaking process should remove these optional dependencies. See their version compatibility table below for more info\n\n| Angular Version | @ngx-translate/core |\n|-----------------|---------------------|\n|  16+            |        15.x         |\n|  13+ (Ivy only) |        14.x         |\n|  10-13          |        13.x         |\n|  8-9            |        12.x         |\n|  7              |        11.x         |\n\n### Tested with [Vitest](https://vitest.dev/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)\nSlickgrid-Universal has **100%** Unit Test Coverage and all Angular-Slickgrid Examples are tested with [Cypress](https://www.cypress.io/) as E2E tests.\n\n## Troubleshooting Section\n\n- [Angular 12 with WebPack 5 - how to fix polyfill error](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Versions-Compatibility-Table#angular-12-with-webpack-5---how-to-fix-polyfill-error)\n- [`ngcc` Build Warnings (Angular \u003e=8.0 \u0026\u0026 \u003c16.0)](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Versions-Compatibility-Table#ngcc-build-warnings-angular-80--160)\n- [`strictTemplates` error](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Versions-Compatibility-Table#stricttemplates-error)\n\n## Sponsors\n\nThanks to all my sponsors!\n\n\u003cdiv\u003e\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/wundergraph\" class=\"Link\" title=\"Wundergraph\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/64281914\" width=\"50\" height=\"50\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n  \u0026nbsp;\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/johnsoncodehk\" class=\"Link\" title=\"johnsoncodehk (Volar)\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16279759\" width=\"50\" height=\"50\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n   \u0026nbsp;\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/kevinburkett\" class=\"Link\" title=\"kevinburkett\" target=\"_blank\"\u003e\u003cimg class=\"circle avatar-user\" src=\"https://avatars.githubusercontent.com/u/48218815?s=52\u0026amp;v=4\" width=\"45\" height=\"45\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n  \u0026nbsp;\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/anton-gustafsson\" class=\"Link\" title=\"anton-gustafsson\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/22906905?s=52\u0026v=4\" width=\"50\" height=\"50\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n  \u0026nbsp;\n  \u003cspan\u003e\n    \u003ca href=\"https://github.com/gibson552\" class=\"Link\" title=\"gibson552\" target=\"_blank\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/84058359?s=52\u0026v=4\" width=\"50\" height=\"50\" valign=\"middle\" /\u003e\u003c/a\u003e\n  \u003c/span\u003e\n\u003c/div\u003e\n","funding_links":["https://github.com/sponsors/ghiscoding","https://ko-fi.com/ghiscoding","https://ko-fi.com/ghiscoding'"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghiscoding%2Fangular-slickgrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fghiscoding%2Fangular-slickgrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fghiscoding%2Fangular-slickgrid/lists"}