{"id":29215388,"url":"https://github.com/shlomiassaf/ngrid","last_synced_at":"2025-07-03T00:09:40.222Z","repository":{"id":35070973,"uuid":"169659102","full_name":"shlomiassaf/ngrid","owner":"shlomiassaf","description":"A angular grid for the enterprise","archived":false,"fork":false,"pushed_at":"2023-10-23T16:47:48.000Z","size":39996,"stargazers_count":241,"open_issues_count":46,"forks_count":44,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-06-10T22:56:31.878Z","etag":null,"topics":["angular","cdk","enterprise","grid","material","table"],"latest_commit_sha":null,"homepage":"https://shlomiassaf.github.io/ngrid","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/shlomiassaf.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2019-02-07T23:28:54.000Z","updated_at":"2025-02-05T08:57:23.000Z","dependencies_parsed_at":"2024-06-12T17:21:50.330Z","dependency_job_id":"a048b846-71f9-4ed9-ab1e-3bd9169ad8e4","html_url":"https://github.com/shlomiassaf/ngrid","commit_stats":{"total_commits":694,"total_committers":16,"mean_commits":43.375,"dds":"0.20461095100864557","last_synced_commit":"e32895a0c2d0fb0c8894fc777af3d41e30aec82a"},"previous_names":[],"tags_count":59,"template":false,"template_full_name":null,"purl":"pkg:github/shlomiassaf/ngrid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fngrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fngrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fngrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fngrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shlomiassaf","download_url":"https://codeload.github.com/shlomiassaf/ngrid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fngrid/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260962890,"owners_count":23089500,"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","cdk","enterprise","grid","material","table"],"created_at":"2025-07-03T00:09:37.870Z","updated_at":"2025-07-03T00:09:40.096Z","avatar_url":"https://github.com/shlomiassaf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# N-GRID\n\n[![npm (scoped)](https://img.shields.io/npm/v/@pebula/ngrid?logo=npm\u0026logoColor=fff\u0026label=ngrid\u0026style=flat-square)](https://www.npmjs.com/package/@pebula/ngrid)\n[![npm (scoped)](https://img.shields.io/npm/v/@pebula/ngrid-material?logo=npm\u0026logoColor=fff\u0026label=ngrid-material\u0026style=flat-square)](https://www.npmjs.com/package/@pebula/ngrid-material)\n[![npm (scoped)](https://img.shields.io/npm/v/@pebula/ngrid-bootstrap?logo=npm\u0026logoColor=fff\u0026label=ngrid-bootstrap\u0026style=flat-square)](https://www.npmjs.com/package/@pebula/ngrid-bootstrap)\n\n[![GitHub](https://img.shields.io/github/workflow/status/shlomiassaf/ngrid/Node%20CI?logo=github\u0026style=flat-square\u0026token=abc123def456\u0026label=build)](https://github.com/shlomiassaf/ngrid/actions?query=workflow%3A%22Node+CI%22)\n[![GitHub](https://img.shields.io/github/workflow/status/shlomiassaf/ngrid/GH%20Pages%20on%20release?style=flat-square\u0026token=abc123def456\u0026label=documentation)](https://shlomiassaf.github.io/ngrid/)\n[![GitHub](https://img.shields.io/github/workflow/status/shlomiassaf/ngrid-starters/GH%20Pages%20on%20release?style=flat-square\u0026token=abc123def456\u0026label=ngrid-starters)](https://shlomiassaf.github.io/ngrid-starters/material/)\n[![GitHub](https://img.shields.io/github/license/shlomiassaf/ngrid?style=flat-square)](https://github.com/shlomiassaf/ngrid/blob/master/LICENSE)\n\nAn angular based grid based on `@angular/cdk`.\n\nWith all the buzzwords you want:\n\n- 👌 \u0026nbsp; Enterprise grade\n- 🧩 \u0026nbsp; Highly extensible\n- ✨ \u0026nbsp; UI Agnostic\n- 🏷️ \u0026nbsp; Feature loaded\n\n---\n\nFor full documentation, walk-through's and examples 📜 \u0026nbsp; [visit the official site](https://shlomiassaf.github.io/ngrid)\n\n---\n\nNeed help? Want to talk about a feature? Or just a casual chat...\n\n[![Support Server](https://img.shields.io/discord/841313360289333254.svg?label=Discord\u0026logo=Discord\u0026colorB=7289da\u0026style=for-the-badge)](https://discord.gg/DtkA8mbWeP)\n\nJoin to the discord channel and lets create a community together!\n\n## ⚡\u0026nbsp; Quick Start / Setup\n\nUse the built-in schematics:\n\n```bash\nng add @pebula/ngrid\n```\n\n\u003e * `@pebula/ngrid` include secondary packages / plugins (e.g: `@pebula/ngrid/detail-row`)  \n\u003e * Use the *schematics* wizard to install additional plugins (e.g: `@pebula/ngrid-material` / `@pebula/ngrid-bootstrap`)\n\nFor how-to's, concepts, recipes and more, [visit the documentation site](https://shlomiassaf.github.io/ngrid)\n\n## 🧅\u0026nbsp; Versions \n\n| nGrid Version    | Angular Version | Documentation | Starters  \n|------------------|-----------------|---------------|---------\n| 5.x.x (Current)  | 14.x.x          | [Documentation](https://shlomiassaf.github.io/ngrid) | Starter @ [GitHub](https://github.com/shlomiassaf/ngrid-material-starter) / [StackBlitz](https://stackblitz.com/edit/pebula-ngrid-starter?file=app%2Fapp.component.ts)) |\n| 4.x.x (Current)  | 12.x.x          | [Documentation](https://shlomiassaf.github.io/ngrid/v4) | Starter @ [GitHub](https://github.com/shlomiassaf/ngrid-material-starter) / [StackBlitz](https://stackblitz.com/edit/pebula-ngrid-starter-v4?file=app%2Fapp.component.ts) / [CodeSandbox](https://codesandbox.io/s/pebula-ngrid-starter-v4-5bm9rz?file=/src/main.ts) |\n| 3.x.x            | 11.x.x          | [Documentation](https://shlomiassaf.github.io/ngrid/v3) | Starter @ [GitHub](https://github.com/shlomiassaf/ngrid-material-starter/tree/v3) / [StackBlitz](https://stackblitz.com/edit/pebula-ngrid-starter-v3?file=app%2Fapp.component.ts) / [CodeSandbox](https://codesandbox.io/s/pebula-ngrid-starter-yrgdd) |\n| 2.x.x            | 9.x.x - 10.x.x  | [Documentation](https://shlomiassaf.github.io/ngrid/v2) | Starter @ [GitHub](https://github.com/shlomiassaf/ngrid-material-starter/tree/v2) / [StackBlitz](https://stackblitz.com/edit/pebula-ngrid-starter-v2) |\n| 1.x.x            | 6.x.x - 8.x.x   | [Documentation](https://shlomiassaf.github.io/ngrid/v1) | Starter @ [GitHub](https://github.com/shlomiassaf/ngrid-material-starter/tree/v8) / [StackBlitz](https://stackblitz.com/edit/pebula-ngrid-starter-v8?file=app%2Fapp.component.ts) |\n\n\u003e * Documentation site contains live examples including source code.\n\u003e * Live code demos (StackBlitz/CodeSandbox) might experience issues with some feature especially when IVY enabled, if you find it hard to use them please run your code locally.\n\n\n## 🏄‍♀️\u0026nbsp; Quick Feature Overview\n\n`@pebula/ngrid` comes with building blocks and features tied to the core of the grid.\n\nSome of the feature are:\n\n- Easy to use column and datasource integration\n- Virtual Scrolling (Vertical)\n- Column: Resize / Reorder / Edit / Hide\n- Smart column / cell size management\n- Group headers and logical groups.\n- Rich and powerful theming system (SCSS)\n\nIn addition, there are several secondary packages that **extend** the functionality **when opted-in**:\n\n- `@pebula/ngrid/target-events` - Support for input device events (click, keyboard, selection)\n- `@pebula/ngrid/clipboard` - Copy cell selection to the clipboard\n- `@pebula/ngrid/state` - Saving and restoring state from and to the grid\n- `@pebula/ngrid/detail-row` - Support for master / detail row structure\n- `@pebula/ngrid/drag` - Support for drag and drop (using `@angular/cdk/drag`)\n- `@pebula/ngrid/sticky` - Support for sticky rows / columns\n- `@pebula/ngrid/transpose` - Support for live transpose (switch between rows \u0026 columns)\n- `@pebula/ngrid/overlay-panel` - A plugin for grid overlay (popups) similar to the overlay tools in `@angular/cdk` but with cell orientation (set position based on cell location)\n- And more...\n\nTo top that, a UI extension that make use of `@angular/material` components called `@pebula/ngrid-material`, with things like:\n\n- Automatic cell tooltip (Only when text is truncated)\n- Selection Column (with mat-checkbox)\n- Sorting Header (with matSort)\n- Pagination (with material pagination tools)\n- Context Menu (using MatMenu)\n\nA similar extension also exists for bootstrap at `@pebula/ngrid-bootstrap`\n\n---\n\n### If you like this product and want to help, WELCOME\n\nPlease see the TODO section at the bottom, help is much appreciated. The\ndocumentation is the KEY\n\n---\n\n## 🏗️ Structure\n\nN-Grid is built on top of building block taken from `@angular/cdk`. The most obvious is the `CdkTable` but other constructs are used as well (e.g. selection, drag \u0026 drop, etc...)\n\nThe grid is highly extensible. The design aims to support plugins and extensions, especially for the UI layer.\n\nTo support this structure there are several packages, some having secondary\npackages inside them:\n\n## 🥅 Design goals\n\n- Developer ergonomics\n- Performance\n- Extensibility (features via plugins)\n\n\u003e In other words: Easy to use, fast and with loads of features.\n\nWe try to cut down complexity by splitting features into plugins and having a default option at all times so integration is seamless.\n\nDaily, mundane and repetitive routines like setting up a datasource or creating a column definition are packed into factories that make it easy to use.\n\nTemplates should be shared and reused, define a template once and use it multiple times.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshlomiassaf%2Fngrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshlomiassaf%2Fngrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshlomiassaf%2Fngrid/lists"}