sp-grid
An Angular 8 plugin that allows:
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
...;... @
Basic Usage
my.component.html
my.component.ts
;; settings: SettingsVM = ; data: Array<any>; colDef: Array<ColumnDefinition>; { } { thiscolDef = label: 'Country' key: 'country' label: 'Capital' key: 'cap' label: 'Inhabitants' key: 'inhabit' thisdata = 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
my.component.ts
;; data: Array<any>; colDef: Array<ColumnDefinition>; { } { thiscolDef = label: 'Country' key: 'country' editable: true inputType: 'text' label: 'Capital' key: 'cap' label: 'Inhabitants' key: 'inhabit' thisdata = 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
my.component.ts
;; data: Array<any>; colDef: Array<ColumnDefinition>; { } { thiscolDef = label: 'Country' key: 'country' label: 'Capital' key: 'cap' label: 'Inhabitants' key: 'inhabit' sortable: true thisdata = 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
my.component.ts
;; settings: SettingsVM = ; data: Array<any>; colDef: Array<ColumnDefinition>; { } { thissettingspaginable = true; thissettingspageSizeOptions = 5 50 100; thissettingspageSize = 5; thiscolDef = label: 'Country' key: 'country' label: 'Capital' key: 'cap' label: 'Inhabitants' key: 'inhabit' thisdata = 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
my.component.ts
;; data: Array<any>; colDef: Array<ColumnDefinition>; { } { thiscolDef = label: 'Country' key: 'country' label: 'Capital' key: 'cap' label: 'Inhabitants' key: 'inhabit' sortable: true thisdata = 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 } { thiscolDefExpanded = label: 'City' key: 'city' label: 'Region' key: 'region' label: 'Inhabitants' key: 'inhabit' thisdataExpanded = 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
...@ plusMinusTemplate;... label: 'Inhabitants' key: 'inhabit' template: thisplusMinusTemplate secondVal: 'country'...
my.component.html
... + - ...
Custom theme
You can select a template from the ones we offer or customize each section.
my.component.ts
thissettingstheme = 'dark'; thissettingscolorAccent='#47618E';thissettingscolorBorder='#47618E';thissettingscolorHover='#47618E';thissettingscolorLightBackground='#47618E';thissettingscolorTitle='white';thissettingscolorTitleBackground='#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: '€'
).