lanzarote-table

lanzarote-table es una librería de tabla de datos para Angular, potente y personalizable. Ofrece funcionalidades esenciales como paginación, ordenación, filtrado (global y por columna), exportación de datos y selección de filas, con soporte completo para renderizado tanto en cliente como en servidor.

Características Principales

• Paginación, Ordenación y Filtrado: Soporte completo para cliente y servidor.
• Selección de Filas: Selección individual y masiva con persistencia entre páginas, incluso en modo server-side.
• Exportación de Datos: Exporta los datos seleccionados (o todos) a formatos CSV, Excel y PDF.
• Personalización de Celdas: Renderiza cualquier contenido o componente en una celda usando plantillas de Angular.
• Modo Oscuro: Soporte completo para tema oscuro con detección automática de preferencias del sistema.

Instalación

npm install lanzarote-table

Dependencias Adicionales

Para la funcionalidad de exportación, instala las siguientes librerías:

npm install xlsx jspdf jspdf-autotable

Guía de Inicio Rápido

1. Importa DataTableComponent en tu módulo o componente standalone.

   // tu-componente.ts
   import { DataTableComponent } from 'lanzarote-table';
   
   @Component({
     standalone: true,
     imports: [DataTableComponent, ...],
     // ...
   })
   export class TuComponente {}

2. Añade la tabla a tu plantilla HTML y configura los datos y columnas.

   <!-- tu-componente.html -->
   <lanzarote-table [data]="misDatos" [columns]="misColumnas"></lanzarote-table>

Configuración de Columnas

La propiedad columns es un array de objetos TableColumn, donde cada objeto define cómo se debe mostrar una columna.

Ejemplo Básico

import { TableColumn } from 'lanzarote-table';

// ...

columns: TableColumn[] = [
  { key: 'id', label: 'ID', type: 'string' },
  { key: 'name', label: 'Nombre', type: 'string' },
  { key: 'amount', label: 'Monto', type: 'currency' },
  { key: 'isActive', label: 'Activo', type: 'boolean' },
  { key: 'created_at', label: 'Fecha', type: 'date' },
];

Configuración Avanzada

Inputs del Componente

| Propiedad | Tipo | Por Defecto | Descripción | | --- | --- | --- | --- | | columns | TableColumn<T>[] | Requerido | Define las columnas de la tabla. | | data | T[] | Requerido | El array de datos a mostrar. | | actions | TableAction[] | [] | Acciones a nivel de fila (ej. editar, eliminar). | | rowClassConditions | RowClassCondition<T>[] | [] | Aplica clases CSS a las filas basadas en condiciones. | | pagination | boolean | false | Habilita/deshabilita la paginación. | | pageSizeOptions | number[] | [25, 50, 100] | Opciones para el selector de tamaño de página. | | pageSize | number | 25 | Tamaño de página por defecto. | | serverSide | boolean | false | Habilita el modo servidor para paginación, ordenación y filtrado. | | totalItems | number | 0 | Número total de registros en modo serverSide. | | striped | boolean | true | Aplica un estilo de "cebra" a las filas. | | globalSearch | boolean | false | Muestra un campo de búsqueda global. | | showColumnFilters | boolean | true | Muestra los filtros por columna. | | showExportButtons | boolean | false | Muestra los botones de exportación (CSV, Excel, PDF). | | showSelection | boolean | false | Habilita la selección de filas con checkboxes. | | loading | boolean | false | Muestra un indicador de carga. | | showNewButton | boolean | false | Muestra un botón para "Añadir Nuevo". | | showHideColumns | boolean | false | Muestra un menú para ocultar/mostrar columnas. | | dataKey | string | null | Clave única del objeto de datos para la selección. | | initialState | TableState | null | Estado inicial para filtros, paginación, etc. | | theme | 'light' \| 'dark' | 'light' | Controla el tema de la tabla. Puede ser configurado globalmente. | | density | 'normal' \| 'compact' \| 'spacious' | 'normal' | Controla la densidad visual de la tabla. Puede ser configurado globalmente. | | colorPrimary | string | '#a7a7a7' | Color primario para cabeceras, botones y elementos principales. | | colorSecondary | string | '#c2c2c2' | Color secundario para elementos de apoyo y estados hover. |

