NgTablePg

Un componente de tabla potente y flexible para aplicaciones Angular con funciones integradas de ordenamiento, filtrado, paginación y arrastrar y soltar.

Autor

• Nombre: Alejandro Pérez Granado
• Email: alejo.mde
• GitHub: @alejandr0pg

Características

• ✨ Diseño responsive con Tailwind CSS
• 🔍 Funcionalidad de búsqueda
• 🔄 Ordenamiento de columnas
• 📊 Filtros personalizados
• 📱 Paginación
• 📎 Reordenamiento de filas con arrastrar y soltar
• 📥 Exportación a CSV y Excel
• 🎨 Estilos personalizables
• 🌐 Soporte para internacionalización
• 💫 Estado de carga con skeleton loader
• 🛠️ Botones de acción personalizados
• 📋 Plantillas de columnas personalizadas

Instalación

1npm install ng-table-pg

Dependencias

Instala las dependencias requeridas:

1npm install @angular/cdk file-saver xlsx @ngx-translate/core

Configuración de Desarrollo

Servidor de desarrollo

Inicia el servidor de desarrollo:

1ng serve

Navega a http://localhost:4200/. La aplicación se recargará automáticamente si cambias alguno de los archivos fuente.

Compilación de la Librería

Compila la librería:

1ng build table-lib

Los archivos compilados se almacenarán en el directorio dist/.

Ejecutar Pruebas

Ejecuta las pruebas unitarias vía Karma:

1ng test table-lib

Guía de Uso

Implementación Básica

1. Importa el componente en tu módulo:

1import { TableComponent } from 'ng-table-pg';
2
3@NgModule({
4  imports: [
5    TableComponent
6  ]
7})

2. Úsalo en tu componente:

1import { Component } from '@angular/core';
2
3@Component({
4  template: `
5    <ng-table-pg
6      [data]="items"
7      [columns]="columns"
8      [loading]="loading"
9    ></ng-table-pg>
10  `
11})
12export class YourComponent {
13  items = [...];
14  columns = [
15    { key: 'id', label: 'ID' },
16    { key: 'name', label: 'Nombre' },
17    { key: 'email', label: 'Correo' }
18  ];
19}

Opciones de Configuración

Configuración de Columnas

1interface ITableColumns {
2  key: string; // Clave de la propiedad del objeto de datos
3  label: string; // Etiqueta del encabezado de la columna
4  width?: string | number; // Ancho de la columna
5  type?: "date" | "date-time" | "currency" | "boolean" | "status" | "state";
6  transform?: (value: any, item: any) => any; // Transformador de valor personalizado
7}

Botones de Acción

1interface ITableActions {
2  label: string; // Etiqueta del botón
3  handler: (item: any) => void; // Manejador del clic
4  show?: (item: any) => boolean; // Visualización condicional
5}

Internacionalización

Estructura requerida para las traducciones:

1{
2  "TABLE": {
3    "SEARCH": "Buscar...",
4    "FILTERS": "Filtros",
5    "SHOWING": "Mostrando",
6    "OF": "de",
7    "RESULTS": "resultados",
8    "EXPORT_CSV": "Exportar CSV",
9    "EXPORT_EXCEL": "Exportar Excel",
10    "ACTIONS": "Acciones"
11  }
12}

Contribuir

1. Haz un fork del repositorio
2. Crea tu rama de características (git checkout -b feature/CaracteristicaIncreible)
3. Haz commit de tus cambios (git commit -m 'Añadir alguna CaracteristicaIncreible')
4. Haz push a la rama (git push origin feature/CaracteristicaIncreible)
5. Abre un Pull Request

Licencia

Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

Soporte

Para soporte, por favor abre un issue en el repositorio de GitHub o contacta directamente al autor.

Recursos Adicionales

• Documentación de Angular
• Documentación de Angular CLI
• Documentación de Tailwind CSS