{"_id":"@daviduo/vue-searchable-sortable-table","_rev":"6-82641fa57f3f04d0dc5e429a22065132","name":"@daviduo/vue-searchable-sortable-table","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.0":{"name":"@daviduo/vue-searchable-sortable-table","version":"1.0.0","keywords":["vue","vue3","component","table","searchable","sortable","tailwind","tailwindcss","search","sort","sticky-header"],"author":{"name":"Davide Piroddi davide0400@gmail.com"},"license":"MIT","_id":"@daviduo/vue-searchable-sortable-table@1.0.0","maintainers":[{"name":"daviduo","email":"davide0400@gmail.com"}],"homepage":"https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg#readme","bugs":{"url":"https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg/issues"},"dist":{"shasum":"b433664ed44d7ceaed92f0552f51d9be24fb5bc0","tarball":"https://registry.npmjs.org/@daviduo/vue-searchable-sortable-table/-/vue-searchable-sortable-table-1.0.0.tgz","fileCount":6,"integrity":"sha512-CPuqXXYBFzDnk+MLTibS6Kk49bTohwOwrcS2mmqEMfcLcxCDBf2wVRMucvIYUZZgpteVJQp9WazhKXP9CgspOw==","signatures":[{"sig":"MEYCIQDrpLz/bZrVQbOZKVUDDDV3t7lcRMH+1YOO7Xc0j1J2SgIhALmoicRjoZ922TXRzg8I0u1kAGEpitECaPnbsUaw3OhP","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":54567},"main":"./dist/vue-searchable-sortable-table.umd.js","type":"module","module":"./dist/vue-searchable-sortable-table.es.js","exports":{".":{"import":"./dist/vue-searchable-sortable-table.es.js","require":"./dist/vue-searchable-sortable-table.umd.js"}},"gitHead":"3113fc749958dd62653e2170ced987a6d3a25608","scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"daviduo","email":"davide0400@gmail.com"},"repository":{"url":"git+https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg.git","type":"git"},"_npmVersion":"9.2.0","description":"Un componente tabella Vue 3 versatile e configurabile con Tailwind CSS, ricerca e ordinamento.","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.2.0","@heroicons/vue":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-searchable-sortable-table_1.0.0_1746606020877_0.5488706761739648","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@daviduo/vue-searchable-sortable-table","version":"1.0.1","keywords":["vue","vue3","component","table","searchable","sortable","tailwind","tailwindcss","search","sort","sticky-header"],"author":{"name":"Davide Piroddi davide0400@gmail.com"},"license":"MIT","_id":"@daviduo/vue-searchable-sortable-table@1.0.1","maintainers":[{"name":"daviduo","email":"davide0400@gmail.com"}],"homepage":"https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg#readme","bugs":{"url":"https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg/issues"},"dist":{"shasum":"d1d8bafa32d3ecffe63d3e271da3abdd7b3c205f","tarball":"https://registry.npmjs.org/@daviduo/vue-searchable-sortable-table/-/vue-searchable-sortable-table-1.0.1.tgz","fileCount":6,"integrity":"sha512-fP+6rQDKGnQYInQqeKggwsGVT88M4D/waa6Ig29rN8gRB2TU1uVcqLUIYJOaGry8/i1Q7TM5IJvuB6RZk3Dt1Q==","signatures":[{"sig":"MEUCIBCPG0+BV6d6Dv0wAPf46i4LnH9p60JRliA16QK8EYaRAiEA1X2Jaub6DTiYGEgaEQMy1MI0g8AAgOui/tb5EgEwfF0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":54879},"main":"./dist/vue-searchable-sortable-table.umd.js","type":"module","module":"./dist/vue-searchable-sortable-table.es.js","exports":{".":{"import":"./dist/vue-searchable-sortable-table.es.js","require":"./dist/vue-searchable-sortable-table.umd.js"}},"gitHead":"b767fd7536afa4bf1b7517baa8acc482a88d9fb9","scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"daviduo","email":"davide0400@gmail.com"},"repository":{"url":"git+https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg.git","type":"git"},"_npmVersion":"9.2.0","description":"Un componente tabella Vue 3 versatile e configurabile con Tailwind CSS, ricerca e ordinamento.","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.2.0","@heroicons/vue":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-searchable-sortable-table_1.0.1_1746606450747_0.440007542289913","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@daviduo/vue-searchable-sortable-table","version":"1.0.2","keywords":["vue","vue3","component","table","searchable","sortable","tailwind","tailwindcss","search","sort","sticky-header"],"author":{"name":"Davide Piroddi davide0400@gmail.com"},"license":"MIT","_id":"@daviduo/vue-searchable-sortable-table@1.0.2","maintainers":[{"name":"daviduo","email":"davide0400@gmail.com"}],"homepage":"https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg#readme","bugs":{"url":"https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg/issues"},"dist":{"shasum":"9c7ce46fa1cd1d18e218de81b966b60bd19c31dc","tarball":"https://registry.npmjs.org/@daviduo/vue-searchable-sortable-table/-/vue-searchable-sortable-table-1.0.2.tgz","fileCount":6,"integrity":"sha512-HHNTsdoJlQvShmhk7v58S6ijHiOurcxOp8dV0HYD9IJ47tDE783G8BcQ7wbBi8GHRlcPRegVRkR0xK3KqRKsBA==","signatures":[{"sig":"MEUCIQDTD59NgXsgqDm9bkdbU1g8NHP40H+0loSg7iMtRddqUwIgYN17JhaWMcDhFou4NdilhiX6gbiwz4vBTJySFWZFayg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":54110},"main":"./dist/vue-searchable-sortable-table.umd.js","type":"module","module":"./dist/vue-searchable-sortable-table.es.js","exports":{".":{"import":"./dist/vue-searchable-sortable-table.es.js","require":"./dist/vue-searchable-sortable-table.umd.js"}},"gitHead":"2fad0544ddd2dfef5f1bc15bab5b65bd744109b9","scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"daviduo","email":"davide0400@gmail.com"},"repository":{"url":"git+https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg.git","type":"git"},"_npmVersion":"9.2.0","description":"Un componente tabella Vue 3 versatile e configurabile con Tailwind CSS, ricerca e ordinamento.","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.2.0","@heroicons/vue":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-searchable-sortable-table_1.0.2_1746696033688_0.7874546092372265","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@daviduo/vue-searchable-sortable-table","version":"1.0.3","keywords":["vue","vue3","component","table","searchable","sortable","tailwind","tailwindcss","search","sort","sticky-header"],"author":{"name":"Davide Piroddi davide0400@gmail.com"},"license":"MIT","_id":"@daviduo/vue-searchable-sortable-table@1.0.3","maintainers":[{"name":"daviduo","email":"davide0400@gmail.com"}],"homepage":"https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg#readme","bugs":{"url":"https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg/issues"},"dist":{"shasum":"7d2dcafec9961a78f8854dc939ad25b429891f18","tarball":"https://registry.npmjs.org/@daviduo/vue-searchable-sortable-table/-/vue-searchable-sortable-table-1.0.3.tgz","fileCount":6,"integrity":"sha512-gtTeRWMDe9pxRuoE8k/ApxS0r858Am4ADlIm82JlUtFUcGbLEXKgXmmBa4e4ZB8rNuFhGg5yJrZePUboAk49fg==","signatures":[{"sig":"MEUCICRjB6piNiwOwdFRvRnA2lLfcYHGf1ZdfLyCCqBevsAkAiEA5M9pGyfxg/RxKMQvSSd78aJfLCwNSxPddLXuVwcm9Rk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":53904},"main":"./dist/vue-searchable-sortable-table.umd.js","type":"module","module":"./dist/vue-searchable-sortable-table.es.js","exports":{".":{"import":"./dist/vue-searchable-sortable-table.es.js","require":"./dist/vue-searchable-sortable-table.umd.js"}},"gitHead":"3e926cb5b7e11cc190ba25a22b12f5efc4fb8804","scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"daviduo","email":"davide0400@gmail.com"},"repository":{"url":"git+https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg.git","type":"git"},"_npmVersion":"9.2.0","description":"Un componente tabella Vue 3 versatile e configurabile con Tailwind CSS, ricerca e ordinamento.","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.2.0","@heroicons/vue":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-searchable-sortable-table_1.0.3_1746696668109_0.11610337990715891","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@daviduo/vue-searchable-sortable-table","version":"1.0.4","keywords":["vue","vue3","component","table","searchable","sortable","tailwind","tailwindcss","search","sort","sticky-header"],"author":{"name":"Davide Piroddi davide0400@gmail.com"},"license":"MIT","_id":"@daviduo/vue-searchable-sortable-table@1.0.4","maintainers":[{"name":"daviduo","email":"davide0400@gmail.com"}],"homepage":"https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg#readme","bugs":{"url":"https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg/issues"},"dist":{"shasum":"42049f24de1ca6f4fd6424f26af604c9437d97cb","tarball":"https://registry.npmjs.org/@daviduo/vue-searchable-sortable-table/-/vue-searchable-sortable-table-1.0.4.tgz","fileCount":6,"integrity":"sha512-0LmqNdyKj2yS8iT9p19vT5l863up9hhBI2OFcwO7988KVm7hiMaBJrgBrFZxR0aYNVRsIn1mcnaYKxQaFpPOaw==","signatures":[{"sig":"MEQCIBJf2jWaZaUTP3PVIgzbieN/MR5s5U/JgJ3AE6+X08LMAiA0O+0T+B+wLrHs2YV/J8vwf5g6riRkKx7LkxK9Khq8yA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":54096},"main":"./dist/vue-searchable-sortable-table.umd.js","type":"module","module":"./dist/vue-searchable-sortable-table.es.js","exports":{".":{"import":"./dist/vue-searchable-sortable-table.es.js","require":"./dist/vue-searchable-sortable-table.umd.js"}},"gitHead":"02020770aac46bd53d378ed5865d61f5403dfc8f","scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"_npmUser":{"name":"daviduo","email":"davide0400@gmail.com"},"repository":{"url":"git+https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg.git","type":"git"},"_npmVersion":"9.2.0","description":"Un componente tabella Vue 3 versatile e configurabile con Tailwind CSS, ricerca e ordinamento.","directories":{},"_nodeVersion":"18.19.1","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.0","vite":"^5.0.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^3.2.0","@heroicons/vue":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-searchable-sortable-table_1.0.4_1746773445298_0.7523079520981428","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@daviduo/vue-searchable-sortable-table","version":"1.0.5","description":"Un componente tabella Vue 3 versatile e configurabile con Tailwind CSS, ricerca e ordinamento.","type":"module","main":"./dist/vue-searchable-sortable-table.umd.js","module":"./dist/vue-searchable-sortable-table.es.js","exports":{".":{"import":"./dist/vue-searchable-sortable-table.es.js","require":"./dist/vue-searchable-sortable-table.umd.js"}},"scripts":{"dev":"vite","build":"vite build","prepublishOnly":"npm run build"},"peerDependencies":{"@heroicons/vue":"^2.0.0","vue":"^3.2.0"},"devDependencies":{"@vitejs/plugin-vue":"^5.0.0","vite":"^5.0.0","vue":"^3.3.0"},"keywords":["vue","vue3","component","table","searchable","sortable","tailwind","tailwindcss","search","sort","sticky-header"],"author":{"name":"Davide Piroddi davide0400@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg.git"},"bugs":{"url":"https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg/issues"},"homepage":"https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg#readme","gitHead":"09ab9c848a0213168fb90d035a4d24909bd5f210","_id":"@daviduo/vue-searchable-sortable-table@1.0.5","_nodeVersion":"18.19.1","_npmVersion":"9.2.0","dist":{"integrity":"sha512-1vG06N0wofVhmPtTa0zRwfQ2reDiuANXIrjBIWtvcTWI6dGHqkjuF2YPOpPww4jw526xtj+ZkuMNOt8oCfCXHA==","shasum":"3c9e2063b088747230686fc005de6ec6edb51721","tarball":"https://registry.npmjs.org/@daviduo/vue-searchable-sortable-table/-/vue-searchable-sortable-table-1.0.5.tgz","fileCount":6,"unpackedSize":54093,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCQdqhCWO2E0TaxLLYLTdakkJI2ij6ovH2Bu9GUHfnbVAIhALH9ab3YIEhgFmBTUQfv6eJ21QudzEIy99f6M5ZNC9Hm"}]},"_npmUser":{"name":"daviduo","email":"davide0400@gmail.com"},"directories":{},"maintainers":[{"name":"daviduo","email":"davide0400@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-searchable-sortable-table_1.0.5_1746773956744_0.44323871840737095"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-07T08:20:20.750Z","modified":"2025-05-09T06:59:17.150Z","1.0.0":"2025-05-07T08:20:21.069Z","1.0.1":"2025-05-07T08:27:30.954Z","1.0.2":"2025-05-08T09:20:33.878Z","1.0.3":"2025-05-08T09:31:08.306Z","1.0.4":"2025-05-09T06:50:45.467Z","1.0.5":"2025-05-09T06:59:16.952Z"},"bugs":{"url":"https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg/issues"},"author":{"name":"Davide Piroddi davide0400@gmail.com"},"license":"MIT","homepage":"https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg#readme","keywords":["vue","vue3","component","table","searchable","sortable","tailwind","tailwindcss","search","sort","sticky-header"],"repository":{"type":"git","url":"git+https://github.com/0Daviduo0/vue-sorted-searchable-table-pkg.git"},"description":"Un componente tabella Vue 3 versatile e configurabile con Tailwind CSS, ricerca e ordinamento.","maintainers":[{"name":"daviduo","email":"davide0400@gmail.com"}],"readme":"# Vue Sorted Searchable Table (`@your-npm-scope/vue-sorted-searchable-table`)\n\nUn componente tabella Vue 3 versatile e altamente configurabile, costruito con Tailwind CSS. Include funzionalità di ordinamento (client-side o server-side), ricerca per campo specifico o globale (con debounce), header della tabella \"sticky\" per lo scrolling verticale interno, e un sistema di slot completo per una facile personalizzazione dell'UI e del rendering delle celle.\n\n## Caratteristiche Principali\n\n* **Ordinamento Flessibile**: Ordinamento per colonna attivabile, con supporto sia per la logica interna al componente sia per l'ordinamento esterno gestito dal server (tramite eventi).\n* **Ricerca Avanzata**:\n  * Ricerca testuale per campo specifico selezionabile da un dropdown.\n  * Opzione \"Cerca ovunque\" per una ricerca globale (se abilitata).\n  * Debounce configurabile per ottimizzare le performance.\n* **Header Sticky e Scrolling Verticale**:\n  * Possibilità di definire un'altezza massima per la tabella.\n  * Se il contenuto eccede l'altezza massima, il corpo della tabella diventa scrollabile mentre l'header (`<thead>`) rimane fisso in cima.\n* **Personalizzazione Completa**:\n  * Slot per azioni globali nell'header.\n  * Slot per azioni per riga e per l'header della colonna azioni.\n  * Slot dinamici per il rendering personalizzato di ogni cella dati.\n* **Stilizzato con Tailwind CSS**: Richiede che Tailwind CSS sia configurato nel progetto che utilizza il componente.\n* **Design Responsivo**: Si adatta a diverse dimensioni di schermo.\n* **Messaggi Configurabili**: Per lo stato di caricamento e per quando non ci sono dati.\n* **Internazionalizzazione Semplice**: Etichette e messaggi principali passabili come props.\n\n## Installazione\n\n```bash\nnpm install @your-npm-scope/vue-sorted-searchable-table\n# o\nyarn add @your-npm-scope/vue-sorted-searchable-table\n```\n\n## Dipendenze dell'Utente\n\nQuesto componente si affida a `peerDependencies` che devono essere già presenti e configurate nel tuo progetto:\n\n* **`vue`**: `^3.2.0` o superiore\n* **`@heroicons/vue`**: `^2.0.0` o superiore (utilizzato per le icone di ordinamento e del dropdown di ricerca). Assicurati di installare la versione corretta (es. `@heroicons/vue/20/solid`).\n\n### IMPORTANTE: Integrazione con Tailwind CSS\n\nQuesto componente è interamente stilizzato usando classi di utilità Tailwind CSS. Affinché lo stile funzioni correttamente, il tuo progetto **deve avere Tailwind CSS configurato**.\n\nInoltre, dovrai assicurarti che le classi Tailwind utilizzate dal componente siano incluse nel processo di \"purging\" o \"tree-shaking\" di Tailwind del tuo progetto. Il modo più semplice è aggiungere il percorso ai file del componente (compilati o sorgenti) all'array `content` nel tuo file `tailwind.config.js`:\n\n```javascript\n// tailwind.config.js (esempio)\nmodule.exports = {\n  content: [\n    \"./index.html\",\n    \"./src/**/*.{vue,js,ts,jsx,tsx}\",\n    // Aggiungi il percorso al componente installato:\n    \"./node_modules/@your-npm-scope/vue-sorted-searchable-table/dist/**/*.js\", // Se il pacchetto espone file JS compilati\n    // Oppure, se il pacchetto espone i file .vue sorgente (meglio per il tree-shaking di Tailwind):\n    // \"./node_modules/@your-npm-scope/vue-sorted-searchable-table/src/**/*.vue\", \n  ],\n  // ... il resto della tua configurazione Tailwind\n}\n```\n\nConsulta la documentazione del pacchetto specifico una volta pubblicato per il percorso corretto da includere.\n\n## Utilizzo\n\nPuoi importare il componente e usarlo nei tuoi file `.vue`.\n\n**1. Registrazione Globale (tramite plugin - opzionale):**\n\nSe il pacchetto esporta un plugin (controlla la sua documentazione), puoi registrarlo globalmente:\n\n```javascript\n// main.js (o il tuo file di entry point Vue)\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport VueSortedSearchableTablePlugin from '@your-npm-scope/vue-sorted-searchable-table';\n\nconst app = createApp(App);\napp.use(VueSortedSearchableTablePlugin /*, { componentName: 'MyCustomTable' } */); // Puoi passare opzioni se il plugin lo supporta\napp.mount('#app');\n```\n\n**2. Importazione Diretta nel Componente:**\n\nQuesto è l'approccio più comune.\n\n```html\n<template>\n  <div class=\"container mx-auto p-4\">\n    <vue-sorted-searchable-table\n      :items=\"tableItems\"\n      :columns=\"tableColumns\"\n      item-key-field=\"id\"\n      title=\"Gestione Utenti\"\n      description=\"Elenco degli utenti registrati nel sistema.\"\n      :is-loading=\"isLoading\"\n      :searchable=\"true\"\n      :search-all=\"true\" \n      search-debounce-time=\"500\"\n      table-max-height=\"70vh\"\n      :external-sort=\"true\"\n      :initial-sort-key=\"currentSort.key\"\n      :initial-sort-direction=\"currentSort.direction\"\n      @sort-change=\"handleSortChange\"\n      @search=\"handleSearchQuery\"\n      @add-item=\"handleAddNewItem\"\n      empty-state-message=\"Nessun utente trovato per i criteri specificati.\"\n      add-label=\"Nuovo Utente\"\n    >\n      <template #header-actions>\n        <button @click=\"exportData\" class=\"ml-4 px-3 py-2 text-sm font-semibold text-white bg-green-600 rounded-md shadow-sm hover:bg-green-500\">\n          Esporta Dati\n        </button>\n      </template>\n\n      <template #row-actions-cell=\"{ item }\">\n        <a href=\"#\" @click.prevent=\"viewItemDetails(item)\" class=\"text-indigo-600 hover:text-indigo-900\">\n          Dettagli\n        </a>\n        <a href=\"#\" @click.prevent=\"deleteItem(item)\" class=\"ml-4 text-red-600 hover:text-red-900\">\n          Elimina\n        </a>\n      </template>\n\n      <template #cell-status=\"{ value }\">\n        <span :class=\"getStatusClass(value)\" class=\"px-2 inline-flex text-xs leading-5 font-semibold rounded-full\">\n          {{ value }}\n        </span>\n      </template>\n\n      <template #cell-registratoIl=\"{ value }\">\n        <span>{{ formatDate(value) }}</span>\n      </template>\n    </vue-sorted-searchable-table>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n// Assumendo che il componente sia esportato come 'VueSortedSearchableTable' o un nome simile\nimport { VueSortedSearchableTable } from '@your-npm-scope/vue-sorted-searchable-table'; \n\nconst isLoading = ref(false);\nconst tableItems = ref([\n  { id: 'u001', nome: 'Mario Rossi', email: 'mario.rossi@example.com', status: 'Attivo', registratoIl: '2023-01-15T10:00:00Z' },\n  { id: 'u002', nome: 'Laura Bianchi', email: 'laura.bianchi@example.com', status: 'Inattivo', registratoIl: '2023-02-20T14:30:00Z' },\n  { id: 'u003', nome: 'Luca Verdi', email: 'luca.verdi@example.com', status: 'Sospeso', registratoIl: '2022-12-05T08:15:00Z' },\n  // ...altri dati\n]);\n\nconst tableColumns = ref([\n  { key: 'nome', label: 'Nome Completo', sortable: true, isSearchableField: true },\n  { key: 'email', label: 'Indirizzo Email', sortable: true, isSearchableField: true },\n  { key: 'status', label: 'Stato', sortable: true, isSearchableField: true, cellClass: 'text-center' },\n  { key: 'registratoIl', label: 'Data Registrazione', sortable: true, headerClass: 'text-left' },\n]);\n\nconst currentSort = ref({ key: 'nome', direction: 'asc' });\nconst currentSearchTerm = ref(''); // Potresti voler memorizzare qui il termine di ricerca per logica complessa\n\nfunction handleSortChange(sortParams) {\n  console.log('Sort requested:', sortParams);\n  currentSort.value = sortParams;\n  // Qui implementeresti la logica per ricaricare i dati dal backend con i nuovi parametri di ordinamento\n  // Esempio: fetchData({ sort: sortParams.key, direction: sortParams.direction, search: currentSearchTerm.value });\n  alert(`Ordinamento cambiato: ${sortParams.key} - ${sortParams.direction}`);\n}\n\nfunction handleSearchQuery(searchPayload) {\n  console.log('Search payload received:', searchPayload);\n  // searchPayload è una stringa: '' (reset), 'search=query', o 'fieldKey=query'\n  // Qui implementeresti la logica per ricaricare i dati dal backend con i parametri di ricerca\n  // Esempio: fetchData({ search: searchPayload, sort: currentSort.value.key, ... });\n  currentSearchTerm.value = searchPayload; // Aggiorna il termine di ricerca corrente\n  alert(`Ricerca per: ${searchPayload}`);\n}\n\nfunction handleAddNewItem() {\n  console.log('Add new item action triggered');\n  alert('Azione Aggiungi Nuovo Elemento');\n}\n\nfunction exportData() {\n  console.log('Export data action triggered');\n  alert('Esporta Dati');\n}\n\nfunction viewItemDetails(item) {\n  console.log('View details for:', item);\n  alert(`Dettagli per: ${item.nome}`);\n}\n\nfunction deleteItem(item) {\n  console.log('Delete item:', item);\n  if (confirm(`Sei sicuro di voler eliminare ${item.nome}?`)) {\n    alert(`${item.nome} eliminato (simulazione).`);\n    // tableItems.value = tableItems.value.filter(i => i.id !== item.id); // Esempio per rimozione client-side\n  }\n}\n\nfunction getStatusClass(status) {\n  if (status === 'Attivo') return 'bg-green-100 text-green-800';\n  if (status === 'Inattivo') return 'bg-yellow-100 text-yellow-800';\n  if (status === 'Sospeso') return 'bg-red-100 text-red-800';\n  return 'bg-gray-100 text-gray-800';\n}\n\nfunction formatDate(dateString) {\n  if (!dateString) return 'N/A';\n  return new Date(dateString).toLocaleDateString('it-IT', {\n    year: 'numeric', month: 'short', day: 'numeric'\n  });\n}\n</script>\n```\n\n## API del Componente\n\n### Props\n\n| Prop                     | Tipo    | Default                  | Descrizione                                                                                                                                                              |\n| :----------------------- | :------ | :----------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `title`                  | String  | `undefined`              | Titolo opzionale visualizzato sopra la tabella.                                                                                                                            |\n| `description`            | String  | `undefined`              | Descrizione opzionale visualizzata sotto il titolo.                                                                                                                        |\n| `items`                  | Array   | `[]` ( **richiesto** )   | Array di oggetti che rappresentano le righe della tabella.                                                                                                                |\n| `columns`                | Array   | `[]` ( **richiesto** )   | Array di oggetti che definiscono le colonne. Vedi \"Struttura Oggetto Colonna\" sotto.                                                                                   |\n| `itemKeyField`           | String  | `undefined` (**richiesto**)| Nome della proprietà univoca in ogni oggetto `item` (usato internamente per `:key` nel `v-for`).                                                                         |\n| `showAddButton`          | Boolean | `true`                   | Mostra o nasconde il pulsante di default \"Aggiungi elemento\" (viene ignorato se lo slot `header-actions` è utilizzato).                                                 |\n| `addLabel`               | String  | `'Aggiungi elemento'`    | Etichetta per il pulsante di default \"Aggiungi elemento\".                                                                                                                  |\n| `isLoading`              | Boolean | `false`                  | Se `true`, mostra un messaggio di caricamento nel corpo della tabella e disabilita alcune interazioni (come la ricerca o l'ordinamento).                                 |\n| `emptyStateMessage`      | String  | `'Nessun elemento trovato.'`| Messaggio visualizzato quando l'array `items` è vuoto e `isLoading` è `false`.                                                                                             |\n| `initialSortKey`         | String  | `null`                   | Chiave della colonna per l'ordinamento iniziale. Se `externalSort` è `true`, questa prop dovrebbe riflettere lo stato di ordinamento corrente gestito dal componente padre. |\n| `initialSortDirection`   | String  | `'asc'`                  | Direzione dell'ordinamento iniziale (`'asc'` o `'desc'`). Come `initialSortKey` se `externalSort` è `true`.                                                                 |\n| `externalSort`           | Boolean | `false`                  | Se `true`, l'ordinamento non viene eseguito internamente; viene invece emesso l'evento `sort-change` per la gestione da parte del componente padre.                         |\n| `showDefaultActionsHeader`| Boolean | `false`                 | Se `true`, mostra un'intestazione per la colonna delle azioni anche se lo slot `row-actions-header` non è fornito.                                                          |\n| `tableMaxHeight`         | String  | `null`                   | Altezza massima CSS per la tabella (es. `'400px'`, `'60vh'`). Se impostata, abilita lo scrolling verticale interno e l'header (`<thead>`) diventa sticky.                  |\n| `searchable`             | Boolean | `true`                   | Abilita o disabilita la funzionalità di ricerca integrata (input e dropdown).                                                                                             |\n| `searchAll`              | Boolean | `false`                  | Se `true` e `searchable` è `true`, aggiunge l'opzione \"Cerca ovunque\" al dropdown dei campi di ricerca.                                                                   |\n| `searchDebounceTime`     | Number  | `1000`                   | Tempo di attesa (in millisecondi) dopo che l'utente smette di digitare prima che l'evento `search` venga emesso.                                                          |\n\n#### Struttura Oggetto Colonna (per la prop `columns`)\n\nOgni oggetto nell'array `columns` definisce una colonna della tabella e può avere le seguenti proprietà:\n\n| Proprietà           | Tipo    | Richiesto | Default | Descrizione                                                                                                 |\n| :------------------ | :------ | :-------- | :------ | :---------------------------------------------------------------------------------------------------------- |\n| `key`               | String  | Sì        |         | La chiave univoca per accedere al valore corrispondente nell'oggetto `item` (es. `item[key]`).                |\n| `label`             | String  | Sì        |         | L'etichetta testuale visualizzata nell'header (`<th>`) della colonna.                                       |\n| `sortable`          | Boolean | No        | `false` | Se `true`, la colonna sarà cliccabile per l'ordinamento.                                                      |\n| `isSearchableField` | Boolean | No        | `true`  | Se `true` (default), questa colonna apparirà come opzione nel dropdown dei campi per la ricerca testuale.    |\n| `headerClass`       | String  | No        | `''`    | Stringa di classi CSS personalizzate da applicare all'elemento `<th>` di questa colonna.                       |\n| `cellClass`         | String  | No        | `''`    | Stringa di classi CSS personalizzate da applicare a tutti gli elementi `<td>` di questa colonna.               |\n\n### Eventi Emessi\n\n* **`add-item`**:\n    * Payload: `undefined`\n    * Emeso quando il pulsante di default \"Aggiungi elemento\" (visibile se `showAddButton` è `true` e lo slot `header-actions` non è utilizzato) viene cliccato.\n\n* **`sort-change`**:\n    * Payload: `Object` - `{ key: String, direction: String }` (es. `{ key: 'nome', direction: 'asc' }`)\n    * Emeso **solo se** `externalSort` è `true` e l'utente clicca sull'intestazione di una colonna `sortable`. Il componente padre è responsabile di aggiornare i dati e le props `initialSortKey`/`initialSortDirection`.\n\n* **`search`**:\n    * Payload: `String`\n    * Emeso dopo il `searchDebounceTime` quando l'utente modifica il testo nell'input di ricerca o cambia il campo selezionato nel dropdown di ricerca.\n    * Il formato del payload è:\n        * `''` (stringa vuota): Se il campo di testo della query è vuoto (usato per indicare di resettare o non applicare filtri di ricerca).\n        * `'search=[query]'`: Se l'opzione \"Cerca ovunque\" è selezionata (richiede `searchAll: true`) e `[query]` è il testo inserito.\n        * `'[fieldKey]=[query]'`: Se un campo specifico è selezionato dal dropdown (es. `'nome=Mario Rossi'`).\n\n### Slot Disponibili\n\n* **`header-actions`**:\n    * Scopo: Nessuno.\n    * Utilizza questo slot per inserire pulsanti o altri controlli personalizzati nell'area dell'header della tabella, a destra del titolo e della descrizione. Sostituisce completamente il pulsante di default \"Aggiungi elemento\".\n\n* **`row-actions-header`**:\n    * Scopo: Nessuno.\n    * Permette di definire il contenuto dell'intestazione (`<th>`) per la colonna delle azioni per riga. Utile se `showDefaultActionsHeader` è `true` o se si usa lo slot `row-actions-cell`.\n\n* **`row-actions-cell`**:\n    * Scopo: `{ item: Object }` (l'oggetto dati completo per la riga corrente).\n    * Utilizza questo slot per inserire controlli (es. pulsanti \"Modifica\", \"Elimina\") nella cella finale di ogni riga.\n\n* **`cell-{column.key}`** (Slot Dinamici):\n    * Scopo: `{ item: Object, value: any }` (`item` è l'oggetto dati completo per la riga corrente, `value` è il valore specifico della cella, cioè `item[column.key]`).\n    * Permette di personalizzare completamente il rendering del contenuto di una cella specifica. Sostituisci `{column.key}` con la `key` effettiva della colonna che vuoi personalizzare.\n    * Esempio: Per una colonna definita con `{ key: 'prezzo', ... }`, puoi usare `<template #cell-prezzo=\"{ value }\">...</template>`.\n\n## Licenza\n\nMIT (o la licenza specificata nel `package.json` del tuo pacchetto)\n\n---","readmeFilename":"readme.md"}