Ng-bnuby-datatable NPM

NgBnubyDatatable Library

Installation

npm install ng-bnuby-datatable --save

Usage

step 1: Import DatatableModule into your app.module.ts

  @NgModule({
    imports: [
      DatatableModule
    ]
  })

step 2: NgBnubyDatatable provide ng-bnuby-datatable selector to put your datatable.

<body>
  <ng-bnuby-datatable></ng-bnuby-datatable>
</body>

Api

Dom

example.component.html

<ng-bnuby-datatable
  [headers]="headers"
  [isLoading]="isLoading"
  [itemSet]="itemSet"
></ng-bnuby-datatable>

typescript

example.component.ts

Datatable main config

table: Datatable = {
  style: {
    'background-color': 'white'
  }
};

Define Header

headers: DatatableHeaders = [
  {
    title: 'Name',
    key: 'h1'
  },
  {
    title: 'Test2',
    key: 'h2'
  },
  {
    title: 'Tools',
    key: 'tools'
  }
];

Define thead style

theadStyle: { [klass: string]: any } = {
  // 'border-top': '1px solid gray',
  'border-bottom': '1px solid gray'
};

Define th style

thStyle: { [klass: string]: any } = {
  padding: '10px 10px'
};

Define loading text

loadingText: string = 'Data Loading';

Define no Data text

noDataText: string = 'No Data';

Define Table Item

itemSet: DatatableRows =  [
    {
      _item: {},
      h1: {
        title: 'Hello World'
      },
      h2: {
        title: 'Temporary 2'
      },
      tools: {
        buttons: [
          {
            html: '<i class=\'fa fa-edit\'/i>',
            callback: item => {
              console.log(item);
            }
          },
          {
            html: '<i class=\'fa fa-trash\'/i>',
            callback: item => {
              console.log(item);
            }
          },
          {
            html: '<i class=\'fa fa-info\'/i>',
            callback: item => {
              console.log(item);
            }
          }
        ]
      }
    }
  ]

@angular/animations @angular/common @angular/compiler @angular/core @angular/forms @angular/platform-browser @angular/platform-browser-dynamic @angular/router bootstrap core-js rxjs tslib zone.js

@everything-registry/sub-chunk-2271 @infinitebrahmanuniverse/nolb-ng-b @zalastax/nolb-ng-b

0.0.1

5 years ago

0.0.0

5 years ago