sp-grid

An Angular 8 plugin that allows:

Create a table with custom columns.

This table is editable, sortable and pageable. It is possible to customize the template of each single column by passing a template or using the ones already provided

Through the settings and even possible to activate the master / details function

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

Options	Type	Default
expandable	boolean	false
paginable	boolean	false
pageSize	number	5
pageSizeOptions	Array	[5, 10, 20, 50]
colorTitleBackground	string
colorLightBackground	string
colorAccent	string
colorBorder	string
colorTitle	string
colorHover	string
theme	string	default

ColumnDefinition Attributes Map

Options	Type	Default
label	string
key	string
width	string	auto
sortable	boolean	false
editable	boolean	false
type	string	string
formatDate	string
formatNumber	string
inputType	string
optionsSelect	Array	[]
template	TemplateRef
secondVal	string
thirdVal	string
defaultTemplate	string
currency	string

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: '€').