Ng-Fusion-Ui

Angular - mobile friendly and type safe data-grid system and more..!

Documentation

For full documentation, visit Fusion Ui.

Installation

  npm install ng-fusion-ui

    "styles": [
        ...,
        "node_modules/ng-fusion-ui/styles/styles.scss"
    ],
 

Basic Usage/Examples

<fu-data-grid 
  [dataSource]="data" 
  [expandable]="true" 
  [paginator]="true"
>
  <ng-container *fuHeaderTemplate>
    <fu-head-row-cell cellDef="Id" />
    <fu-head-row-cell cellDef="Name" />
    <fu-head-row-cell cellDef="Email" />
    <fu-head-row-cell cellDef="Phone" />
  </ng-container>

  <ng-container *fuBodyTemplate="data; let row">
    <fu-body-row-cell [cellValue]="row.id" />
    <fu-body-row-cell [cellValue]="row.name" />
    <fu-body-row-cell [cellValue]="row.email" />
    <fu-body-row-cell [cellValue]="row.phone" />
  </ng-container>

  <ng-container *fuExpandTemplate="data; let row">
    expand content goes here...
  </ng-container>
</fu-data-grid>