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

Table of contents

1. Updates
2. Getting Started
3. Installation instructions
4. Usage
5. 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";

Contribution

Are very welcome, thanks in advance!