Outputs del Componente

| Propiedad | Emite | Descripción | | --- | --- | --- | | actionClicked | { action: string; item: T } | Se dispara cuando se hace clic en una acción de fila. | | newButtonClicked | void | Se dispara al hacer clic en el botón "Añadir Nuevo". | | stateChanged | TableState | Emite el estado actual de la tabla (paginación, filtros, etc.) en modo serverSide. | | selectionChange | any[] | Emite las filas seleccionadas. |

Interfaces Principales

TableColumn<T>

Define la estructura y comportamiento de cada columna.

| Propiedad | Tipo | Descripción | | --- | --- | --- | | key | string | Nombre de la propiedad en el objeto de datos. Soporta anidación (ej. 'user.name'). | | label | string | Texto a mostrar en el encabezado de la columna. | | type | 'string' \| 'date' \| ... | Tipo de dato para formateo y filtrado. | | filterable | boolean | (Opcional) Habilita el filtro para esta columna. | | options | { value: any; label: string }[] | (Opcional) Opciones para columnas de tipo 'select'. | | badgeConfig | { [key: string]: { class: string; label: string } } | (Opcional) Configuración para columnas de tipo 'badge'. | | width | string | (Opcional) Ancho de la columna (ej. '150px'). | | sortable | boolean | (Opcional) Habilita la ordenación para esta columna. | | visible | boolean | (Opcional) Define la visibilidad inicial de la columna. | | exportValue | (item: T) => any | (Opcional) Función para obtener un valor personalizado para la exportación. | | cellTemplate | any | (Opcional) Referencia a una plantilla personalizada para la celda. |

TableState

Representa el estado de la tabla, útil para el modo serverSide.

| Propiedad | Tipo | Descripción | | --- | --- | --- | | skip | number | Número de registros a saltar (para paginación). | | first | number | Alias de skip. | | order | string \| null | Campo de ordenación. Prefijo - para descendente (ej. '-name'). | | search | string | Valor del filtro de búsqueda global. | | filtros | TableFilter[] | Array de filtros de columna activos. | | rows | number | Número de registros por página. |

TableFilter

Define un filtro de columna activo.

| Propiedad | Tipo | Descripción | | --- | --- | --- | | campo | string | La clave (key) de la columna a filtrar. | | valor | any | El valor del filtro. | | tipo | 'string' \| 'date' \| ... | El tipo de dato del filtro. |

TableAction

Define una acción a nivel de fila.

| Propiedad | Tipo | Descripción | | --- | --- | --- | | label | string | Texto a mostrar en el botón de la acción. | | action | string | Identificador único de la acción. | | class | string | (Opcional) Clase CSS para el botón. |

RowClassCondition<T>

Aplica una clase CSS a una fila si se cumple una condición.

| Propiedad | Tipo | Descripción | | --- | --- | --- | | condition | (item: T) => boolean | Función que devuelve true si la clase debe aplicarse. | | class | string | La clase CSS a aplicar. |

Configuración Global (LanzaroteTableOptions)

Puedes definir una configuración por defecto para todas las tablas de tu aplicación proveyendo el token LANZAROTE_TABLE_OPTIONS.

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { LANZAROTE_TABLE_OPTIONS } from 'lanzarote-table';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: LANZAROTE_TABLE_OPTIONS,
      useValue: {
        density: 'compact',
        striped: false,
        showExportButtons: true,
      },
    },
  ],
};

