agrid

Installation

npm install --save agrid

Once installed you need to import our main module:

import { AgridModule } from 'agrid';
 
@NgModule({
  declarations: [AppComponent, ...],
  imports: [AgridModule, ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Usage:

Basic:

Bind the items you need to display to the [items] property of component and specify columns

- colName - property name
- colTitle - title of column (text in header)
- resizable - column can be resized or not (true by default)
- width - width of column in pixels
- widthUnit - units of width, can be px or %, default px

    <a-grid [items]="tableState.items">
        <a-grid-column [resizable]="true" colName="name" colTitle="Name" [width]="240" widthUnit="%"></a-grid-column>
        <a-grid-column [resizable]="false" colName="surname" colTitle="Surname"></a-grid-column>
    </a-grid>

Cell template

Specify template of column cell by setting it like this:

    <a-grid [items]="tableState.items">
    	<a-grid-column [resizable]="false" [width]="40">
            <!-- pass the row to the cell template -->
            <input *aGridCell="let row" type="checkbox" [(ngModel)]="row.checked" />
        </a-grid-column>
        <a-grid-column [resizable]="false" [width]="40" colTitle="№">
            <!-- pass the rowIndex to the cell template -->
            <span *aGridCell="let index=rowIndex">{{index+1}}</span>
        </a-grid-column>
        <a-grid-column colName="name" colTitle="Name"></a-grid-column>
        <a-grid-column colName="surname" colTitle="Surname"></a-grid-column>
        <a-grid-column colTitle="Gender">
            <span *aGridCell="let row">{{row.gender?'male':'female'}}</span>
        </a-grid-column>
        <a-grid-column colTitle="delete item">
        <!-- pass the rowElement to the cell template (for adding specific class to entire row before deleting to highlight row) -->
            <div *aGridCell="let row; let tr=rowElement">
                <button (mouseenter)="tableState.deleteMouseOver(tr)" (mouseleave)="tableState.deleteMouseLeave(tr)" (click)="tableState.removeItem(row)">-</button>
            </div>
        </a-grid-column>
    </a-grid>

Header template

Specify template of column header by setting it like this:

    <a-grid [items]="tableState.items">
        <a-grid-column [resizable]="true" colName="name" [width]="240">
            <!-- pass the column to the header template -->
            <sortable-header *aGridHeader="let col;" (click)="tableState.sortBy('name')">Name {{col.width}}</sortable-header>
        </a-grid-column>
        <a-grid-column [resizable]="false" colName="surname" colTitle="Surname"></a-grid-column>
    </a-grid>

Groupping

Specify template of row groups by setting it like this:

    <a-grid [items]="tableState.items">
        <!-- 
            - set groupping fields (by tableState.groupFields), tableState.groupFields can be a string name of single field, and array of multiple fields names
            - optionally set initial collapsed groups (collapsed tableState.groupFields), tableState.groupFields can be a string name of single field, and array of multiple fields names
            - pass instance of group object (let group)
            - groupChild (instance of group childs array)
            - grLevel (groupping level)
            - groupCollapsed (state of group - collapsed/expanded)
            - group.toggleCollapse() (collapse/expand group) -->
        <div *aGridGroup="let group by tableState.groupFields collapsed tableState.groupFields; let groupChild=children;let grLevel=groupLevel;let groupCollapsed=collapsed;" [style.padding-left]="10+grLevel*20+'px'">
            <button (click)="group.toggleCollapse()">{{groupCollapsed?'+':'–'}}</button>
            {{group.value + ' ('+groupChild.length+') level:'+grLevel}}</div>
 
        <a-grid-column [resizable]="true" colName="name" colTitle="Name" [width]="240"></a-grid-column>
        <a-grid-column [resizable]="false" colName="surname" colTitle="Surname"></a-grid-column>
    </a-grid>

Row detail

Specify the row detail template by setting it like this:

    <a-grid [items]="tableState.items">
        <!-- 
            - row - current row
            - index - index of current row
            - expandedrows - bind array of rows (if current row isin this array - detail is expanded) -->
        <div *aGridDetail="let row; let index=rowIndex expandedrows tableState.expandedRows;">
            <input type="text" [(ngModel)]="tableState.editableRow.name" placeholder="Name" />
            <input type="text" [(ngModel)]="tableState.editableRow.surname" placeholder="Surname" />
            <button (click)="tableState.saveEditedRow(index)">save</button>
        </div>
 
        <a-grid-column [resizable]="false" [width]="40">
        <!-- tableState.toggleRow(row) - add row to expanded rows array -->
            <button *aGridCell="let row" (click)="tableState.toggleRow(row)">
                {{tableState.expandedRows.indexOf(row)===-1?'+':'–'}}
            </button>
        </a-grid-column>
 
        <a-grid-column [resizable]="true" colName="name" colTitle="Name" [width]="240"></a-grid-column>
        <a-grid-column [resizable]="false" colName="surname" colTitle="Surname"></a-grid-column>
    </a-grid>

Events

 
    <!-- 
        - onBodyScroll - body scroll event
        - onRowClick - row click event
        - onRowDoubleClick - row double click event
     -->
 
    <a-grid 
    (onBodyScroll)="tableState.bodyScroll($event)" 
    (onRowClick)="tableState.select($event)" 
    (onRowDoubleClick)="tableState.checkDblClick($event)" 
    [items]="tableState.items">
    	<a-grid-column [resizable]="false" [width]="40">
            <input *aGridCell="let row" type="checkbox" [(ngModel)]="row[tableState.checkedProperty]" />
        </a-grid-column>
        <a-grid-column [resizable]="true" colName="name" colTitle="Name" [width]="240"></a-grid-column>
        <a-grid-column [resizable]="false" colName="surname" colTitle="Surname"></a-grid-column>
    </a-grid>

Properties

 
    <!-- 
        - checkedProperty - name of field in item for setting checked state for it
        - onRowClick - name of field in item for setting selected state for it
        - showHeader - show header or not
     -->
 
    <a-grid 
 
    [checkedProperty] = "tableState.checkedProperty"
    [selectedProperty] = "tableState.selectedProperty"
    [showHeader]="true"
 
    (onBodyScroll)="tableState.bodyScroll($event)" 
    (onRowClick)="tableState.select($event)" 
    (onRowDoubleClick)="tableState.checkDblClick($event)" 
    [items]="tableState.items">
    	<a-grid-column [resizable]="false" [width]="40">
            <input *aGridCell="let row" type="checkbox" [(ngModel)]="row[tableState.checkedProperty]" />
        </a-grid-column>
        <a-grid-column [resizable]="true" colName="name" colTitle="Name" [width]="240"></a-grid-column>
        <a-grid-column [resizable]="false" colName="surname" colTitle="Surname"></a-grid-column>
    </a-grid>