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, walkthroughs and examples - visit the official site
- Documentation site with code samples.
- Starter @ GitHub
- Starter @ StackBlitz
yarn add @pebula/utils @pebula/ngrid @pebula/ngrid-materialPackages include secondary packages / plugins (e.g:
@pebula/ngrid/detail-row) This setup will install ngrid with material design cell pack.
@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)
Please see the TODO section at the bottom, help is much appreciated. The documentation is the KEY
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:
- 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.
If you're using angular 8 download the latest package (any version will work)
If you're using angular 7 download version 1.0.0-alpha.23 and below. From 1.0.0-alpha.24 only angular 8 is supported.
Once the library is compiled with the v8 angular compiler it will not work in angular v7 and below read here why.
It is theoretically possible to support angular 7 as well, it will require 2 distinct versions 1 for v8 and one for v7.
It will require 2 compilations, one with angular v8, then uninstall it and install v7 and run the compilation again.
This is not trivial, the compiler has changed but also other parts like the cli with it's new Builders API.
This will require updating the relevant build script to support dual mode as well as installing build packages that relay on the cli (ng-cli-packagr-tasks)
- Update angular/cdk/material/other packages that are built with v8 compiler to their v7 equivalent
- Update scss-bundler/compiler tool script to use v7 Architect API
Since @angular/material does not support backwards I don't see any reason to do that...