{"_id":"@ddiazr/generic-table-drag-and-drop","_rev":"3-dfb7917387c9da0d642d6a46ae155236","name":"@ddiazr/generic-table-drag-and-drop","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@ddiazr/generic-table-drag-and-drop","version":"0.0.1","author":{"name":"Dany Díaz","email":"danylen1@hotmail.com"},"license":"MIT","_id":"@ddiazr/generic-table-drag-and-drop@0.0.1","maintainers":[{"name":"ddiazr","email":"danylen1@hotmail.com"}],"dist":{"shasum":"b498fc64fba05002a408506b1d21f459ba901df9","tarball":"https://registry.npmjs.org/@ddiazr/generic-table-drag-and-drop/-/generic-table-drag-and-drop-0.0.1.tgz","fileCount":5,"integrity":"sha512-NksN7uEYJ3WYWoXlY6+Y8ES2/EVft0a9n2joRKfdpjY3TrKz2NMpRklUYJ5q1oa7WY+7LAE/8jSYOGiMlZ4how==","signatures":[{"sig":"MEQCIDIv/snzxOfj+3DBz1tiYsaU5QXvQixDMgve4R5P+Z0iAiAoOTIlGWg/RhwaRxJ4Xe8vI3xROKK4BvjUMt1GzxRZ9A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":86674},"module":"fesm2022/ddiazr-generic-table-drag-and-drop.mjs","exports":{".":{"types":"./types/ddiazr-generic-table-drag-and-drop.d.ts","default":"./fesm2022/ddiazr-generic-table-drag-and-drop.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"48a865278f6a5acedec16a39321e57761289c473","typings":"types/ddiazr-generic-table-drag-and-drop.d.ts","_npmUser":{"name":"ddiazr","email":"danylen1@hotmail.com"},"_npmVersion":"10.9.0","description":"Tabla generica que puede hacer drag and drop, acciones, export PDF,EXCEl","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"xlsx":"^0.18.5","jspdf":"^4.0.0","bootstrap":"^5.3.8","@angular/cdk":"^21.1.2","@angular/core":"^21.1.0","@angular/common":"^21.1.0","jspdf-autotable":"^5.0.7","@fortawesome/fontawesome-free":"^7.1.0"},"_npmOperationalInternal":{"tmp":"tmp/generic-table-drag-and-drop_0.0.1_1769895422595_0.26366921128465615","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@ddiazr/generic-table-drag-and-drop","version":"0.0.2","author":{"name":"Dany Díaz","email":"danylen1@hotmail.com"},"license":"MIT","_id":"@ddiazr/generic-table-drag-and-drop@0.0.2","maintainers":[{"name":"ddiazr","email":"danylen1@hotmail.com"}],"dist":{"shasum":"95e8b99df77f639dc18a7f50574d9ed3e8ff93c7","tarball":"https://registry.npmjs.org/@ddiazr/generic-table-drag-and-drop/-/generic-table-drag-and-drop-0.0.2.tgz","fileCount":5,"integrity":"sha512-fjgBOL8n0PVRkTdjuJ9VuqlIC+0t8YVRMJEbgCWX7oBDq0wKWSSqTUSu4o8Cj9ANmqKYfK479zl50sQKEyU8Yw==","signatures":[{"sig":"MEUCIQC09jwL4KNr3jYuVJrK6pvTfgtjtUeU7srHfDbQm9aEwQIgMCKaDXFuR53rM7uIqHu5+2AvAIDa3G/2hxX4r7SJUVA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":86484},"module":"fesm2022/ddiazr-generic-table-drag-and-drop.mjs","exports":{".":{"types":"./types/ddiazr-generic-table-drag-and-drop.d.ts","default":"./fesm2022/ddiazr-generic-table-drag-and-drop.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"a360bc5bf91921a13091a11d0154bfdf6b9c1b12","typings":"types/ddiazr-generic-table-drag-and-drop.d.ts","_npmUser":{"name":"ddiazr","email":"danylen1@hotmail.com"},"_npmVersion":"10.9.0","description":"Tabla generica que puede hacer drag and drop, acciones, export PDF,EXCEl","directories":{},"sideEffects":false,"_nodeVersion":"22.12.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"xlsx":"^0.18.5","jspdf":"^4.0.0","bootstrap":"^5.3.8","@angular/cdk":"^21.1.2","@angular/core":"^21.1.0","@angular/common":"^21.1.0","jspdf-autotable":"^5.0.7","@fortawesome/fontawesome-free":"^7.1.0"},"_npmOperationalInternal":{"tmp":"tmp/generic-table-drag-and-drop_0.0.2_1770089406108_0.21441123999762035","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@ddiazr/generic-table-drag-and-drop","version":"0.0.3","description":"Tabla generica que puede hacer drag and drop, acciones, export PDF,EXCEl","author":{"name":"Dany Díaz","email":"danylen1@hotmail.com"},"license":"MIT","peerDependencies":{"@angular/common":"^21.1.0","@angular/core":"^21.1.0","@angular/cdk":"^21.1.2","bootstrap":"^5.3.8","@fortawesome/fontawesome-free":"^7.1.0","jspdf":"^4.0.0","jspdf-autotable":"^5.0.7","xlsx":"^0.18.5"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/ddiazr-generic-table-drag-and-drop.mjs","typings":"types/ddiazr-generic-table-drag-and-drop.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/ddiazr-generic-table-drag-and-drop.d.ts","default":"./fesm2022/ddiazr-generic-table-drag-and-drop.mjs"}},"_id":"@ddiazr/generic-table-drag-and-drop@0.0.3","gitHead":"7c04478bd4c302de90346ce305b3a9a73ed9477e","_nodeVersion":"22.12.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-GEu+MDkXxGgHamuCF+TykU11T9V06GTxb1wbD2TLhHMDTT1VhsIvAKc0E2NzJY3WRscwyZ/UJ1LEIvePrptwAw==","shasum":"27f44a36de31d558fb649bb334652bce6b4ea66a","tarball":"https://registry.npmjs.org/@ddiazr/generic-table-drag-and-drop/-/generic-table-drag-and-drop-0.0.3.tgz","fileCount":5,"unpackedSize":88738,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIB1B5HrIm7XUDKo2OCDz83YHl1qQRFZ25oFgO0D12JZXAiAp7itCA4fFZHDXD5YglmCUWIZNQu90toa1BBxAEWHlOA=="}]},"_npmUser":{"name":"ddiazr","email":"danylen1@hotmail.com"},"directories":{},"maintainers":[{"name":"ddiazr","email":"danylen1@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/generic-table-drag-and-drop_0.0.3_1771432847441_0.9421701867711934"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-31T21:37:02.506Z","modified":"2026-02-18T16:40:47.955Z","0.0.1":"2026-01-31T21:37:02.748Z","0.0.2":"2026-02-03T03:30:06.251Z","0.0.3":"2026-02-18T16:40:47.629Z"},"author":{"name":"Dany Díaz","email":"danylen1@hotmail.com"},"license":"MIT","description":"Tabla generica que puede hacer drag and drop, acciones, export PDF,EXCEl","maintainers":[{"name":"ddiazr","email":"danylen1@hotmail.com"}],"readme":"# Generic Table Drag and Drop\r\n\r\nTabla Dinamica con Drag and Drop Angular 21+\r\n\r\n## Instalación\r\n\r\n```bash\r\nnpm install @ddiazr/generic-table-drag-and-drop\r\n```\r\n\r\n## Peer Dependencies\r\n\r\n```bash\r\nng add @angular/cdk\r\nnpm i bootstrap @fortawesome/fontawesome-free\r\n```\r\n\r\n## ColumnConfig && TableAction\r\n\r\n```bash\r\ninterface TableAction {\r\n label: string;\r\n icon: string;\r\n class: string;\r\n callback: (row: T) => void;\r\n showIf?: (row: T) => boolean; // Tu validación dinámica\r\n}\r\n\r\ninterface ColumnConfig {\r\n key: string;\r\n label: string;\r\n type?: 'text' | 'number' | 'currency' | 'date';\r\n bold?: boolean;\r\n}\r\n```\r\n\r\n## Campos\r\n\r\n| Propiedad | Tipo | Obligatorio | Descripción |\r\n| --------------- | ---------------- | ----------- | ----------------------------------------------------- |\r\n| `data` | `any[]` | ✅ Sí | Datos de entrada segun el jsonen la tabla |\r\n| `columnsConfig` | `ColumnConfig[]` | ✅ Sí | Datos de las columnas que quieras que tenga la tabla |\r\n| `availableColumnsI` | `string[]` | ❌ No | Columnas que no quieres ver en la tabla al inicio (Ojo: aqui va tal cual el valor que lleva en la ColumnsConfig.key) |\r\n| `pageSize` | `number` | ❌ No | Valor por defecto tiene 25 para la paginación |\r\n| `exportExcel` | `boolean` | ❌ No | Valor por defecto false, exportacion a excel |\r\n| `exportPdf` | `boolean` | ❌ No | Valor por defecto false, exportacion a pdf |\r\n| `nameExport` | `string` | ❌ No | Nombre que se le dara a las exportaciones |\r\n| `actions` | `TableAction[]`| ❌ No | Funcion que devuelve la accion segun el columnsConfig |\r\n\r\n## Uso básico\r\n\r\n```typescript\r\nimport { GenericTableDragAndDrop, ColumnConfig, TableAction } from '@ddiazr/generic-table-drag-and-drop';\r\n\r\n@Component({\r\n imports: [GenericTableDragAndDrop],\r\n template: `\r\n \r\n `,\r\n})\r\nexport class AppComponent {\r\n // SI NO QUEREMOS EL DEFECTO SE LO PODEMOS MANDAR INDICANDO EL VALOR\r\n pageSize = signal(10);\r\n // SI NECESITAMOS EXPORTAR LO QUE LA TABLA PRESENTA EN EXCEL\r\n exportExcel = signal(true);\r\n // SI NECESITAMOS EXPORTAR LO QUE LA TABLA PRESENTA EN PDF\r\n exportPdf = signal(true);\r\n // AQUI SE LE ASIGNA LOS VALORES QUE SE MOSTRARAN EN LA TABLA\r\n data = signal([\r\n {\r\n id: 1,\r\n nombre: 'Juan Perez',\r\n edad: 36,\r\n salario: 1000,\r\n fechanac: '21/07/1700',\r\n },\r\n {\r\n id: 2,\r\n nombre: 'Juana Perez',\r\n edad: 14,\r\n salario: 2000,\r\n fechanac: '21/07/1700',\r\n },\r\n ]);\r\n //DECALRAMOS LAS COLUMNAS QUE VA A CONTENER LA TABLA\r\n columns = signal([\r\n {\r\n key: 'id',\r\n label: 'ID',\r\n },\r\n {\r\n key: 'nombre',\r\n label: 'NOMBRE',\r\n },\r\n {\r\n key: 'edad',\r\n label: 'EDAD',\r\n },\r\n {\r\n key: 'salario',\r\n label: 'SALARIO',\r\n type: 'currency',\r\n },\r\n {\r\n key: 'fechanac',\r\n label: 'FECHA NACIMIENTO',\r\n type: 'date',\r\n },\r\n ]);\r\n\r\n // SI SE NECESITA QUE LA TABLA TENGA BOTONES PARA N ACCIONES\r\n // SE MUESTRA ESTE EJEMPLO QUE TIENE DOS ACCIONES\r\n // 1. MUESTRA EL BOTON EDIT SI LA EDAD ES > 18\r\n // 2. MUESTRA EL BOTON SIN RESTRICCION\r\n actions = signal[]>([\r\n {\r\n label: 'Edit',\r\n icon: 'fa fa-edit',\r\n class: 'btn btn-warning',\r\n showIf: (row) => row.edad > 18,\r\n callback: (row) => this.edit(row),\r\n },\r\n {\r\n label: 'VER',\r\n icon: 'fa fa-edit',\r\n class: 'btn btn-warning',\r\n callback: (row) => this.ver(row.id),\r\n },\r\n ]);\r\n}\r\n```\r\n\r\n## Configuración de estilos\r\n\r\nEn tu `angular.json`:\r\n\r\n```json\r\n\"styles\": [\r\n \"node_modules/bootstrap/dist/css/bootstrap.min.css\",\r\n \"node_modules/@fortawesome/fontawesome-free/css/all.min.css\"\r\n]\r\n```\r\n\r\n## Licencia\r\n\r\nMIT\r\n\r\n# Source files\r\n\r\nsrc/\r\n_.ts\r\n!_.d.ts\r\n","readmeFilename":"README.md"}