NgNgrid2

This is a data grid using angular 7 with typescript More info to come.

You can see the demo here: https://nikhilogic.github.io/ngNgrid2/

To install the library in your project :

1. Add npm package and dependencies

npm install ngrid2
npm install @angular/http@latest
npm install @ng-bootstrap/ng-bootstrap@latest
npm install npm@latest

2. Add imports to your app.module.ts

    import { Ngrid2Module } from 'ngrid2';
    ...
    @NgModule({
    ...
    imports: [
        ...
        Ngrid2Module
    ],
    ...
    })

3. In your app.component.ts

    //Import required types
    ...
    import { Ngrid2ButtonColumn, Ngrid2DefaultColumn, Ngrid2InputColumn, Ngrid2SelectColumn, Ngrid2LinkColumn,  Ngrid2DateColumn,Ngrid2DropdownFilter,INgrid2Row } from 'ngrid2';
    import { MyObjectRow } from './MyObjectRow'; //this will be your (row) class which will implement the INgrid2Row interface 
    // something like 
    // export class MyObjectRow implements INgrid2Row
    // {
    //     Children: INgrid2Row[];    
    //     isNgNgridOpen: boolean;
    //     Index: number;
    //     isNgNgridMarkedForDelete: boolean;
    //     isNgNgridMarkedForNew: boolean;
    //     isNgNgridDirty: boolean;
    //     isNgNgridSelected: boolean;
    //     isNgNgridUpdated: boolean;

    //     Col1: string;
    //     Col2: string;
    //     Col3: string;
    //     Col4 : object;
    //     Col5 : string;      
    //     Col6 : Date;
    //     Col7 : number;
    // }
    ...

    export class AppComponent implements OnInit {
    ...
     // define the variables used for the grid
     columnDefinitions : Ngrid2DefaultColumn[];    //Used for intializing the main columns for the grid
     rows : any[]; //used for setting the rows for the grid
     childColumndefinitions : Ngrid2DefaultColumn[];    //optional: used for setting child columns 
     childPropertynames:  string[];  // optional : used for specifying which property of the main row contains the child rows.
     ...
    
     
     //create column objects (example a button column)
     getButtonCol(): Ngrid2DefaultColumn {
        var btnCol : Ngrid2ButtonColumn = new Ngrid2ButtonColumn();
        btnCol.Name= "Col2",
        btnCol.isNgNgridColumnHide = false,
        btnCol.DisplayName = () => {
        return btnCol.Name;
        };
        btnCol.isNgNgridSelected = false;        
        btnCol.ClassFn  = (r: INgrid2Row) => {
        return "btn-" + r[btnCol.Name];
        };
        btnCol.CellClassFn = (r: INgrid2Row) => {
        return "";
        };
        btnCol.TooltipFn = (r: INgrid2Row) => {      
        return "hello";
        };
        btnCol.BadgeFn = (r: INgrid2Row) => {      
        return r.Index.toString();
        };
        btnCol.BadgeClassFn = (r: INgrid2Row) => {      
        return "badge-dark badge-pill";
        };
        btnCol.BadgeUrlFn = (r: INgrid2Row) => {      
        return "https=//www.bing.com"
        };
        btnCol.BadgeTargetFn = (r: INgrid2Row) => {      
        return "_top"; 
        };
        btnCol.IconFn = (r: INgrid2Row) => {
        return "far fa-play-circle";
        };
        btnCol.NullOrEmptyFn =  (r: INgrid2Row) => {      
        return "No Value";
        }        
        btnCol.FilterClassFn = (d: Ngrid2DropdownFilter) => {      
        return "bg-"  + d.DistinctValue ;
        };
        btnCol.FilterIconFn= (d: Ngrid2DropdownFilter) => {
        return "far fa-play-circle";
        };
        btnCol.NullOrEmptyFn =  (r: INgrid2Row) => {      
            return "No Value";
        }
        btnCol.ClickFn =  (r: INgrid2Row) => {
        alert("clicked");
        };
        btnCol.DisabledFn =  (r: INgrid2Row) => {
        return false;
        }
        return btnCol;
    }
...
 ngOnInit() {           
     
    //set the columns for the grid
    this.columnDefinitions = [];    
    this.rows = [];    
    this.childColumndefinitions = [];
    this.childPropertynames =["Children"];        

    //add column definition for the grid
    this.columnDefinitions.push(this.getButtonCol());

    //create a row for the grid
    var newrow : MyObjectRow = new MyObjectRow();
    newrow.Index = 0;
    newrow.isNgNgridOpen = false;
    newrow.Col2  = "textonbutton";      
    
    //add the row to the grid
    this.rows.push(newrow); 
    ...
 }

4. In your HTML reference the grid like this

<ng-ngrid2
[columnDefinitions]="columnDefinitions" 
[childColumndefinitions]="childColumndefinitions"
[rows]="rows" 
[showSettings]="false"
[childPropertynames]="childPropertynames"></ng-ngrid2>