snk-data-grid

snk-data-grid es un componente de grid (tabla de datos) potente, reactivo y altamente personalizable para aplicaciones Angular. Ofrece funcionalidades avanzadas como filtrado tipo checklist (incluso en columnas agrupadas), ordenamiento, agrupación por arrastrar y soltar (Drag & Drop), edición en línea, exportación de datos (Excel, CSV, JSON), subtotales y totales generales automáticos, y plantillas personalizadas para celdas.

Características Principales

• Filtro Checklist (Tipo Excel): Filtrado interactivo mediante selección múltiple de valores únicos. Si no hay selección, muestra todos los registros; al seleccionar uno o más, filtra por los valores elegidos. Cuenta con buscador interno integrado.
• Filtro de Texto por Columna: Permite buscar y filtrar registros escribiendo texto en un campo de entrada posicionado debajo de las cabeceras. Se puede activar de forma global o individual por columna.
• Agrupación Dinámica: Agrupa filas por múltiples columnas arrastrando cabeceras a la zona superior de agrupación o configurándolas por defecto.
• Ordenación (Sorting): Ordenamiento ascendente y descendente por columnas configurables.
• Edición en Línea: Edición directa en celda con doble clic, compatible con inputs de texto, números y fechas, y emisión de eventos de actualización.
• Reordenamiento de Filas: Arrastrar y soltar filas para cambiar su orden mediante Drag & Drop.
• Agregados y Totales: Cálculo automático de sumas y conteos para subtotales de grupo y total general.
• Exportación: Descarga de datos en formato Excel (conservando la estructura del árbol de grupos), CSV y JSON.
• Plantillas Personalizables: Renderizado de contenido a medida usando directivas Angular mediante ng-template.

Instalación e Importación

Asegúrate de importar el componente y la directiva de plantilla en tu componente standalone:

import { Component } from '@angular/core';
import { SnkDataGrid, SnkDataGridTemplateDirective, SnkGridColumnDef, RowReorderEvent } from 'snk-data-grid';

@Component({
  selector: 'app-mi-tabla',
  standalone: true,
  imports: [SnkDataGrid, SnkDataGridTemplateDirective],
  templateUrl: './mi-tabla.component.html'
})
export class MiTablaComponent {
  // Lógica del componente...
}

Ejemplo Completo de Implementación

1. Definición en TypeScript (component.ts)

Define la configuración de las columnas y la señal con los datos.

import { Component, signal } from '@angular/core';
import { SnkGridColumnDef, RowReorderEvent } from 'snk-data-grid';

@Component({
  selector: 'app-directorio-empleados',
  templateUrl: './directorio-empleados.component.html'
})
export class DirectorioEmpleadosComponent {

  // 1. Configuración de Columnas
  columnas = signal<SnkGridColumnDef[]>([
    { field: 'id', header: 'ID', type: 'number', width: '80px', sortable: true },
    { field: 'nombre', header: 'Nombre Completo', type: 'string', filterable: true, sortable: true, editable: true, showTextFilter: true },
    { field: 'departamento', header: 'Departamento', type: 'string', filterable: true, groupable: true, defaultGroupOrder: 1 },
    { field: 'cargo', header: 'Cargo', type: 'string', filterable: true },
    { field: 'salario', header: 'Salario', type: 'number', aggregate: 'sum', width: '120px' },
    { field: 'estado', header: 'Estado', type: 'string', templateName: 'estadoTpl', width: '120px', filterable: true }
  ]);

  // 2. Datos
  empleados = signal<any[]>([
    { id: 1, nombre: 'Ana García', departamento: 'Tecnología', cargo: 'Desarrolladora Frontend', salario: 4500, estado: 'Activo' },
    { id: 2, nombre: 'Carlos López', departamento: 'Tecnología', cargo: 'Desarrollador Backend', salario: 5200, estado: 'Activo' },
    { id: 3, nombre: 'María Rodríguez', departamento: 'Ventas', cargo: 'Ejecutiva de Cuentas', salario: 3100, estado: 'Inactivo' },
    { id: 4, nombre: 'Juan Pérez', departamento: 'Ventas', cargo: 'Director Comercial', salario: 7500, estado: 'Activo' },
    { id: 5, nombre: 'Laura Gómez', departamento: 'Recursos Humanos', cargo: 'Analista de Selección', salario: 2800, estado: 'Activo' }
  ]);

  // 3. Manejadores de Eventos
  onCeldaEditada(evento: { item: any; field: string; value: any }) {
    console.log('Valor actualizado:', evento);
    this.empleados.update(emps => emps.map(emp =>
      emp.id === evento.item.id ? { ...emp, [evento.field]: evento.value } : emp
    ));
  }

  onFilaReordenada(evento: RowReorderEvent) {
    console.log('Fila movida:', evento.draggedItem);
    console.log('Soltada sobre:', evento.dropTargetItem);
  }

