Generic Table

Tabla Dinamica con Angular 21+

Instalación

``bash
npm install @ddiazr/data-table
`

Peer Dependencies

`bash
npm i bootstrap @fortawesome/fontawesome-free
`

Interfaces && Type

`bash
type DataType = 'string' | 'number' | 'currency' | 'date' | 'boolean';
type Position = 'end' | 'start';

interface TableAction {
label: string;
icon?: string;
styleClass?: string; // Clases CSS (ej: Bootstrap)
callback: (row: T) => void;
isVisible?: (row: T) => boolean;
}

interface TableColumn {
key: keyof T | 'actions' | 'select';
label: string;
isSortable?: boolean;
templateRef?: any;
dataType?: DataType;
}
`

Campos

| Propiedad | Tipo | Obligatorio | Descripción |
| ------------------- | ------------------ | ----------- | ------------------------------------------------------------------------------- |
| data | any[] | ✅ Sí | Json que contendra la tabla |
| columns | ColumnConfig[] | ✅ Sí | Columnas que seran parametrizadas a mostrar al usuario |
| filterPlaceholder | string | ❌ No | Si necesita cambiar al buscador el placeholder |
| showExportButtons | boolean | ❌ No | Todos los botones de exportar defecto false (EXCEL, PDF O PRINT) |
| actions | TableAction[] | ❌ No | Funcion que devuelve la accion segun el columnsConfig |
| positionActions | Position | ❌ No | La posicion de los botones action. start(primera columna), end (ultima columna) |

Uso básico

`typescript
import { DataTable, TableColumn, TableAction, DataType, Position } from '@ddiazr/data-table';

@Component({
imports: [DataTable],
template:
[data]="data()"
[columns]="columns()"
[actions]="actions()"
filterPlaceholder="BUSCAR POR"
[showExportButtons]="true"
/>
,
})
export class AppComponent {
data = signal([
{
id: 1,
nombre: 'Juan Perez',
edad: 36,
salario: 1000,
fechanac: '21/07/1700',
},
{
id: 2,
nombre: 'Juana Perez',
edad: 14,
salario: 2000,
fechanac: '21/07/1700',
},
]);
//DECALRAMOS LAS COLUMNAS QUE VA A CONTENER LA TABLA
columns = signal[]>([
{
key: 'id',
label: 'ID',
},
{
key: 'nombre',
label: 'Nombre',
isSortable: true,
},
{
key: 'edad',
label: 'Edad',
isSortable: true,
dataType: 'number',
},
{
key: 'salario',
label: 'Salario',
isSortable: true,
dataType: 'currency',
},
{
key: 'fechanac',
label: 'F. Nac',
isSortable: true,
dataType: 'date',
},
]);

// SI SE NECESITA QUE LA TABLA TENGA BOTONES PARA N ACCIONES
// SE MUESTRA ESTE EJEMPLO QUE TIENE DOS ACCIONES
// 1. MUESTRA EL BOTON EDIT SI LA EDAD ES > 18
// 2. MUESTRA EL BOTON SIN RESTRICCION
actions = signal[]>([
{
label: 'Edit',
icon: 'fa fa-edit',
styleClass: 'btn-warning',
isVisible: (row) => row.edad > 18,
callback: (row) => this.edit(row),
},
{
label: 'VER',
icon: 'fa fa-edit',
styleClass: 'btn-warning',
callback: (row) => this.ver(row.id),
},
]);
}
`

Configuración de estilos

En tu angular.json:

`json
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css"
]
``

Licencia

MIT

Source files

src/
_.ts
!_.d.ts