Native Angular inline spreadsheet component


0011.0.34 months ago3 years agoMinified + gzip package size for @biliboobrian/ng-datasheet in KB



Datasheet library with or without inline modifications with many possiblities.

  • Keyboard navigation
  • Sorting, filtering
  • Static complete set of data or lazy data loading
  • Column Validation using ReactiveForm Validators
  • Extensible Columns type with simple way to create your own type
  • Style customization
  • Copy / paste of data to excel sheet
  • Manage hierarchical set of data

Installation via NPM

This project has been created with Angular 6+. It is using for dependencies ng-bootstrap, font-awsome, moment and ng-select.

Check it out on Github and installation using npm.

npm install --save @biliboobrian/ng-datasheet @ng-bootstrap/ng-bootstrap @ng-select/ng-select @fortawesome/fontawesome-free moment moment-es6

Import inside your NgModule

Import the library inside your NgModule by adding the import statment and adding an import 'NgDatasheetModule' inside your @NgModule imports object.

import { NgDatasheetModule } from '@biliboobrian/ng-datasheet';


    imports: [
    declarations: [

Instanciate your first Ng-DataSheet

In a component child of your module, add in the .html file the ng-datasheet tag.


And add in the .ts file the description of your columns and the dataSet Object.

import {
} from '@biliboobrian/ng-datasheet';


export class yourComponent implements OnInit {

    columns: Array<Column>;
    dataSet: Array<object> = [];


    ngOnInit() {
        let col: Column = new Column('ID', 'id', CellViewBasicComponent, CellEditBasicComponent, 60);

        col = new Column('Firstname', 'firstname', CellViewBasicComponent, CellEditBasicComponent, 0);


For more information, documentation and demo please see the Homepage.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.