| Propiedad | Tipo | Descripción | | --- | --- | --- | | density | 'compact' \| 'normal' \| 'spacious' | Densidad visual de la tabla. | | theme | 'light' \| 'dark' | Tema de la tabla por defecto. | | pagination | boolean | Habilita la paginación por defecto. | | pageSizeOptions | number[] | Opciones de tamaño de página por defecto. | | pageSize | number | Tamaño de página por defecto. | | striped | boolean | Estilo de "cebra" por defecto. | | globalSearch | boolean | Muestra la búsqueda global por defecto. | | showColumnFilters | boolean | Muestra los filtros de columna por defecto. | | showExportButtons | boolean | Muestra los botones de exportación por defecto. | | showSelection | boolean | Habilita la selección por defecto. | | showNewButton | boolean | Muestra el botón "Añadir Nuevo" por defecto. | | showHideColumns | boolean | Muestra el menú de columnas por defecto. | | colorPrimary | string | Color primario por defecto para todas las tablas. | | colorSecondary | string | Color secundario por defecto para todas las tablas. |

Modo Oscuro

lanzarote-table incluye soporte completo para modo oscuro que se adapta automáticamente a las preferencias del sistema del usuario. La tabla detecta automáticamente si el usuario tiene configurado el modo oscuro en su sistema operativo y aplica los estilos correspondientes.

Características del Modo Oscuro

• Detección Automática: La tabla detecta automáticamente las preferencias del sistema usando prefers-color-scheme: dark.
• Estilos Optimizados: Todos los componentes (tabla, filtros, paginación, botones) están optimizados para el modo oscuro.
• Contraste Mejorado: Los colores han sido cuidadosamente seleccionados para mantener una excelente legibilidad.
• Transiciones Suaves: Cambios fluidos entre modo claro y oscuro.

Configuración Manual

Tienes varias opciones para controlar manualmente el modo oscuro:

1. Usando el Input theme

Puedes controlar el tema directamente usando el input theme del componente:

<!-- Forzar modo oscuro -->
<lanzarote-table [data]="misDatos" [columns]="misColumnas" theme="dark"></lanzarote-table>

<!-- Forzar modo claro -->
<lanzarote-table [data]="misDatos" [columns]="misColumnas" theme="light"></lanzarote-table>

// Control dinámico del tema
export class MiComponente {
  temaActual: 'light' | 'dark' = 'light';
  
  toggleTema() {
    this.temaActual = this.temaActual === 'light' ? 'dark' : 'light';
  }
}

2. Usando Clases CSS

Si prefieres usar la detección automática pero quieres sobrescribirla, puedes añadir la clase dark al elemento raíz:

<!-- Para activar modo oscuro manualmente -->
<html class="dark">
  <!-- tu aplicación -->
</html>

// Ejemplo de toggle manual en tu componente
export class AppComponent {
  toggleDarkMode() {
    document.documentElement.classList.toggle('dark');
  }
}

Personalización de Colores

Si necesitas personalizar los colores del modo oscuro, puedes sobrescribir las variables CSS:

/* En tu archivo de estilos globales */
@media (prefers-color-scheme: dark) {
  :root {
    --dt-bg-primary: #1a1a1a;        /* Fondo principal */
    --dt-bg-secondary: #2d2d2d;      /* Fondo secundario */
    --dt-text-primary: #ffffff;      /* Texto principal */
    --dt-text-secondary: #a0a0a0;    /* Texto secundario */
    --dt-border-color: #404040;      /* Color de bordes */
  }
}

/* O usando la clase .dark */
.dark {
  --dt-bg-primary: #1a1a1a;
  --dt-bg-secondary: #2d2d2d;
  --dt-text-primary: #ffffff;
  --dt-text-secondary: #a0a0a0;
  --dt-border-color: #404040;
}

Personalización de Colores

lanzarote-table permite personalizar los colores primario y secundario de la tabla para adaptarse a la identidad visual de tu aplicación.

Características de Personalización de Colores

