angular-fusiongrid

Angular FusionGrid

Angular FusionGrid is the official Angular component for FusionGrid, enabling seamless integration of sophisticated grid functionalities within Angular applications.

Features

• Simple Integration: Easily embed FusionGrid into your Angular projects.
• Lightweight: Optimized for performance without sacrificing capabilities.
• Customizable: Extensive options for customization to meet diverse data representation needs.

Prerequisites

• Node.js and NPM/Yarn
• Angular CLI
• FusionGrid Library

Installation

You can install Angular FusionGrid using NPM or Yarn, or by directly downloading the binaries from our GitHub repository.

Using NPM

npm install angular-fusiongrid fusiongrid

Using Yarn

yarn add angular-fusiongrid fusiongrid

Direct Download

Download the binaries from the GitHub repository.

Quick Start Guide

Setting Up Dependencies

Import and configure FusionGridModule in your Angular project:

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',
  styleUrls: ['./app.component.css']
})

Creating a Component

Define your grid schema and data within your Angular 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: (params: any) => {
          const url = `https://static.fusioncharts.com/fg/demo/assets/images/${params.values["Make"]}.png`;
          return `<div><img src="${url}" width="50px" style="vertical-align:middle"></div>`;
        },
      },
      {
        field: "Units Sold",
        width: "160px",
        type: "chart",
        tooltip: {
          headerTooltip: "Number of units sold globally",
          enableHeaderHelperIcon: true,
          enableCellTooltip: false,
        },
        formatter: (params: any) => new Intl.NumberFormat().format(params.cellValue),
        style: (params: any) => (params.cellValue > 600000 ? { "background-color": "lightgreen" } : undefined),
      },
      {
        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: (params: any) => {
            const url = `https://static.fusioncharts.com/fg/demo/assets/images/${params.values["Make"]}.png`;
            return `<div><img src="${url}" width="50px" style="vertical-align:middle"></div>`;
          },
        },
      ],
    };
  }

  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,
        },
      },
    };
  }
}

Embedding FusionGrid

Include the FusionGrid component in your app.component.html:

<fusion-grid style="width: 1000px; height: 600px;" [dataTable]="dataTable" [gridConfig]="gridConfig"> </fusion-grid>

Handling Events

Listen to FusionGrid events like initialization:

<fusion-grid [dataTable]="dataTable" [gridConfig]="gridConfig" (initialized)="initialized($event)"> </fusion-grid>

Documentation

For more detailed information on implementation and features, visit the FusionCharts Developer Center.