📊 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

| Propiedad | Tipo | Descripción | Valor por defecto | |---------------------------|--------------------------------------------------------------------|-----------------------------------------------------------------------------------------------|------------------------| | data | any[] | Datos a mostrar en la tabla. | [] | | dataSelect | any[][] | Datos para campos de tipo select en la tabla. | [] | | columnConfigs | any | Configuración de columnas (tipo, filtros, visibilidad). | - | | withHeader | boolean | Mostrar encabezado de la tabla. | true | | tableConfigs | any | Configuración visual como altura de filas, etc. | {} | | nombreMenu | string | Nombre del menú o módulo (usado para validaciones de permisos si aplica). | '' | | nombreTabla | string | Título que se muestra sobre la tabla. | '' | | crearRoute | string | Ruta a la que redirige el botón [Crear]. | '' | | showCreateButton | boolean | Muestra botón de crear estándar. | false | | showCreateButtonModal | boolean | Muestra botón de crear con modal. | false | | showExportarButton | boolean | Muestra botón para exportar la tabla a Excel. | true | | excelFileName | string | Nombre con el que se guardará el archivo Excel. | '' | | showCreateButtonDetGral | boolean | Muestra botón crear para catálogos generales. | false | | showRefreshButton | boolean | Muestra botón de refrescar datos. | true | | showAddButton | boolean | Muestra botón adicional de agregar. | false | | showConfColumnsButton | boolean | Muestra botón para configurar visibilidad de columnas. | true | | showFilterInactivos | boolean | Muestra switch para incluir registros inactivos. | true | | actions | TableAction[] | Arreglo con botones de acción a renderizar por fila. | [] | | resaltarSeleccion | boolean | Estiliza la fila seleccionada. | false | | mostrarFiltroGeneralFechas| boolean | Muestra filtro general por rango de fechas. | false | | showSelectAll | boolean | Habilita checkbox para seleccionar todas las filas. | false | | columnsReqMin | number | Número mínimo de columnas visibles. | 3 | | isReport | boolean | Modo reporte (puede cambiar estilo o filtros). | false | | fetchDataFunction | (params: HttpParams, extraParam?: any) => Observable | Función de carga de datos paginada. | - | | parametros | ParametrosGenerales | Objeto que contiene paginación, filtros, ordenamiento, etc. | new ParametrosGenerales() | | extraParams | { [key: string]: any } | Parámetros adicionales dinámicos para filtros, usuarios, contexto, etc. | {} | | centerTable | boolean | Centrar horizontalmente la tabla. | true | | tableHeight | string | Altura del contenedor de la tabla. | 'auto' | | showGranTotal | boolean | Mostrar fila con gran total. | false | | widthColumn | string | Ancho por defecto para columnas. | '20%' |

Outputs

| Evento | Tipo | Descripción | |--------------------------|----------------------------------|-----------------------------------------------------------------------------| | onSelectAll | EventEmitter | Se emite al marcar/desmarcar el checkbox de "Seleccionar todos". | | cambiarEstatusEvent | EventEmitter | Se emite cuando se cambia el estatus de un registro (ej. activo/inactivo). | | createEvent | EventEmitter | Se emite cuando se da clic en el botón [Crear]. | | onCreate | EventEmitter | Alias de createEvent. | | refreshEvent | EventEmitter | Se emite al recargar los datos de la tabla manualmente. | | AddEvent | EventEmitter | Se emite al dar clic en el botón adicional de agregar. | | enviarItemEvent | EventEmitter | Se emite al seleccionar un ítem (para detalles o acciones). | | filtroFechaGeneralEvent | EventEmitter<(Date | undefined)[]> | Se emite cuando se aplica el filtro de rango de fechas general. | | changeData | EventEmitter | Notifica cambios en los datos o configuración. | | filtroFechaReportEvent | EventEmitter<Date | undefined> | Se emite al aplicar filtro de fecha individual (modo reporte). |

Author

• @Juliocbm