JSPM

  • Created
  • Published
  • Downloads 121
  • Score
    100M100P100Q74293F
  • License MIT

Package Exports

  • ngtreegrid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngtreegrid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngtreegrid

Angular Tree Grid. Simple, Light Weight and dependency free.

Demo

Click here for demo.

Installation

    npm i ngtreegrid

Usage

Import

Import NgtreegridModule Module in your application module.

  import { NgtreegridModule } from 'ngtreegrid';

Data

Format of the data should be like below.

  data = [
    { Phase: 'Phase 1', Step: 'Step 1', Task: 'Task 1', Value: '5' },
    { Phase: 'Phase 1', Step: 'Step 1', Task: 'Task 2', Value: '10' },
    { Phase: 'Phase 1', Step: 'Step 2', Task: 'Task 1', Value: '15' },
    { Phase: 'Phase 1', Step: 'Step 2', Task: 'Task 2', Value: '20' },
    { Phase: 'Phase 2', Step: 'Step 1', Task: 'Task 1', Value: '25' },
    { Phase: 'Phase 2', Step: 'Step 1', Task: 'Task 2', Value: '30' },
    { Phase: 'Phase 2', Step: 'Step 2', Task: 'Task 1', Value: '35' },
    { Phase: 'Phase 2', Step: 'Step 2', Task: 'Task 2', Value: '40' }
  ];

Config

Below are configs that can be set

  group_by(Mandatory): It's a mandatory field. It is a column key.
  columns(Optional): It is a mapper between column key to the column header that will be displayed in the table. Defaults to all column keys. If provided, only columns specified will be displayed in the table.
  add_class(Optional): Icon class for Plus icon. Font Awesome class can be given.
  minus_class(Optional): Icon class for Minus icon. Font Awesome class can be given.

Example

  config: any = {
    'columns': {
      'Step': 'Step Number',
      'Value': 'Amount'
    },
    'group_by': 'Phase'
  };

Directive

  <db-ngtreegrid [data]="data" [config]="config"></db-ngtreegrid>

License

This project is licensed under the MIT license.