• Colores Personalizables: Define colores primario y secundario para cabeceras, botones y elementos interactivos.
• Variables CSS: Utiliza variables CSS (--dt-color-primary, --dt-color-secondary) para máxima flexibilidad.
• Configuración Global: Establece colores por defecto para toda la aplicación.
• Control Dinámico: Cambia los colores en tiempo real usando inputs del componente.

Configuración de Colores

1. Usando Inputs del Componente

Puedes controlar los colores directamente usando los inputs colorPrimary y colorSecondary:

<!-- Colores personalizados -->
<lanzarote-table 
  [data]="misDatos" 
  [columns]="misColumnas"
  colorPrimary="#3f51b5"
  colorSecondary="#ff4081">
</lanzarote-table>

// Control dinámico de colores
export class MiComponente {
  colorPrimario = '#3f51b5';
  colorSecundario = '#ff4081';
  
  cambiarTema(tema: string) {
    switch(tema) {
      case 'azul':
        this.colorPrimario = '#3f51b5';
        this.colorSecundario = '#ff4081';
        break;
      case 'verde':
        this.colorPrimario = '#4caf50';
        this.colorSecundario = '#8bc34a';
        break;
      case 'purpura':
        this.colorPrimario = '#9c27b0';
        this.colorSecundario = '#e91e63';
        break;
    }
  }
}

2. Usando Variables CSS Globales

Puedes sobrescribir los colores por defecto en tu archivo de estilos globales:

/* En tu archivo de estilos globales (styles.css) */
:root {
  --dt-color-primary: #your-primary-color;
  --dt-color-secondary: #your-secondary-color;
}

3. Configuración Global con LanzaroteTableOptions

Establece colores por defecto para toda la aplicación:

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { LANZAROTE_TABLE_OPTIONS } from 'lanzarote-table';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: LANZAROTE_TABLE_OPTIONS,
      useValue: {
        colorPrimary: '#your-primary-color',
        colorSecondary: '#your-secondary-color',
        // ... otras opciones
      },
    },
  ],
};

Elementos Afectados por los Colores

• Color Primario (--dt-color-primary):

  • Fondo de la cabecera de la tabla
  • Botones principales
  • Bordes de inputs en foco
  • Indicadores de ordenación activos

• Color Secundario (--dt-color-secondary):

  • Elementos secundarios y de apoyo
  • Estados hover de algunos elementos
  • Badges y etiquetas secundarias

Ejemplo Completo con Selector de Temas

// mi-componente.ts
import { Component, signal } from '@angular/core';
import { DataTableComponent } from 'lanzarote-table';

@Component({
  selector: 'app-mi-tabla',
  standalone: true,
  imports: [DataTableComponent],
  template: `
    <div class="tema-selector">
      <button (click)="setTema('gris')">Gris</button>
      <button (click)="setTema('azul')">Azul</button>
      <button (click)="setTema('verde')">Verde</button>
      <button (click)="setTema('purpura')">Púrpura</button>
    </div>
    
    <lanzarote-table 
      [data]="datos" 
      [columns]="columnas"
      [colorPrimary]="colorPrimario()"
      [colorSecondary]="colorSecundario()">
    </lanzarote-table>
  `
})
export class MiComponente {
  colorPrimario = signal('#a7a7a7');
  colorSecundario = signal('#c2c2c2');
  
  datos = [
    // tus datos...
  ];
  
  columnas = [
    // tus columnas...
  ];
  
  setTema(tema: string) {
    switch(tema) {
      case 'gris':
        this.colorPrimario.set('#a7a7a7');
        this.colorSecundario.set('#c2c2c2');
        break;
      case 'azul':
        this.colorPrimario.set('#3f51b5');
        this.colorSecundario.set('#ff4081');
        break;
      case 'verde':
        this.colorPrimario.set('#4caf50');
        this.colorSecundario.set('#8bc34a');
        break;
      case 'purpura':
        this.colorPrimario.set('#9c27b0');
        this.colorSecundario.set('#e91e63');
        break;
    }
  }
}

