Skip to content
A angular grid for the enterprise
Branch: master
Clone or download
shlomiassaf Merge pull request #7 from shlomiassaf/selection
feat(ngrid): support focus and selection through the ContextApi
Latest commit d17607c May 24, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates May 13, 2019
.vscode (misc): minor alignment updates before npm publish May 6, 2019
apps refactor(ngrid): dont use .pbl-table class May 15, 2019
libs feat(ngrid): support focus and selection through the ContextApi May 23, 2019
tools misc: update build May 24, 2019
.angulardoc.json (misc): update readme May 7, 2019
.editorconfig initial commit Aug 15, 2018
.gitignore virtual-scroll Feb 8, 2019
.prettierignore UPDATE PACKAGES Feb 8, 2019
.prettierrc initial commit Aug 15, 2018
LICENSE cosmetic changes and attempts to work with @miscrosoft/api-extractor Feb 8, 2019 fix(utils): kill command in UnRx May 8, 2019
angular.json feat(ngrid): support focus and selection through the ContextApi May 23, 2019
karma.conf.js UPDATE PACKAGES Feb 8, 2019
lerna.json misc: update tools May 14, 2019
nx.json update table to ngrid Feb 10, 2019 update nx tags Feb 8, 2019
package.json misc: update docs May 15, 2019
tsconfig.json misc: simplify tsconfig setup May 15, 2019
tsconfig.lib.json misc: simplify tsconfig setup May 15, 2019 misc: simplify tsconfig setup May 15, 2019
tslint.json initial commit Aug 15, 2018
yarn.lock misc: update tools May 14, 2019


A grid based on @angular/cdk.

The grid is still in early development, API is solid but might change.

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

Quick Start


yarn add @pebula/utils @pebula/ngrid @pebula/ngrid-material

Packages include secondary packages / plugins (e.g: @pebula/ngrid/detail-row)

This setup will install ngrid with material design cell pack.


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:


A small utility library, used by @pebula/ngrid but not bound to it.


The core package, contains everything you need to build and display the grid.

This package comes with a minimal UI layer, rich UI layer's are implemented as plugins through other packages.

@pebula/ngrid comes with building blocks and features tied to the core of the grid.

Some of the feature are:

  • Column & Data Source factories
  • Virtual Scrolling (Vertical only at the moment)
  • Column: Resize / Reorder / Edit / Hide
  • Smart column / cell size management
  • Group headers and logical groups.

In addition, there are several secondary packages that extend the functionality only if you opt-in and use them:

  • @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/target-events - Support for table events
  • @pebula/ngrid/transpose - Support for live transpose (switch between rows & columns)

Note that A plugin might just be a UI presentation for a core level feature.
For example, column resize & reorder will all work programmatically without a plugin but with the @pebula/ngrid/drag plugin we add mouse/touch support.

A plugin might depend on other plugins.

Currently, @pebula/ngrid-material is the only rich UI layer, implementing the UI using @angular/material. You can also implemented your own, see how it's done in @pebula/ngrid-material.

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.


See the todo list here

You can’t perform that action at this time.