  editarEmpleado(empleado: any) {
    alert(`Editando a: ${empleado.nombre}`);
  }
}

2. Plantilla HTML (component.html)

Invoca al componente snk-data-grid y define las plantillas personalizadas.

<div style="padding: 20px; max-width: 1200px; margin: 0 auto;">
  <h2>Directorio de Empleados</h2>

  <snk-data-grid
    [columns]="columnas()"
    [data]="empleados()"
    [actionTemplate]="accionesTabla"
    [actionColumnWidth]="'150px'"
    [showColumnButton]="true"
    [showJsonButton]="true"
    [showExcelButton]="true"
    [showCsvButton]="true"
    [allowRowReordering]="true"
    [defaultPageSize]="5"
    (cellEdit)="onCeldaEditada($event)"
    (rowReorder)="onFilaReordenada($event)">

    <!-- Plantilla personalizada para la celda "Estado" -->
    <ng-template [snkDataGridTemplate]="'estadoTpl'" let-empleado>
      <span 
        style="padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; display: inline-block; text-align: center;"
        [style.background-color]="empleado.estado === 'Activo' ? '#d1e7dd' : '#f8d7da'"
        [style.color]="empleado.estado === 'Activo' ? '#0f5132' : '#842029'">
        {{ empleado.estado | uppercase }}
      </span>
    </ng-template>

    <!-- Plantilla para la columna de acciones CRUD -->
    <ng-template #accionesTabla let-empleado>
      <div style="display: flex; gap: 8px; justify-content: center;">
        <button 
          (click)="editarEmpleado(empleado)"
          style="padding: 4px 8px; background: #eff6ff; color: #0d6efd; border: 1px solid #0d6efd; border-radius: 4px; cursor: pointer; font-size: 12px;">
          Editar
        </button>
      </div>
    </ng-template>

  </snk-data-grid>
</div>

Referencia de API

Inputs (Propiedades de Entrada)

| Propiedad | Tipo | Por Defecto | Descripción | | :--- | :--- | :--- | :--- | | [columns] | SnkGridColumnDef[] | (Requerido) | Configuración de las columnas de la tabla. | | [data] | any[] | (Requerido) | Arreglo de datos a mostrar. | | [actionTemplate] | TemplateRef<any> | undefined | Plantilla para renderizar acciones de fila. | | [actionColumnWidth] | string | '120px' | Ancho de la columna de acciones. | | [defaultPageSize] | number | 10 | Tamaño de página por defecto. | | [pageSizeOptions] | number[] | [5, 10, 20] | Opciones de tamaño de página disponibles. | | [showColumnButton] | boolean | false | Muestra un botón para mostrar/ocultar columnas. | | [showJsonButton] | boolean | false | Habilita botón para exportar a JSON. | | [showCsvButton] | boolean | false | Habilita botón para exportar a CSV. | | [showExcelButton] | boolean | false | Habilita botón para exportar a Excel. | | [allowRowReordering] | boolean | false | Habilita el reordenamiento de filas mediante Drag & Drop. | | [showTextFilters] | boolean | false | Habilita la fila de filtros de texto para todas las columnas de forma global. | | [showToolbar] | boolean | true | Determina si se muestra o se oculta la barra de herramientas superior (toolbar). |

Outputs (Eventos de Salida)

| Evento | Tipo | Descripción | | :--- | :--- | :--- | | (cellEdit) | { item: any; field: string; value: any } | Se emite cuando se edita y confirma un nuevo valor en una celda. | | (rowReorder) | RowReorderEvent | Se emite cuando una fila se arrastra y se suelta sobre otra fila para reordenar. |

Configuración de Columnas (SnkGridColumnDef)

La interfaz SnkGridColumnDef acepta las siguientes propiedades para configurar cada columna de manera individual:

• field: Nombre de la propiedad del objeto de datos.
• header: Título a mostrar en la cabecera.
• type: Tipo de datos ('string' \| 'number' \| 'date' \| 'boolean').
• editable: Habilita doble clic para editar la celda.
• filterable: Habilita el filtro de selección múltiple (checklist) con buscador integrado.
• showTextFilter: Habilita el filtro de texto para esta columna en específico.
• sortable: Habilita ordenar la columna.
• groupable: Permite agrupar por esta columna.
• defaultGroupOrder: Orden numérico de agrupación por defecto al cargar el grid (e.g. 1).
• aggregate: Tipo de cálculo agregado para subtotales ('sum' \| 'count').
• templateName: Nombre de la plantilla snkDataGridTemplate usada para renderizar esta celda de forma personalizada.
• width: Ancho de columna específico (e.g. '120px').

Comandos Útiles para Desarrollo

Construir la Biblioteca

ng build snk-data-grid

Publicar la Biblioteca

cd dist/snk-data-grid
npm publish