Installing

$ npm i sp-grid

Adding angular material

Great now that we are sure the application loaded, you can stop it pressing “Ctrl + c” in the console you are running it, so we can add Angular Material to our application through the schematics.

$ ng add @angular/material

For more details click here.

Setup

...
import { SpGridModule } from 'sp-grid';
...

@NgModule({
  imports: [
    ...
    SpGridModule
     ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Basic Usage

my.component.html

<app-sp-grid [settings]="settings" [data]="data" [colDef]="colDef"></app-sp-grid>

my.component.ts

import { Component } from '@angular/core';
import { SettingsVM,ColumnDefinition  } from 'sp-grid';

export class AppComponent {
  settings: SettingsVM = new SettingsVM();

  data: Array<any>;
  colDef: Array<ColumnDefinition>;

  constructor() { }

  ngOnInit() {
    this.colDef = [
      { label: 'Country', key: 'country' },
      { label: 'Capital', key: 'cap'},
      { label: 'Inhabitants', key: 'inhabit' }
    ]

    this.data = [
      { country: 'Italy', cap: 'Rome', inhabit: 60483973 },
      { country: 'France', cap: 'Paris', inhabit: 64513000 },
      { country: 'Germany', cap: 'Berlino', inhabit: 83517045 },
      { country: 'Spain', cap: 'Madrid', inhabit: 47000000 },
      { country: 'Portugal', cap: 'Lisbona', inhabit: 10341330 }
    ]
   
  }
  
}

Editable Usage

Insert editable = true in column setting. You can select between input text (inputType = text), select (inputType = select) and datePicker (inputType = date). Output event on save: (updatedRow)

my.component.html

<app-sp-grid [settings]="settings" [data]="data" [colDef]="colDef" (updatedRow)="callBack($event)"></app-sp-grid>

my.component.ts

import { Component } from '@angular/core';
import { SettingsVM,ColumnDefinition  } from 'sp-grid';

export class AppComponent {
  data: Array<any>;
  colDef: Array<ColumnDefinition>;

  constructor() { }

  ngOnInit() {
    this.colDef = [
      { label: 'Country', key: 'country', editable: true, inputType: 'text' },
      { label: 'Capital', key: 'cap'},
      { label: 'Inhabitants', key: 'inhabit' }
    ]

    this.data = [
      { country: 'Italy', cap: 'Rome', inhabit: 60483973 },
      { country: 'France', cap: 'Paris', inhabit: 64513000 },
      { country: 'Germany', cap: 'Berlino', inhabit: 83517045 },
      { country: 'Spain', cap: 'Madrid', inhabit: 47000000 },
      { country: 'Portugal', cap: 'Lisbona', inhabit: 10341330 }
    ]
   
  }
  
}

Sortable Usage

Insert sortable = true in column setting. Output event: (sortEvent)

my.component.html

<app-sp-grid [settings]="settings" [data]="data" [colDef]="colDef" (sortEvent)="callBack($event)"></app-sp-grid>

my.component.ts

import { Component } from '@angular/core';
import { SettingsVM,ColumnDefinition  } from 'sp-grid';

export class AppComponent {
  data: Array<any>;
  colDef: Array<ColumnDefinition>;

  constructor() { }

  ngOnInit() {
    this.colDef = [
      { label: 'Country', key: 'country' },
      { label: 'Capital', key: 'cap'},
      { label: 'Inhabitants', key: 'inhabit', sortable: true }
    ]

    this.data = [
      { country: 'Italy', cap: 'Rome', inhabit: 60483973 },
      { country: 'France', cap: 'Paris', inhabit: 64513000 },
      { country: 'Germany', cap: 'Berlino', inhabit: 83517045 },
      { country: 'Spain', cap: 'Madrid', inhabit: 47000000 },
      { country: 'Portugal', cap: 'Lisbona', inhabit: 1034133 }
    ]
   
  }
  
}

Paginable Usage

Insert paginable = true, pageSize(optional) and pageSizeOptions(optional) in general setting. Output event: (pageEvent)

my.component.html

<app-sp-grid [settings]="settings" [data]="data" [colDef]="colDef" (pageEvent)="callBack($event)"></app-sp-grid>

my.component.ts

import { Component } from '@angular/core';
import { SettingsVM,ColumnDefinition  } from 'sp-grid';

export class AppComponent {
  settings: SettingsVM = new SettingsVM();

  data: Array<any>;
  colDef: Array<ColumnDefinition>;

  constructor() { }

  ngOnInit() {
    this.settings.paginable = true;
    this.settings.pageSizeOptions = [5, 50, 100];
    this.settings.pageSize = 5;

    this.colDef = [
      { label: 'Country', key: 'country' },
      { label: 'Capital', key: 'cap'},
      { label: 'Inhabitants', key: 'inhabit'}
    ]

    this.data = [
      { country: 'Italy', cap: 'Rome', inhabit: 60483973 },
      { country: 'France', cap: 'Paris', inhabit: 64513000 },
      { country: 'Germany', cap: 'Berlino', inhabit: 83517045 },
      { country: 'Spain', cap: 'Madrid', inhabit: 47000000 },
      { country: 'Portugal', cap: 'Lisbona', inhabit: 1034133 }
    ]
   
  }
  
}

Master/Details Usage

Insert expandable = true in genaral setting. Output event: (getDetails)

my.component.html

<app-sp-grid [settings]="settings" [data]="data" [colDef]="colDef" [dataExpanded]="dataExpanded" [colDefExpanded]="colDefExpanded" (getDetails)="callBack($event)"></app-sp-grid>

my.component.ts

import { Component } from '@angular/core';
import { SettingsVM,ColumnDefinition  } from 'sp-grid';

export class AppComponent {
  data: Array<any>;
  colDef: Array<ColumnDefinition>;

  constructor() { }

  ngOnInit() {
    this.colDef = [
      { label: 'Country', key: 'country' },
      { label: 'Capital', key: 'cap'},
      { label: 'Inhabitants', key: 'inhabit', sortable: true }
    ]

    this.data = [
      { country: 'Italy', cap: 'Rome', inhabit: 60483973 },
      { country: 'France', cap: 'Paris', inhabit: 64513000 },
      { country: 'Germany', cap: 'Berlino', inhabit: 83517045 },
      { country: 'Spain', cap: 'Madrid', inhabit: 47000000 },
      { country: 'Portugal', cap: 'Lisbona', inhabit: 1034133 }
    ]
  }

  rowClickDetails(evt) {
    this.colDefExpanded = [
      { label: 'City', key: 'city' },
      { label: 'Region', key: 'region'},
      { label: 'Inhabitants', key: 'inhabit' }
    ]

    this.dataExpanded = [
      { city: 'Torino', region: 'Piemonte', inhabit: 886837 },
      { city: 'Roma', region: 'Lazio', inhabit: 2513000 },
      { city: 'Napoli', region: 'Campania', inhabit: 972130 }
    ]
  }
  
}

Column settings

It is possible to format the data as a number or date.

Date:

my.component.ts

...
{ label: 'Date', key: 'date', type: 'date', formatDate: 'dd/MM/yyyy' }
...

Number:

my.component.ts

...
{ label: 'Inhabitants', key: 'inhabit', type: 'number', formatNumber: '1.0-0' },
...

Percentage template default: my.component.ts

...
{ label: '...', key: '...', defaultTemplate: 'percTemplate' }
...

Currency template default: my.component.ts

...
{ label: '...', key: '...', defaultTemplate: 'currencyTemplate', currency: '€' }
...

Template custom:

my.component.ts

...
@ViewChild('plusMinusTemplate', { static: true }) plusMinusTemplate;
...
{ label: 'Inhabitants', key: 'inhabit', template: this.plusMinusTemplate, secondVal: 'country'}
...

my.component.html

...
<ng-template #plusMinusTemplate let-value let-second="secondVal">
  <span *ngIf="value>0" class="plus-grid">+ </span>
  <span *ngIf="value<0" class="minus-grid">- </span>
  <span [innerText]="value"></span>
</ng-template>
...

Custom theme

You can select a template from the ones we offer or customize each section.

my.component.ts

this.settings.theme = 'dark';

this.settings.colorAccent='#47618E';
this.settings.colorBorder='#47618E';
this.settings.colorHover='#47618E';
this.settings.colorLightBackground='#47618E';
this.settings.colorTitle='white';
this.settings.colorTitleBackground='#47618E';

SettingsVM Attributes Map

ColumnDefinition Attributes Map

Theme Details

type

This value indicates the type of theme

• default
• dark
• gray

Column Definition - Label

label

This value indicates the label of column

Column Definition - Key

Key

This value indicates the name of the property of the data source to which it is associated

Column Definition - Width

Width

This value indicates the width of col in % (ex: '50%')

Column Definition - Type

type

This value indicates the type of value

• number
• date

Column Definition - Format Date

formatDate

This value indicates the format of date (ex: 'dd/MM/yyyy')

Column Definition - Format Number

formatNumber

This value indicates the format of number (ex: '1:0-0')

Column Definition - Input Type

inputType

You can set this value only if the editable property is true.

• text
• select
• date

Column Definition - Options Select

optionsSelect

You can set this value only if the editable property is true and inputType is select.

Column Definition - Default Template

defaultTemplate

It is possible to associate a default template.

• percTemplate
• currencyTemplate

Column Definition - Currency

currency

You can set this value only if the default template property is currencyTemplate (es: '€').