@musicbattles/grid v1.0.0

Grid

Grid genérico

Instalación

npm i @musicbattles/grid

Uso

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { GridModule } from '@musicbattles/grid';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule, GridModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Implementación HTML

Implementación TS

import { Component, OnInit } from '@angular/core';
import { GridHeader, PaginationGrid, EventGrid } from '@musicbattles/grid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent extends PaginationGrid implements OnInit {

  customerHeader: GridHeader[] = [
    {name: 'Nombre', key: 'name'},
    {name: 'Fecha inicio', key: 'start_date'},
    {name: 'Estatus', key: 'status'},
  ]
  
  dataGrid = [
    {id: 1, name: 'data 1', start_date'05/01/2021', status: 'Active'},
    {id: 2, name: 'data 2', start_date'15/03/2021', status: 'Active'},
    {id: 3, name: 'data 3', start_date'08/04/2021', status: 'Pending'},
  ]
  
  otherColumns: Column[] = [
    {nameColumn: 'Ver reporte', nameRef:'view_report', icon: 'poll', event:'report', type:'icon'}
  ]
  
  newChangespages: numbe[] = [5,10,15];
  
  constructor() {
    super();
  }

  ngOnInit() {
  }
  
  getDataGrid(predicate: string) {
   ...call services....
  }
  
  customEvent(e: EventGrid<T>){
    if(e.event === 'edit'){
        ....
    } else if(e.event === 'delete'){
        ....
    } else if(e.event === 'report'){
     ...
    }
  
  }
}

El paginador es altamente personalizado a cada necesidad.

Inputs

Outputs

License

MIT

Autor

Daniel Garcia