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

sp-grid

sp-grid

Installing

Setup

Basic Usage

Editable Usage

Sortable Usage

Paginable Usage

Master/Details Usage

Column settings

Custom theme

SettingsVM Attributes Map

ColumnDefinition Attributes Map

Theme Details

type

Column Definition - Label

label

Column Definition - Key

Key

Column Definition - Width

Width

Column Definition - Type

type

Column Definition - Format Date

formatDate

Column Definition - Format Number

formatNumber

Column Definition - Input Type

inputType

Column Definition - Options Select

optionsSelect

Column Definition - Default Template

defaultTemplate

Column Definition - Currency

currency

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

`type`

`label`

`Key`

`Width`

`type`

`formatDate`

`formatNumber`

`inputType`

`optionsSelect`

`defaultTemplate`

`currency`

Weekly Downloads