Ejemplos de Uso

Clases Condicionales en Filas (rowClassConditions)

Ejemplo: Resaltar en rojo las filas cuyo amount sea negativo.

// tu-componente.ts
import { RowClassCondition } from 'lanzarote-table';

// ...

rowConditions: RowClassCondition<any>[] = [
  {
    condition: (item) => item.amount < 0,
    class: 'fila-negativa' // Clase CSS que se aplicará
  }
];

/* tu-componente.scss o styles.scss */
.fila-negativa {
  background-color: #ff000020; /* Fondo rojo muy claro */
  font-weight: bold;
}

<!-- tu-componente.html -->
<lanzarote-table 
  [data]="misDatos" 
  [columns]="misColumnas"
  [rowClassConditions]="rowConditions">
</lanzarote-table>

Esta propiedad acepta un array de objetos RowClassCondition<T>, donde cada objeto tiene dos propiedades:

• condition: Una función que recibe un item de la fila (item: T) y devuelve true si la clase debe aplicarse.
• class: La cadena de texto con la(s) clase(s) CSS que se aplicarán si la condición es true.

Ejemplo

Imagina que quieres resaltar las filas donde un usuario está inactivo (activo: false) con un fondo rojo claro y aquellas donde el número de pedidos es alto (pedidos > 50) con un fondo amarillo claro.

En tu componente TypeScript:

import { Component } from '@angular/core';
import { RowClassCondition, TableColumn } from 'lanzarote-table'; // Asegúrate de que la ruta sea correcta

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  myData = [
    { id: 1, nombre: 'Usuario A', activo: true, pedidos: 25 },
    { id: 2, nombre: 'Usuario B', activo: false, pedidos: 60 },
    { id: 3, nombre: 'Usuario C', activo: true, pedidos: 75 },
    { id: 4, nombre: 'Usuario D', activo: false, pedidos: 10 },
  ];

  myColumns: TableColumn[] = [
    { key: 'nombre', label: 'Nombre' },
    { key: 'activo', label: 'Activo', type: 'boolean' },
    { key: 'pedidos', label: 'Pedidos' },
  ];

  // Define tus condiciones para las clases de las filas
  myRowClassConditions: RowClassCondition<any>[] = [
    {
      condition: (item) => item.activo === false,
      class: 'bg-red-50', // Clase si el item no está activo
    },
    {
      condition: (item) => item.pedidos > 50,
      class: 'bg-yellow-50', // Clase si el número es mayor que 50
    },
  ];
}

En tu plantilla HTML:

<lanzarote-table
  [data]="myData"
  [columns]="myColumns"
  [rowClassConditions]="myRowClassConditions"
>
</lanzarote-table>

Uso de badgeConfig para Celdas de Tipo badge

Para mostrar valores como etiquetas de estado (por ejemplo, "Activo", "Inactivo"), puedes usar el tipo badge. La propiedad badgeConfig te permite asignar una clase CSS y una etiqueta de texto a cada valor posible.

import { TableColumn } from 'lanzarote-table';

// ...

users = [
  { id: 1, name: 'Usuario A', status: 'active' },
  { id: 2, name: 'Usuario B', status: 'inactive' },
  { id: 3, name: 'Usuario C', status: 'pending' },
];

columns: TableColumn[] = [
  { key: 'id', label: 'ID' },
  { key: 'name', label: 'Nombre' },
  {
    key: 'status',
    label: 'Estado',
    type: 'badge', // Define el tipo de columna como 'badge'
    badgeConfig: {
      'active': { 
        class: 'bg-green-200 text-green-800', // Clase CSS para el estilo
        label: 'Activo'                        // Texto a mostrar
      },
      'inactive': { 
        class: 'bg-red-200 text-red-800', 
        label: 'Inactivo' 
      },
      'pending': { 
        class: 'bg-yellow-200 text-yellow-800', 
        label: 'Pendiente' 
      }
    }
  }
];

