SmallGridTable

used in angular project

a simple grid table for small data, self-defined ui for each cell

Install

npm install small-grid-table

Usage

(stackblitz example)

Click to Demo Project

USEAGE SCREENSHOOTS

<nv-small-grid-table
    [dtb]="dtb"             //data mat
    width="700"             //the container width
    ratio="2:1"             //width:height of each cell
    [dflt]="false"          //enable default ui
    [ui_func]="set_ui"      //customer defined function to set ui for each cell
>
    <ng-template let-cell #smallGridTableSlot>
        <your-html-here>....</your-html-here>
    </ng-template>
</nv-small-grid-table>


dtb format :
    [
        [cell,cell,cell....],
        ...
        [cell,cell,cell....]
    ]

cell format:
    {
        data:"your data",
        ui:"css here for cell"      //optional
    }

ui_func:
    (cell)=> {
        cell.ui = ....
        cell._r        //row-index
        cell._c        //col-index
    }

    such as:

    public set_ui = (cell)=>{
        if(cell._r > cell._c) {
            cell.ui="box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.2);"
        } else if(cell._r === cell._c) {
            cell.ui="background-color:#f8f8f8;"
        } else {
           cell.ui="background-color:yellow;"
        }
    }

with default ui

<div fxLayout="column" fxLayoutAlign="center center" [style.width.px]="1000" [style.height.px]="1000">
    <nv-small-grid-table [dtb]="dtb2" width="700" ratio="2:1" >
        <ng-template let-cell #smallGridTableSlot>
                <div *ngIf="cell._c!==0 && cell._r!==0">{{cell.data *3 }}</div>
                <div *ngIf="cell._r===0 && cell._c===0">{{cell.data }}</div>
                <div *ngIf="cell._r===0 && cell._c!==0">{{cell.data | translate:'role'}}</div>
                <div *ngIf="cell._c===0 && cell._r!==0">{{cell.data | translate:'priority'}}</div>
            </ng-template>
        </nv-small-grid-table>
    <nv-small-grid-table [dtb]="dtb2" width="700" ratio="2:1" >
            <ng-template let-cell #smallGridTableSlot>
                    <mat-form-field *ngIf="cell._r>0 && cell._c>0" style="width:50%;">
                            <input  matInput type="number" min="0" [(ngModel)]="cell.data"/>
            </mat-form-field>
                            <div *ngIf="cell._r===0 && cell._c===0">{{cell.data }}</div>
                            <div *ngIf="cell._r===0 && cell._c!==0">{{cell.data | translate:'role'}}</div>
                            <div *ngIf="cell._c===0 && cell._r!==0">{{cell.data | translate:'priority'}}</div>
            </ng-template>
    </nv-small-grid-table>
</div>

with self-defined

<div fxLayout="column" fxLayoutAlign="center center" [style.width.px]="1000" [style.height.px]="1000">
    <nv-small-grid-table [dtb]="dtb" width="700" ratio="2:1" [ui_func]="set_ui" [dflt]="false">
    <ng-template let-cell #smallGridTableSlot>
                <div *ngIf="cell._c!==0 && cell._r!==0">{{cell.data *3 }}</div>
                <div *ngIf="cell._r===0 && cell._c===0">{{cell.data }}</div>
                <div *ngIf="cell._r===0 && cell._c!==0">{{cell.data | translate:'role'}}</div>
                <div *ngIf="cell._c===0 && cell._r!==0">{{cell.data | translate:'priority'}}</div>
            </ng-template>
    </nv-small-grid-table>
    <nv-small-grid-table [dtb]="dtb" width="700" ratio="2:1">
            <ng-template let-cell #smallGridTableSlot>
                    <mat-form-field *ngIf="cell._r>0 && cell._c>0" style="width:50%;">
                            <input  matInput type="number" min="0" [(ngModel)]="cell.data"/>
            </mat-form-field>
                    <div *ngIf="cell._r===0 && cell._c===0">{{cell.data }}</div>
                    <div *ngIf="cell._r===0 && cell._c!==0">{{cell.data | translate:'role'}}</div>
                    div *ngIf="cell._c===0 && cell._r!==0">{{cell.data | translate:'priority'}}</div>
            </ng-template>
    </nv-small-grid-table>
</div>

GITHUB

nv-angular-small-grid-table

PACKAGE DEPENDANY

CODE REFERENCE

(thanks to)