guachos-datatable

Guachos Datatable

Guachos Datatable es una librería para angular para manejar datos en una tabla genérica, capaz de manejar plantillas y acciones customizadas.

Instalación

Con npm

npm i @guachos/datatable --save

Con yarn

yarn add @guachos/datatable

Con pnpm

pnpm add @guachos/datatable

Importar las dependencias en tu proyecto.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatIconModule } from "@angular/material/icon";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { TranslateLoader, TranslateModule } from "@ngx-translate/core";
import { HttpClient, HttpClientModule } from "@angular/common/http";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";

import { GuajiritosDatatable } from "@guajiritos/data-table";

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

BrowserModule,
  HttpClientModule,
  BrowserAnimationsModule,
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient]
    }
  }),
  GuachosDatatableModule,
  MatIconModule
],
providers: [],
  bootstrap
:
[AppComponent]
})

Uso de la librería

<guachos-data-table
    (add)="onAdd()"
    (delete)="onDelete($event)"
    (detail)="onEdit($event)"
    (edit)="onEdit($event)"
    *ngIf="dataTableOption"
    [options]="dataTableOption"
    [refresh]="refreshData"
></guachos-data-table>

import { AfterViewInit, ChangeDetectorRef, Component } from '@angular/core';

import {
  ButtonMode,
  ColumnFilterOptionsType,
  ColumnOptionsType,
  DataTableOptions,
  DisplayOptionItemType,
  MaterialColor
} from "@guajiritos/data-table";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  constructor(
    private _cdRef: ChangeDetectorRef
  ) {
  }

  private url: string = 'https://www.guajiritos.cu/'

  public dataTableOption: DataTableOptions;

  public onAdd(): void {
  ...
  }

  public onDelete(element: any): void {
  ...
  }

  public onEdit(element: any): void {
  ...
  }

  ngAfterViewInit(): void {
    this.dataTableOption = {
      ...
    };

    this._cdRef.detectChanges();
  }
}

Interfaz DataTableOptions

Es la interfaz que controla todas las acciones y propiedades de la librería.

interface DataTableOptions {
  bodyRequest?: ApiFormData;
  title?: string;
  id?: string;
  order?: string;
  service: any;
  listMethod: string;
  showFooter?: boolean;
  permissions?: CrudOptions;
  selection: SelectionOptions;
  customOptions?: CustomOptions;
  pageSizeOptions: number[];
  customActions?: CustomAction[];
  basicActions?: BasicActions;
  staticFilters?: StaticFilter[];
  staticToggleOptions?: ToggleOptions[];
  displayedColumns: ColumnOptions[];
  displayedColumnsFilters?: ColumnFilterOptions[];
}