El resultado será una columna "Estado" que muestra badges estilizados según el valor de status de cada fila.

Personalización de Celdas con tableCellTemplate

Puedes personalizar completamente el contenido de cualquier celda, sin importar su type, utilizando la directiva tableCellTemplate.

1. Importa DataTableComponent y CellTemplateDirective en tu componente standalone.

   // tu-componente.ts
   import { DataTableComponent, CellTemplateDirective } from 'lanzarote-table';
   
   @Component({
     standalone: true,
     imports: [DataTableComponent, CellTemplateDirective, /* ... otros módulos como CommonModule */],
     // ...
   })
   export class TuComponente {}

2. Identifica la columna que quieres personalizar en tu array de columns. El type puede ser 'string', 'badge', etc.

   // tu-componente.ts
   misColumnas: TableColumn[] = [
     { key: 'nombre', label: 'Nombre', type: 'string' },
     { key: 'estado', label: 'Estado', type: 'badge', badgeConfig: { /* ... */ } },
     { key: 'acciones', label: 'Acciones', type: 'string' } // No necesita ser 'template'
   ];

3. En tu plantilla HTML, añade un <ng-template> dentro de la tabla. Usa la directiva tableCellTemplate y pásale como valor el key de la columna que quieres sobreescribir.

   <!-- tu-componente.html -->
   <lanzarote-table [data]="misDatos" [columns]="misColumnas">
   
     <!-- Ejemplo 1: Transformar el texto de la columna 'nombre' -->
     <ng-template tableCellTemplate="nombre" let-item>
       <strong>{{ item.nombre | uppercase }}</strong>
     </ng-template>
   
     <!-- Ejemplo 2: Añadir botones a la columna 'acciones' -->
     <ng-template tableCellTemplate="acciones" let-item>
       <button (click)="editar(item)">Editar</button>
     </ng-template>
   
   </lanzarote-table>

Añadir Botones Personalizados en la Cabecera

Puedes añadir tus propios botones y componentes en la cabecera de la tabla, junto al botón "NUEVO", utilizando la proyección de contenido de Angular.

Para ello, añade un contenedor con el atributo lanzarote-header-actions dentro de la etiqueta <lanzarote-table>. Todo el contenido dentro de este contenedor se proyectará en la cabecera.

Ejemplo:

<!-- tu-componente.html -->
<lanzarote-table
  [data]="misDatos"
  [columns]="misColumnas"
  [showNewButton]="true"
>
  <!-- Contenedor para los botones personalizados -->
  <div lanzarote-header-actions>
    <button class="dt-button" (click)="miAccionPersonalizada()">
      <span>Acción Personalizada</span>
    </button>
  </div>

</lanzarote-table>

Consejo: Para mantener un estilo consistente, puedes usar la clase dt-button en tus botones, tal como se muestra en el ejemplo.

Proyectar Contenido en el Título

En lugar de una simple cadena de texto, puedes inyectar cualquier contenido HTML o componente de Angular en el área del título de la tabla. Esto te da la flexibilidad de añadir subtítulos, badges, o cualquier otro elemento interactivo.

Para ello, utiliza un contenedor con el atributo lanzarote-title-content.

Ejemplo:

<!-- tu-componente.html -->
<lanzarote-table [data]="misDatos" [columns]="misColumnas">

  <!-- Contenido personalizado para el título -->
  <div lanzarote-title-content>
    <h2>Ventas del Mes</h2>
    <span class="subtitulo">Reporte actualizado al día de hoy</span>
  </div>

</lanzarote-table>

