Generic Table Drag and Drop

Tabla Dinamica con Drag and Drop Angular 21+

Instalación

npm install @ddiazr/generic-table-drag-and-drop

Peer Dependencies

ng add @angular/cdk
npm i bootstrap @fortawesome/fontawesome-free

ColumnConfig && TableAction

interface TableAction<T> {
  label: string;
  icon: string;
  class: string;
  callback: (row: T) => void;
  showIf?: (row: T) => boolean; // Tu validación dinámica
}

interface ColumnConfig {
  key: string;
  label: string;
  type?: 'text' | 'number' | 'currency' | 'date';
  bold?: boolean;
}

Campos

| Propiedad | Tipo | Obligatorio | Descripción | | --------------- | ---------------- | ----------- | ----------------------------------------------------- | | data | any[] | ✅ Sí | Datos de entrada segun el jsonen la tabla | | columnsConfig | ColumnConfig[] | ✅ Sí | Datos de las columnas que quieras que tenga la tabla | | pageSize | number | ❌ No | Valor por defecto tiene 25 para la paginación | | exportExcel | boolean | ❌ No | Valor por defecto false, exportacion a excel | | exportPdf | boolean | ❌ No | Valor por defecto false, exportacion a pdf | | nameExport | string | ❌ No | Nombre que se le dara a las exportaciones | | actions | TableAction<T>[] | ❌ No | Funcion que devuelve la accion segun el columnsConfig |

Uso básico

import { GenericTableDragAndDrop, ColumnConfig, TableAction } from '@ddiazr/generic-table-drag-and-drop';

@Component({
  imports: [GenericTableDragAndDrop],
  template: `
    <tbl-generic-drag-and-drop
      [data]="data()"
      [columnsConfig]="columns()"
      [pageSize]="pageSize()"
      [exportExcel]="exportExcel"
      [exportPdf]="exportPdf"
      nameExport="Reporte pruebas"
      [actions]="actions()"
    />
  `,
})
export class AppComponent {
  // SI NO QUEREMOS EL DEFECTO SE LO PODEMOS MANDAR INDICANDO EL VALOR
  pageSize = signal<number>(10);
  // SI NECESITAMOS EXPORTAR LO QUE LA TABLA PRESENTA EN EXCEL
  exportExcel = signal<boolean>(true);
  // SI NECESITAMOS EXPORTAR LO QUE LA TABLA PRESENTA EN PDF
  exportPdf = signal<boolean>(true);
  // AQUI SE LE ASIGNA LOS VALORES QUE SE MOSTRARAN EN LA TABLA
  data = signal<any[]>([
    {
      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<ColumnConfig[]>([
    {
      key: 'id',
      label: 'ID',
    },
    {
      key: 'nombre',
      label: 'NOMBRE',
    },
    {
      key: 'edad',
      label: 'EDAD',
    },
    {
      key: 'salario',
      label: 'SALARIO',
      type: 'currency',
    },
    {
      key: 'fechanac',
      label: 'FECHA NACIMIENTO',
      type: '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<TableAction<any>[]>([
    {
      label: 'Edit',
      icon: 'fa fa-edit',
      class: 'btn btn-warning',
      showIf: (row) => row.edad > 18,
      callback: (row) => this.edit(row),
    },
    {
      label: 'VER',
      icon: 'fa fa-edit',
      class: 'btn btn-warning',
      callback: (row) => this.ver(row.id),
    },
  ]);
}

Configuración de estilos

En tu angular.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