@jcbautistam/custom-table
Version:
Librería de tabla reutilizable con acciones, filtros, exportación y más.
207 lines (176 loc) • 13.1 kB
Markdown
**Versión:** 0.0.6
**Autor:** Julio Cesar Bautista M
**Licencia:** MIT
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.
```bash
npm i @jcbautistam/custom-table
```
```json
"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.
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.
En el AppModule o en el módulo donde uses la tabla, importa:
```typescript
import { CustomTableModule } from 'custom-table';
@NgModule({
declarations: [ ... ],
imports: [
CustomTableModule,
// otros módulos necesarios
]
})
export class AppModule { }
```
- 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
```html
<app-layout titulo="Pedidos">
<custom-table
[]="'Pedidos'"
[]="columnConfigs"
[]="tableActions"
[]="ParametrosPedidos"
[]="'Pedidoss'"
[]="true"
[]="apiServicioClienteService.getPedidosAsync.bind(apiServicioClienteService)"
[]="tableConfigs"
[]="true"
[]="false"
[]="'CatalogoPedidos'"
></custom-table>
</app-layout>
```
```typescript
columnConfigs: { [key: string]: ColumnConfig } = {
idPedido: {
displayName: 'Id',
type: 'default',
showFilter: true,
visible: true,
},
remolque: {
displayName: 'Remolque',
type: 'default',
showFilter: true,
visible: true,
}
};
```
```typescript
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
tableConfigs: TableConfig = {
pageSizeOptions: [5, 15, 30],
headerColumFontSize: 5,
createCallback: () => this.onCreateClick(),
};
```
```typescript
ParametrosPedidos = new ParametrosGenerales({
ordenarPor: 'IdPedido',
descending: true,
});
```
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.
| 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<any> | 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%' |
| Evento | Tipo | Descripción |
|--------------------------|----------------------------------|-----------------------------------------------------------------------------|
| onSelectAll | EventEmitter<void> | Se emite al marcar/desmarcar el checkbox de "Seleccionar todos". |
| cambiarEstatusEvent | EventEmitter<any> | Se emite cuando se cambia el estatus de un registro (ej. activo/inactivo). |
| createEvent | EventEmitter<void> | Se emite cuando se da clic en el botón [Crear]. |
| onCreate | EventEmitter<void> | Alias de `createEvent`. |
| refreshEvent | EventEmitter<void> | Se emite al recargar los datos de la tabla manualmente. |
| AddEvent | EventEmitter<void> | Se emite al dar clic en el botón adicional de agregar. |
| enviarItemEvent | EventEmitter<any> | 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<any> | Notifica cambios en los datos o configuración. |
| filtroFechaReportEvent | EventEmitter<Date \| undefined> | Se emite al aplicar filtro de fecha individual (modo reporte). |
## Author
- [@Juliocbm](https://github.com/Juliocbm)