3. Define los datos y la estructura de las columnas en tu componente.

   // tu-componente.ts
   import { Column } from 'lanzarote-table';
   
   // ...
   export class TuComponente {
     misDatos = [
       { id: 1, nombre: 'Producto A', categoria: 'Electrónica', precio: 199.99 },
       { id: 2, nombre: 'Producto B', categoria: 'Libros', precio: 24.99 },
     ];
   
     misColumnas: Column[] = [
       { key: 'id', label: 'ID' },
       { key: 'nombre', label: 'Nombre del Producto' },
       { key: 'categoria', label: 'Categoría' },
       { key: 'precio', label: 'Precio', type: 'currency' }, // El tipo 'currency' formatea el número como moneda
     ];
   }

Configuración Global (Opcional)

lanzarote-table permite establecer una configuración por defecto para todas las instancias de la tabla a nivel de aplicación. Esto es útil para mantener un estilo y comportamiento consistentes sin tener que declarar las mismas propiedades de entrada (@Input) una y otra vez.

Esto se logra proveyendo un objeto de configuración a través del InjectionToken LANZAROTE_TABLE_OPTIONS.

Opciones Configurables

export interface LanzaroteTableOptions {
  density?: 'compact' | 'normal' | 'spacious';
  pagination?: boolean;
  pageSizeOptions?: number[];
  pageSize?: number;
  striped?: boolean;
  globalSearch?: boolean;
  showColumnFilters?: boolean;
  showExportButtons?: boolean;
  showSelection?: boolean;
  showNewButton?: boolean;
  showHideColumns?: boolean;
}

Ejemplo de Uso en una Aplicación Standalone

En tu fichero app.config.ts, añade la configuración al array de providers:

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { LANZAROTE_TABLE_OPTIONS } from 'lanzarote-table';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: LANZAROTE_TABLE_OPTIONS,
      useValue: {
        density: 'compact',
        pagination: true,
        pageSize: 50,
        showExportButtons: true,
      },
    },
  ],
};

Ejemplo de Uso en una Aplicación con NgModules

En tu fichero app.module.ts:

// app.module.ts
import { NgModule } from '@angular/core';
import { LANZAROTE_TABLE_OPTIONS } from 'lanzarote-table';

@NgModule({
  //...
  providers: [
    {
      provide: LANZAROTE_TABLE_OPTIONS,
      useValue: {
        density: 'compact',
        pagination: true,
        pageSize: 50,
      },
    },
  ],
})
export class AppModule {}

Con esta configuración, cualquier tabla que no especifique estas propiedades directamente usará los valores globales. Cualquier propiedad definida en la plantilla del componente (<lanzarote-table [pagination]="false">) tendrá prioridad sobre la configuración global.

API y Opciones de Configuración

Propiedades de Entrada (@Input)

data: T[]

El array de objetos que se mostrarán en la tabla. T puede ser cualquier tipo de objeto.

columns: Column[]

Define la estructura de las columnas. La interfaz Column tiene las siguientes propiedades:

• key: string: La clave del objeto de datos a mostrar en la celda.
• label: string: El texto que se mostrará en la cabecera de la columna.
• type?: 'string' | 'numeric' | 'currency' | 'date' | 'badge' | 'boolean' | 'select' | 'datetime': (Opcional) El tipo de dato para aplicar un formato predefinido. Por defecto es 'string'.
• sortable?: boolean: (Opcional) Permite que la columna sea ordenable. Por defecto es true.
• filterable?: boolean: (Opcional) Habilita un filtro específico para esta columna. Por defecto es true.

density: 'normal' | 'compact' | 'spacious'

• Valor: 'normal' (por defecto), 'compact', o 'spacious'.
• Uso: Ajusta la densidad visual de la tabla. Puede ser preconfigurado globalmente.

pagination: boolean

• Valor: true o false (por defecto false).
• Uso: Muestra u oculta el paginador. Puede ser preconfigurado globalmente.

pageSize: number

• Valor: Un número (por defecto 25).
• Uso: Define cuántas filas se muestran por página. Puede ser preconfigurado globalmente.

pageSizeOptions: number[]

• Valor: Un array de números (por defecto [25, 50, 100]).
• Uso: Define las opciones disponibles en el selector de tamaño de página. Puede ser preconfigurado globalmente.

