NextiLibDatatable - Libreria datatable

Modulo de Angular 12 creado desde cero utilizando Bootstrap 5 CSS.

Esta libreria se realizó con la funcionalidad de poder Mostrar la data.

Tabla de contenidos

• Dependencias
• Instalacion
• Manual de Instalacion
• Variables Necesarias
• Navegadores compatibles

Dependencias

Ademas de Angular y Bootstrap 5 CSS. El modulo depende de las siguientes librerias:

| nexti-lib-datatable | Angular | Bootstrap CSS | nexti-lib-modal | angular2-txt | jspdf | jspdf-autotable | file-saver | xlsx | | ------------------- | ------- | ------------- | --------------- | ------------ | ----- | --------------- | ---------- | ------ | | 0.0.105 | 12.x.x | 5.x.x | 0.0.13 | 0.1.1 | 2.3.1 | 3.5.15 | 2.0.5 | 0.17.0 |

Instalacion

Recomendamos encarecidamente utilizar Angular CLI para configurar un nuevo proyecto. Si tiene un proyecto CLI de Angular ≥ 12.

Simplemente ejecute lo siguiente:

npm install [email protected]

Manual de Instalacion

• Agregar las dependencias al proyecto Bootstrap, NextiLibModal, Angular2Txt, Jspdf, JspdfAutotable, FileSaver, xlsx.

• Importar en módulo:

  import { NextiLibDatatableModule } from "nexti-lib-datatable";
  @NgModule({
    imports: [NextiLibDatatableModule],
  })
  export class AppModule {}

• Implementar libreria en .html

  <nexti-lib-datatable
    #datatable
    [title]=""
    [titleXs]=""
    [list]=""
    [header]=""
    [recursos]=""
    [titleEmpty]=""
    (onDelete)=""
    (onUpdate)=""
    (onShow)=""
    (onShowEvent)=""
    [selectFilter]=""
    (onfilter)=""
    [breadcrumbs]=""
    [infoAdicional]=""
    [linkBack]=""
    [reportConfig]=""
    [opOcultarBuscar]=""
    [opOcultarFooter]=""
    [footerConfig]=""
    [actionState]=""
    (onActive)=""
    [excelData]=""
    [multiTable]=""
    [sections]=""
  >
  </nexti-lib-datatable>

Variables Necesarias

• title (string): titulo de datatable.

• titleXs (boolean): tamaño xs del titulo del datatable.

• list (array): array con la data a mostrar.

• header (array): array con la data a mostrar.

• recursos (objeto): objeto con los recursos que dan acceso a cierta data y acciones. Este objeto se debe obtener desde un servicio que este asociado con el rol del usuario

      {
        delete: false,
        create: false,
        update: false,
        active: false
      }

  • delete (boolean): si es true mostrara un icono que emite un evento.
  • create (boolean): si es true mostrara un boton que emite un evento.
  • update (boolean): si es true mostrara un icono que emite un evento.
  • active (boolean): si es true mostrara un boton que emite un evento.

• titleEmpty (string): titulo de datatatable vacio.

• selectFilter (boolean): si es true muestra la seccion de filtro.

• breadcrumbs (array): array de objetos que se ubica en la parte superior del titulo:

  [{ title: "", link: "" }];

  • title (string): titlulo de breadcrumb
  • link (string): url de breadcrumb

• infoAdicional (array): array de objetos que se ubica en la parte inferior del titulo:

  [
    {
      title: "",
      subtitle: "",
    },
  ];

  • title (string): titlulo de infoAdicional.
  • subtitle (string): url de infoAdicional.

• linkBack (boolean): si es true mostrara la flecha de retroceder.

• reportConfig (objeto): objeto con la configuracion del reporte.

• opOcultarBuscar (boolean): si es true no se mostrará el buscador del datatable.

• opOcultarFooter (boolean): si es true no se mostrará el pie del datatable.

• footerConfig (objecto): objeto con la configuracion de la fila de totales del datatable.

• actionState (boolean): boolean que al cambiar entre true y false muestra diferentes botones de acciones.

• excelData (objeto): data de excel para ser exportadp

• multiTable (boolean): si es true se puede usar mas de una lista y mas de una cabecera.

• sections (objecto): titulos de las secciones por cada tabla a mostrar con el multitable.

• onDelete (event emit): evento emitido al clickear el boton de eliminar.

• onUpdate (event emit): evento emitido al clickear el boton de actualizar.

• onShow (event emit): evento emitido al clickear el boton de ver detalle.

• onShowEvent (event emit): evento emitido al clickear el boton de detalle.

• onfilter (event emit): evento emitido al clickear el boton de filtro.

• onActive (event emit): evento emitido al clickear el boton de activar.

Navegadores compatibles

Admitimos los mismos navegadores y versiones compatibles con Bootstrap 5 y Angular, lo que sea más restrictivo. Consulte Angular Compatibilidad con el navegador y Bootstrap Compatibilidad con el navegador para obtener más detalles.