@jcbautistam/custom-table v0.0.2

📊 custom-table

Versión: 0.0.6
Autor: Julio Cesar Bautista M
Licencia: MIT

Descripción general

Librería Angular reutilizable que proporciona una tabla personalizable con acciones, filtros por columna, exportación a Excel y gestión de visibilidad de columnas.

📥 Instalación

1. Descargar e instalar el paquete

npm i @jcbautistam/custom-table

📚 Requisitos

✔️En tu archivo angular.json, dentro del proyecto consumidor, agrega los siguientes estilos:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
  "src/styles.css"
]

📌 Esto es obligatorio para que los componentes visuales como mat-slide-toggle, modales, botones, íconos y tooltips se rendericen correctamente.

📦 Dependencias internas

Esta librería incluye internamente dependencias como:

• ngx-bootstrap
• ngx-spinner
• xlsx
• bootstrap
• date-fns y date-fns-tz

Por lo tanto, no necesitas instalarlas manualmente en el proyecto consumidor, salvo que planees usarlas por tu cuenta o requieras una versión diferente.

🧩 Importación del módulo

En el AppModule o en el módulo donde uses la tabla, importa:

import { CustomTableModule } from 'custom-table';

@NgModule({
  declarations: [ ... ],
  imports: [
    CustomTableModule,
    // otros módulos necesarios
  ]
})
export class AppModule { }

✅ Compatibilidad

• Paquete Versión mínima
• Angular >=16.0.0
• Angular Material >=16.0.0
• ngx-bootstrap >=10.2.0
• ngx-spinner >=17.0.0
• bootstrap >=5.3.0
• date-fns-tz >=2.0.0
• xlsx >=0.18.0

🔵 Uso basico

📜 Html Implementacion de custom-table

<app-layout titulo="Pedidos">
  <custom-table
    [nombreMenu]="'Pedidos'"
    [columnConfigs]="columnConfigs"
    [actions]="tableActions"
    [parametros]="ParametrosPedidos"
    [nombreTabla]="'Pedidoss'"
    [mostrarFiltroGeneralFechas]="true"
    [fetchDataFunction]="apiServicioClienteService.getPedidosAsync.bind(apiServicioClienteService)"    
    [tableConfigs]="tableConfigs"
    [showCreateButtonModal]="true"
    [showExportarButton]="false"
    [excelFileName]="'CatalogoPedidos'"
  ></custom-table>
</app-layout>

⚙️ Typescript Configuracion de columnas

  columnConfigs: { [key: string]: ColumnConfig } = {
    idPedido: {
      displayName: 'Id',
      type: 'default',
      showFilter: true,
      visible: true,
    },
    remolque: {
      displayName: 'Remolque',
      type: 'default',
      showFilter: true,
      visible: true,
    }
  };

⚙️ Typescript Configuracion de botones de acción

  tableActions: TableAction[] = [
    {
      name: 'ver',
      title: 'Ver',
      icon: 'visibility',
      tooltip: 'Ver',
      callback: (item) => this.pedidoById(item, 0),
      showCondition: (row) => this.apiServicioClienteService.tienePermiso('EDITAR', 'Clientes') && row.activo,
    },
    {
      name: 'edit',
      title: 'Editar',
      icon: 'mode_edit',
      tooltip: 'Editar',
      callback: (item) => this.pedidoById(item, 1),
      showCondition: (row) => this.apiServicioClienteService.tienePermiso('EDITAR', 'Clientes') && row.activo,
    }
  ];

⚙️ Typescript Configuracion general de tabla

  tableConfigs: TableConfig = {
    pageSizeOptions: [5, 15, 30],
    headerColumFontSize: 5,
    createCallback: () => this.onCreateClick(),
  };

⚙️ Typescript Configuracion ordenamiento

  ParametrosPedidos = new ParametrosGenerales({
    ordenarPor: 'IdPedido',
    descending: true,
  });

🧠 Notas importantes

La librería no incluye estilos por sí sola. Debes agregarlos manualmente como se indica arriba.

Si alguna dependencia te genera conflicto, asegúrate de alinear las versiones según las peerDependencies.

Puedes extender o personalizar los estilos desde styles.css de tu proyecto principal.

Inputs

Outputs

Author

• @Juliocbm