N-GRID
An angular based grid based on @angular/cdk.
With all the buzzwords you want:
👌 Enterprise grade🧩 Highly extensible✨ UI Agnostic🏷️ Feature loaded
For full documentation, walk-through's and examples
Need help? Want to talk about a feature? Or just a casual chat...
Join to the discord channel and lets create a community together!
⚡ Quick Start / Setup
Use the built-in schematics:
ng add @pebula/ngrid
@pebula/ngridinclude secondary packages / plugins (e.g:@pebula/ngrid/detail-row)- Use the schematics wizard to install additional plugins (e.g:
@pebula/ngrid-material/@pebula/ngrid-bootstrap)
For how-to's, concepts, recipes and more, visit the documentation site
🧅 Versions
| nGrid Version | Angular Version | Documentation | Starters |
|---|---|---|---|
| 5.x.x (Current) | 14.x.x | Documentation | Starter @ GitHub / StackBlitz) |
| 4.x.x (Current) | 12.x.x | Documentation | Starter @ GitHub / StackBlitz / CodeSandbox |
| 3.x.x | 11.x.x | Documentation | Starter @ GitHub / StackBlitz / CodeSandbox |
| 2.x.x | 9.x.x - 10.x.x | Documentation | Starter @ GitHub / StackBlitz |
| 1.x.x | 6.x.x - 8.x.x | Documentation | Starter @ GitHub / StackBlitz |
- Documentation site contains live examples including source code.
- 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.
🏄♀️ Quick Feature Overview
@pebula/ngrid comes with building blocks and features tied to the core of the grid.
Some of the feature are:
- Easy to use column and datasource integration
- Virtual Scrolling (Vertical)
- Column: Resize / Reorder / Edit / Hide
- Smart column / cell size management
- Group headers and logical groups.
- Rich and powerful theming system (SCSS)
In addition, there are several secondary packages that extend the functionality when opted-in:
-
@pebula/ngrid/target-events- Support for input device events (click, keyboard, selection) -
@pebula/ngrid/clipboard- Copy cell selection to the clipboard -
@pebula/ngrid/state- Saving and restoring state from and to the grid -
@pebula/ngrid/detail-row- Support for master / detail row structure -
@pebula/ngrid/drag- Support for drag and drop (using@angular/cdk/drag) -
@pebula/ngrid/sticky- Support for sticky rows / columns -
@pebula/ngrid/transpose- Support for live transpose (switch between rows & columns) -
@pebula/ngrid/overlay-panel- A plugin for grid overlay (popups) similar to the overlay tools in@angular/cdkbut with cell orientation (set position based on cell location) - And more...
To top that, a UI extension that make use of @angular/material components called @pebula/ngrid-material, with things like:
- Automatic cell tooltip (Only when text is truncated)
- Selection Column (with mat-checkbox)
- Sorting Header (with matSort)
- Pagination (with material pagination tools)
- Context Menu (using MatMenu)
A similar extension also exists for bootstrap at @pebula/ngrid-bootstrap
If you like this product and want to help, WELCOME
Please see the TODO section at the bottom, help is much appreciated. The documentation is the KEY
🏗️ Structure
N-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 & drop, etc...)
The grid is highly extensible. The design aims to support plugins and extensions, especially for the UI layer.
To support this structure there are several packages, some having secondary packages inside them:
🥅 Design goals
- Developer ergonomics
- Performance
- Extensibility (features via plugins)
In other words: Easy to use, fast and with loads of features.
We try to cut down complexity by splitting features into plugins and having a default option at all times so integration is seamless.
Daily, mundane and repetitive routines like setting up a datasource or creating a column definition are packed into factories that make it easy to use.
Templates should be shared and reused, define a template once and use it multiple times.