guachos-datatable
v1.4.7
Published
`Guachos Datatable` es una librería para angular para manejar datos en una tabla genérica, capaz de manejar plantillas y acciones customizadas.
Downloads
36
Keywords
Readme
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[];
}