@biliboobrian/ng-datasheet

Native Angular inline spreadsheet component

Usage no npm install needed!

<script type="module">
  import biliboobrianNgDatasheet from 'https://cdn.skypack.dev/@biliboobrian/ng-datasheet';
</script>

README

ng-datasheet

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';

...

@NgModule({
    imports: [
        CommonModule,
        ...
        NgDatasheetModule
    ],
    declarations: [
        ...
    ]
})

Instanciate your first Ng-DataSheet

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

<ds-datasheet
    [trBgColor]="'#fffede'"
    [dataSet]="dataSet"
    [columns]="columns">
</ds-datasheet>

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

import {
    CellViewBasicComponent,
    CellEditBasicComponent,
    Column
} 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);
        this.columns.push(col);

        col = new Column('Firstname', 'firstname', CellViewBasicComponent, CellEditBasicComponent, 0);
        this.columns.push(col);

        ...
    }

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