serverSide: boolean

• Valor: true o false (por defecto false).
• Uso: Activa el modo server-side. En este modo, la tabla emite un evento stateChanged para que el servidor procese los datos.

totalItems: number

• Uso: Requerido en modo serverSide. Indica el número total de registros para calcular la paginación. Por defecto es 0.

loading: boolean

• Valor: true o false (por defecto false).
• Uso: Muestra una superposición de carga, ideal para operaciones asíncronas.

striped: boolean

• Valor: true o false (por defecto true).
• Uso: Aplica un estilo de filas alternas (cebreado). Puede ser preconfigurado globalmente.

globalSearch: boolean

• Valor: true o false (por defecto false).
• Uso: Muestra un campo de búsqueda global. Puede ser preconfigurado globalmente.

showColumnFilters: boolean

• Valor: true o false (por defecto true).
• Uso: Muestra u oculta la fila de filtros por columna. Puede ser preconfigurado globalmente.

showExportButtons: boolean

• Valor: true o false (por defecto false).
• Uso: Muestra los botones para exportar los datos. Puede ser preconfigurado globalmente.

showSelection: boolean

• Valor: true o false (por defecto false).
• Uso: Muestra una columna de checkboxes para la selección de filas. Puede ser preconfigurado globalmente.

showNewButton: boolean

• Valor: true o false (por defecto false).
• Uso: Muestra un botón "Nuevo" en la cabecera. Emite el evento newButtonClicked. Puede ser preconfigurado globalmente.

showHideColumns: boolean

• Valor: true o false (por defecto false).
• Uso: Muestra un menú para ocultar/mostrar columnas. Puede ser preconfigurado globalmente.

dataKey: string

• Uso: Requerido para la persistencia de selección en modo serverSide. Es el nombre de la propiedad que actúa como identificador único para cada fila (ej: 'id').

rowClassConditions: RowClassCondition<T>[]

• Valor: Un array de objetos RowClassCondition<T>. Por defecto es [].
• Uso: Permite aplicar clases CSS a las filas (<tr>) de forma condicional. Cada objeto en el array define una condition (una función que devuelve un booleano) y una class (la clase CSS a aplicar si la condición es verdadera).

Eventos de Salida (@Output)

stateChanged: EventEmitter<TableState>

• Se emite: Solo en modo serverSide, cuando el usuario cambia de página, ordena una columna o aplica un filtro.
• Payload (TableState): Un objeto que contiene el estado actual de la tabla para que puedas construir la consulta al backend.

  export interface TableState {
    skip: number;       // Número de registros a saltar (offset)
    first: number;      // Número de registros a tomar (limit)
    order?: string | null; // Columna de ordenación ('-columna' para descendente)
    search?: string | null;  // Valor del filtro global
    filtros?: TableFilter[] | null; // Array de filtros por columna
  }

Uso Avanzado

Personalización de Celdas

Usa la directiva *lanzaroteCellTemplate para tomar el control total sobre el renderizado de una celda.

• Variables de Plantilla: let-row (el objeto completo de la fila) y let-value (el valor de la celda).
• columnKey: Asocia la plantilla con una columna específica.

<lanzarote-table [data]="usuarios" [columns]="columnasUsuarios">

  <!-- Ejemplo 1: Renderizar una celda con botones de acción -->
  <ng-template *lanzaroteCellTemplate let-row="row" columnKey="acciones">
    <button (click)="editar(row.id)">Editar</button>
    <button (click)="eliminar(row.id)">Eliminar</button>
  </ng-template>

  <!-- Ejemplo 2: Aplicar un formato o un componente personalizado -->
  <ng-template *lanzaroteCellTemplate let-value="value" columnKey="estado">
    <span class="status-badge" [ngClass]="'status-' + value">{{ value }}</span>
  </ng-template>

</lanzarote-table>