1.2.3 • Published 2 months ago
angular-fusiongrid v1.2.3
Angular FusionCharts
A simple and lightweight official Angular component for FusionGrid JavaScript grid library. Angular Fusiongrid enables you to add grids in your Angular application without any hassle.
Getting Started
Requirements
- Node.js, NPM/Yarn
- AngularCLI
- FusionGrid and Angular
Installation
Using NPM
npm install angular-fusiongrid fusiongrid
Using Yarn
yarn add angular-fusiongrid fusiongrid
Direct Download
All binaries are located in our github repository.
Quick Start
Add and setup dependency
import { FusionGridModule } from 'angular-fusiongrid';
import FusionGrid from 'fusiongrid';
import 'fusiongrid/dist/fusiongrid.css';
FusionGridModule.setFGRoot(FusionGrid);
@Component({
selector: 'app-root',
standalone: true,
imports: [FusionGridModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
Create component
export class AppComponent {
title = 'fusion-grid-test';
schema = [
{
name: 'Rank',
type: 'number',
}, {
name: 'Model'
},
{
name: 'Make'
},
{
name: 'Units Sold',
type: 'number'
},
{
name: 'Assembly Location'
}
];
data = [
[1, "F-Series", "Ford", 896526, "Claycomo, Mo."],
[2, "Pickup", "Ram", 633694, "Warren, Mich."],
[3, "Silverado", "Chevrolet", 575600, "Springfield, Ohio"],
[4, "RAV4", "Toyota", 448071, "Georgetown, Ky."],
[5, "CR-V", "Honda", 384168, "Greensburg, Ind."],
[6, "Rogue", "Nissan", 350447, "Smyrna, Tenn."],
[7, "Equinox", "Chevrolet", 346048, "Arlington, Tex."],
[8, "Camry", "Toyota", 336978, "Georgetown, Ky."],
[9, "Civic", "Honda", 325650, "Greensburg, Ind."],
[10, "Corolla", "Toyota", 304850, "Blue Springs, Miss."],
[11, "Accord", "Honda", 267567, "Marysville, Ohio"],
[12, "Tacoma", "Toyota", 248801, "San Antonio, Tex."],
[13, "Grand Cherokee", "Jeep", 242969, "Detroit, Mich."],
[14, "Escape", "Ford", 241338, "Louisville, Ky."],
[15, "Highlander", "Toyota", 239438, "Princeton, Ind."],
[16, "Sierra", "GMC", 232325, "Flint, Mich."],
[17, "Wrangler", "Jeep", 228032, "Toledo, Ohio"],
[18, "Altima", "Nissan", 209183, "Smyrna, Tenn."],
[19, "Cherokee", "Jeep", 191397, "Belvidere, Ill."],
[20, "Sentra", "Nissan", 184618, "Canton, Miss."],
];
dataTable: any;
gridConfig: any = {
// rowOptions: {
// style: { "background-color": "oldlace" },
// hover: {
// enable: true,
// style: { "background-color": "white" },
// },
// },
pagination: {
enable: false,
pageSize: {
default: 10,
options: true
},
showPages: {
enable: true,
showTotal: true,
userInput: true
}
},
columns: [
{ field: 'Rank', width: '200px' },
{
field: 'Make',
type: 'html',
template: function (params: any) {
var url = "https://static.fusioncharts.com/fg/demo/assets/images/" +
params.values["Make"] + ".png";
var html = '<div><img src="' + url
+ '" width="50px" style="vertical-align:middle"></div>';
return html;
}
},
{
field: 'Units Sold',
width: '160px',
type: 'chart',
tooltip: {
headerTooltip: "Number of units sold globally",
enableHeaderHelperIcon: true,
enableCellTooltip: false
},
formatter: function (params:any) {
return new Intl.NumberFormat().format(params.cellValue);
},
style: function (params:any) {
if (params.cellValue > 600000) {
return { 'background-color': 'lightgreen' }
}
return;
}
},
{
field: 'Assembly Location',
headerText: 'Assembly Location in US'
},
]
}
constructor() {
const dataStore = new FusionGrid.DataStore();
this.dataTable = dataStore.createDataTable(this.data, this.schema, {
enableIndex: false
});
}
updateData() {
this.data = [
[1, "F-Series", "Ford", 896526, "Claycomo, Mo."],
[2, "Pickup", "Ram", 633694, "Warren, Mich."]
];
}
initialized(event: any) {
console.log(event);
}
updateColumns() {
this.gridConfig = {
...this.gridConfig,
columns: [{ field: 'Rank', width: '70px' }, {
field: 'Make',
type: 'html',
template: function (params:any) {
var url = "https://static.fusioncharts.com/fg/demo/assets/images/" +
params.values["Make"] + ".png";
var html = '<div><img src="' + url
+ '" width="50px" style="vertical-align:middle"></div>';
return html;
}
}]
}
}
updateRowOption() {
this.gridConfig = {
...this.gridConfig,
rowOptions: {
style: { "background-color": "red" },
hover: {
enable: true,
style: { "background-color": "white" },
},
},
}
}
updatePagination() {
this.gridConfig = {
...this.gridConfig,
pagination: {
enable: true,
pageSize: {
default: 10,
options: true
},
showPages: {
enable: true,
showTotal: true,
userInput: true
}
},
}
}
}
Add the FusionGrid component selector in the app.component.html
<fusion-grid
style="width: 1000px; height: 1000px;"
[dataTable]="dataTable"
[gridConfig]="gridConfig">
</fusion-grid>
Working with Events
<fusion-grid
[dataTable]="dataTable"
[gridConfig]="gridConfig"
(initialized)="initialized($event)">
</fusion-grid>
More Details
For detailed documentation please visit FusionCharts dev center portal.