Tni-datagrid NPM

An datagrid external library to be used for various projects which needs datagrid data display.

Updates
Getting Started
Installation instructions
Usage
Contributing

Updates

1.0.17 - Work on DialogModal of deletion and configurin readme.md with some additional info;

Getting started

tni-datagrid contains a datagrid component library which works with pagination at the database level. It requires some extra packages, so they have to be installed as well.

Installation instructions

Install tni-library from npm

npm install tni-datagrid --save

You will need bootstrap styles (Bootstrap 3)

<!-- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

Or Bootstrap 4

<!--- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

You will also need FontAwesome

<!--- index.html -->
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>

Usage

Import TniDatagridModule into your app.module project

import { TniDatagridModule } from 'tni-datagrid';

Than make an reference to the module

@NgModule(
    ...
    imports: [TniDatagridModule]
);

Into component html make reference to grid

  <tni-datagrid [Info]="infoDatagrid" [Columns]="columns" [DataSource]="storages" 
    [ShowDelete]=true
    (RefreshAction)="refresh()" (RecordAction)="recordAction($event)">
  </tni-datagrid>

Now, into your component ts make some imports from the module:

import { DataColumn, DataRow, eRecordAction, Info } from 'tni-datagrid';

Define info of the grid

  private infoDatagrid: Info;

Define columns configuration

columns: Array<DataColumn> = [
    {
      Key: "Title", Title: "Denumire",
      Link:
        {
          Action: eRecordAction.Detail
        }
    },
    { Key: "Path", Title: "Cale", Link: { Action: eRecordAction.Detail } },
    { Key: "Quota", Title: "Capacitate", Link: { Action: eRecordAction.Detail } },
    { Key: "Free", Title: "Liber", Link: { Action: eRecordAction.Detail } },
    { Key: "StrDate", Title: "Data", Link: { Action: eRecordAction.Detail } },
    { Key: "StrActive", Title: "Activ", Link: { Action: eRecordAction.Detail } },
  ];

on ngOnInit

ngOnInit() {
    this.infoDatagrid = new Info();
    this.infoDatagrid.Title = "Medii stocare";
    this.infoDatagrid.Friendly = "Title";
    //Title of the grid, will be shown at least in modal dialog of deletion
    //Friendly if specified indicate the column which will be used to display data on modal when deleting;
  }

Handle the record action triggered by grid

recordAction(dataRow: DataRow) {
    switch (dataRow.Link.Action) {
      case eRecordAction.Detail:
        //navigate to an detail component
        break;
      case eRecordAction.Delete:
        //call service to destroy the record
        break;
    }
  }

Translation can be proposed

    this.translationGrid = new Translation();
    this.translationGrid.Cancel = "Renunta";
    this.translationGrid.Commands = "Comenzi";
    this.translationGrid.Delete = "Sterge";
    this.translationGrid.DeleteConfirmationMessage = "Confirmati stergerea inregistrarii?";
    this.translationGrid.DisplayPage = "afiseaza pagina";
    this.translationGrid.FilterTooltip = "Arata filtrele pe datele curente";
    this.translationGrid.Records = "inregistrari";
    this.translationGrid.TotalRecords = "Total inregistrari";