{"_id":"vue3-flexi-data-table","_rev":"87-69820e400c16cc26478f008ba2965686","name":"vue3-flexi-data-table","dist-tags":{"latest":"1.0.1"},"versions":{"0.1.21":{"name":"vue3-flexi-data-table","version":"0.1.21","keywords":["vue","vue3","dynamic table","flexi data","flexi table"],"author":{"name":"tanmv"},"_id":"vue3-flexi-data-table@0.1.21","maintainers":[{"name":"mvtcode","email":"macvantan@gmail.com"}],"homepage":"https://github.com/mvtcode/vue3-flexi-data-table#readme","bugs":{"url":"https://github.com/mvtcode/vue3-flexi-data-table/issues"},"dist":{"shasum":"d3e5a512c5773b3900a64b800b829b7c94bfb159","tarball":"https://registry.npmjs.org/vue3-flexi-data-table/-/vue3-flexi-data-table-0.1.21.tgz","fileCount":31,"integrity":"sha512-11sfOGENWbDAVgEnm0hJkUZSmxbQ3B+/ZkG7pN35GZ2cK96A2XsXPJVUXs9XbH86Mk9QBxEhgxjrXVDxL8IhcQ==","signatures":[{"sig":"MEUCICFauMMdd/xCCeESb9Xiljj2s2w1H743rRFtnpxBanuYAiEAu9yG8W9NwsYuIQks392MYuhp4mc+puOpbkb327pC2hk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":334340},"main":"./dist/vue3-flexi-data-table.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/vue3-flexi-data-table.js","engines":{"npm":">=10.0.0","node":">=18.0.0"},"exports":{".":{"import":"./dist/vue3-flexi-data-table.js","require":"./dist/vue3-flexi-data-table.umd.cjs"},"./style.css":"./dist/style.css","./components/TableEditor":"./src/components/TableEditor.vue"},"gitHead":"974ac14178923d05d9e10821f92e39cb604cac46","private":false,"scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview","prebuild":"rimraf dist"},"_npmUser":{"name":"mvtcode","email":"macvantan@gmail.com"},"repository":{"url":"git+https://github.com/mvtcode/vue3-flexi-data-table.git","type":"git"},"_npmVersion":"10.9.0","description":"Library used for vue 3 so users can edit table columns according to their wishes.","directories":{},"_nodeVersion":"22.9.0","dependencies":{"vue":"^3.4.21","uuid":"^11.1.0","escape-html":"^1.0.3","vue3-popper":"^1.5.0","@vueuse/core":"^10.9.0","vue-draggable-next":"^2.2.1"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.72.0","vite":"^5.2.0","rimraf":"^5.0.5","vue-tsc":"^2.0.6","typescript":"^5.2.2","@types/node":"^20.12.2","vite-plugin-dts":"^3.8.1","@types/escape-html":"^1.0.4","@vitejs/plugin-vue":"^5.0.4"},"peerDependencies":{"vue":"^3.4.21"},"_npmOperationalInternal":{"tmp":"tmp/vue3-flexi-data-table_0.1.21_1743502772074_0.11282338025253424","host":"s3://npm-registry-packages-npm-production"}},"0.1.22":{"name":"vue3-flexi-data-table","version":"0.1.22","keywords":["vue","vue3","dynamic table","flexi data","flexi table"],"author":{"name":"tanmv"},"_id":"vue3-flexi-data-table@0.1.22","maintainers":[{"name":"mvtcode","email":"macvantan@gmail.com"}],"homepage":"https://github.com/mvtcode/vue3-flexi-data-table#readme","bugs":{"url":"https://github.com/mvtcode/vue3-flexi-data-table/issues"},"dist":{"shasum":"43537e93cdd38e658676eea1ad893a6b91390111","tarball":"https://registry.npmjs.org/vue3-flexi-data-table/-/vue3-flexi-data-table-0.1.22.tgz","fileCount":31,"integrity":"sha512-6USJqGFAbkb54t2phVc5ZAiHUta0kg4uhP8GdgJh3oI1wjLKcdcW0cX6+Weo53MoSvtUSJi08IAj5G4qcU+Y+A==","signatures":[{"sig":"MEQCIEofpwHzacByMxQvn2wa/LV35uuOy4rg0rT6HmRUcFpEAiB2QnUwnK7iCHf7fBgzpz5HgI61UPvZZ2GNHcIpYofuaQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":339107},"main":"./dist/vue3-flexi-data-table.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/vue3-flexi-data-table.js","engines":{"npm":">=10.0.0","node":">=18.0.0"},"exports":{".":{"import":"./dist/vue3-flexi-data-table.js","require":"./dist/vue3-flexi-data-table.umd.cjs"},"./style.css":"./dist/style.css","./components/TableEditor":"./src/components/TableEditor.vue"},"gitHead":"ad5cae7e14e97150bf26b12359202ede9d8faaa3","private":false,"scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview","prebuild":"rimraf dist"},"_npmUser":{"name":"mvtcode","email":"macvantan@gmail.com"},"repository":{"url":"git+https://github.com/mvtcode/vue3-flexi-data-table.git","type":"git"},"_npmVersion":"10.9.0","description":"Library used for vue 3 so users can edit table columns according to their wishes.","directories":{},"_nodeVersion":"22.9.0","dependencies":{"vue":"^3.4.21","uuid":"^11.1.0","escape-html":"^1.0.3","vue3-popper":"^1.5.0","@vueuse/core":"^10.9.0","vue-draggable-next":"^2.2.1"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.72.0","vite":"^5.2.0","rimraf":"^5.0.5","vue-tsc":"^2.0.6","typescript":"^5.2.2","@types/node":"^20.12.2","vite-plugin-dts":"^3.8.1","@types/escape-html":"^1.0.4","@vitejs/plugin-vue":"^5.0.4"},"peerDependencies":{"vue":"^3.4.21"},"_npmOperationalInternal":{"tmp":"tmp/vue3-flexi-data-table_0.1.22_1743503608159_0.05536115172723277","host":"s3://npm-registry-packages-npm-production"}},"0.1.23":{"name":"vue3-flexi-data-table","version":"0.1.23","keywords":["vue","vue3","dynamic table","flexi data","flexi table"],"author":{"name":"tanmv"},"_id":"vue3-flexi-data-table@0.1.23","maintainers":[{"name":"mvtcode","email":"macvantan@gmail.com"}],"homepage":"https://github.com/mvtcode/vue3-flexi-data-table#readme","bugs":{"url":"https://github.com/mvtcode/vue3-flexi-data-table/issues"},"dist":{"shasum":"f1cbb3c5d5f16ded42687de90bd8df325d9e0679","tarball":"https://registry.npmjs.org/vue3-flexi-data-table/-/vue3-flexi-data-table-0.1.23.tgz","fileCount":31,"integrity":"sha512-Z8q6XhKD4GiV4J3VYPo4n6ciwjPr5EEcYFdIQ/s2zZzQ1mUigPiAt/8GFUxoGKGR4Y1zJ2vFTCeQdBkgKYXmiw==","signatures":[{"sig":"MEQCIEJkNvOlUGPUyGYRqkNkDMz6K2GrruRVnw42a7R6jThUAiBnrlLLjfCnqqRf4NYQhJzWtzusPfSneM8YZPCIwxBeAA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":345225},"main":"./dist/vue3-flexi-data-table.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/vue3-flexi-data-table.js","engines":{"npm":">=10.0.0","node":">=18.0.0"},"exports":{".":{"import":"./dist/vue3-flexi-data-table.js","require":"./dist/vue3-flexi-data-table.umd.cjs"},"./style.css":"./dist/style.css","./components/TableEditor":"./src/components/TableEditor.vue"},"gitHead":"848b6963aa371d84038e6137296b8160d13c5f43","private":false,"scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview","prebuild":"rimraf dist"},"_npmUser":{"name":"mvtcode","email":"macvantan@gmail.com"},"repository":{"url":"git+https://github.com/mvtcode/vue3-flexi-data-table.git","type":"git"},"_npmVersion":"10.7.0","description":"Library used for vue 3 so users can edit table columns according to their wishes.","directories":{},"_nodeVersion":"18.20.4","dependencies":{"vue":"^3.4.21","uuid":"^11.1.0","escape-html":"^1.0.3","vue3-popper":"^1.5.0","@vueuse/core":"^10.9.0","vue-draggable-next":"^2.2.1"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.72.0","vite":"^5.2.0","rimraf":"^5.0.5","vue-tsc":"^2.0.6","typescript":"^5.2.2","@types/node":"^20.12.2","vite-plugin-dts":"^3.8.1","@types/escape-html":"^1.0.4","@vitejs/plugin-vue":"^5.0.4"},"peerDependencies":{"vue":"^3.4.21"},"_npmOperationalInternal":{"tmp":"tmp/vue3-flexi-data-table_0.1.23_1743755582395_0.17676564740054013","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"vue3-flexi-data-table","version":"1.0.0","keywords":["vue","vue3","table","data-table","grid","sortable","selectable"],"author":{"name":"tanmv"},"license":"MIT","_id":"vue3-flexi-data-table@1.0.0","maintainers":[{"name":"mvtcode","email":"macvantan@gmail.com"}],"homepage":"https://github.com/mvtcode/vue3-flexi-data-table#readme","bugs":{"url":"https://github.com/mvtcode/vue3-flexi-data-table/issues"},"dist":{"shasum":"69069a22e9c40802b50cf29a629d772e759a69a8","tarball":"https://registry.npmjs.org/vue3-flexi-data-table/-/vue3-flexi-data-table-1.0.0.tgz","fileCount":34,"integrity":"sha512-QwO9zWj33Lu9PG5BdIxUr+N2Uh3u6iUarg+4c0LhYOp+l/E/TphrKkR8mgvufYF/fCP3Yv8FsSwsrM6ZAS5bXQ==","signatures":[{"sig":"MEUCIQCz9FJ13ncgZKs9BdZUkRMS0gOaM4XzFnkbtbQAFws9bQIgQ4gXY3NXTjNhaWDVvTwCy0qXawJZV5eD7TtFnsUqFOA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1415916},"main":"dist/vue3-flexi-data-table.umd.js","type":"module","types":"dist/types/index.d.ts","module":"dist/vue3-flexi-data-table.es.js","engines":{"npm":">=10.0.0","node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/vue3-flexi-data-table.js","require":"./dist/vue3-flexi-data-table.umd.cjs"},"./dist/*":"./dist/*","./style.css":"./dist/style.css","./components/*":{"types":"./dist/components/*.d.ts","import":"./dist/components/*.js","require":"./dist/components/*.cjs"}},"gitHead":"1f0f690135006adae5988c1193a14f23261874fd","private":false,"scripts":{"dev":"vite","test":"vitest run","build":"vue-tsc && vite build","preview":"vite preview","test:ui":"vitest --ui","prebuild":"rimraf dist","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"mvtcode","email":"macvantan@gmail.com"},"repository":{"url":"git+https://github.com/mvtcode/vue3-flexi-data-table.git","type":"git"},"_npmVersion":"10.7.0","description":"A flexible data table component for Vue 3","directories":{},"_nodeVersion":"18.20.4","dependencies":{"vue":"^3.3.0","uuid":"^11.1.0","core-js":"^3.41.0","dompurify":"^3.2.5","escape-html":"^1.0.3","vue3-popper":"^1.5.0","@vueuse/core":"^10.9.0","vue-draggable-next":"^2.2.1"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.69.0","vite":"^5.0.0","jsdom":"^22.1.0","rimraf":"^5.0.5","vitest":"^1.6.1","vue-tsc":"^1.8.0","typescript":"^5.2.0","@types/node":"^20.0.0","@vue/test-utils":"^2.4.6","vite-plugin-dts":"^3.8.1","@types/dompurify":"^3.2.0","@types/escape-html":"^1.0.4","@vitejs/plugin-vue":"^4.5.0","regenerator-runtime":"^0.14.1","@testing-library/vue":"^8.1.0"},"peerDependencies":{"vue":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/vue3-flexi-data-table_1.0.0_1744194679729_0.3299320644997048","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"vue3-flexi-data-table","private":false,"version":"1.0.1","author":{"name":"tanmv"},"type":"module","types":"dist/types/index.d.ts","main":"dist/vue3-flexi-data-table.umd.js","module":"dist/vue3-flexi-data-table.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/vue3-flexi-data-table.js","require":"./dist/vue3-flexi-data-table.umd.cjs"},"./dist/*":"./dist/*","./components/*":{"types":"./dist/components/*.d.ts","import":"./dist/components/*.js","require":"./dist/components/*.cjs"},"./style.css":"./dist/style.css"},"scripts":{"dev":"vite","prebuild":"rimraf dist","build":"vue-tsc && vite build","preview":"vite preview","test":"vitest run","test:coverage":"vitest run --coverage","test:ui":"vitest --ui"},"keywords":["vue","vue3","table","data-table","grid","sortable","selectable"],"repository":{"type":"git","url":"git+https://github.com/mvtcode/vue3-flexi-data-table.git"},"peerDependencies":{"vue":"^3.3.0"},"dependencies":{"@vueuse/core":"^10.9.0","core-js":"^3.41.0","dompurify":"^3.2.5","escape-html":"^1.0.3","uuid":"^11.1.0","vue":"^3.3.0","vue-draggable-next":"^2.2.1","vue3-popper":"^1.5.0"},"devDependencies":{"@testing-library/vue":"^8.1.0","@types/dompurify":"^3.2.0","@types/escape-html":"^1.0.4","@types/node":"^20.0.0","@vitejs/plugin-vue":"^4.5.0","@vue/test-utils":"^2.4.6","jsdom":"^22.1.0","regenerator-runtime":"^0.14.1","rimraf":"^5.0.5","sass":"^1.69.0","typescript":"^5.2.0","vite":"^5.0.0","vite-plugin-dts":"^3.8.1","vitest":"^1.6.1","vue-tsc":"^1.8.0"},"engines":{"npm":">=10.0.0","node":">=18.0.0"},"description":"A flexible data table component for Vue 3","license":"MIT","_id":"vue3-flexi-data-table@1.0.1","gitHead":"f355ab0ac6c6f45bbaa204a2faceca2bc78fea20","bugs":{"url":"https://github.com/mvtcode/vue3-flexi-data-table/issues"},"homepage":"https://github.com/mvtcode/vue3-flexi-data-table#readme","_nodeVersion":"18.20.4","_npmVersion":"10.7.0","dist":{"integrity":"sha512-nfI8CzKf2+drDLWS3pwK/KkJmTqhMsb/NAS5V/+v9UCIy1ILtpTyjMP2XSnrm8Fs+p7lXmYsu7+FUqk+j2vPnA==","shasum":"1cff91fd0b01a50c41a9b25e88f6610c51485624","tarball":"https://registry.npmjs.org/vue3-flexi-data-table/-/vue3-flexi-data-table-1.0.1.tgz","fileCount":34,"unpackedSize":1413105,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDVhyrfLQvLz+ZqU8o7NuAUDSc4Ljs8AKCu4xQNU34bYwIgRQG8lTczS7VOk1tqF6eiVo163biDP75D6p58FbIivSo="}]},"_npmUser":{"name":"mvtcode","email":"macvantan@gmail.com"},"directories":{},"maintainers":[{"name":"mvtcode","email":"macvantan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue3-flexi-data-table_1.0.1_1760513504535_0.8964775727849534"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-10T22:57:15.414Z","modified":"2025-10-15T07:31:44.996Z","0.0.1":"2024-04-10T22:57:15.720Z","0.0.2":"2024-04-10T23:02:37.623Z","0.0.3":"2024-04-10T23:06:36.460Z","0.0.4":"2024-04-10T23:10:04.307Z","0.0.5":"2024-04-10T23:16:46.508Z","0.0.6":"2024-04-10T23:21:59.635Z","0.0.7":"2024-04-10T23:30:48.351Z","0.0.8":"2024-04-10T23:32:33.817Z","0.0.9":"2024-04-10T23:42:54.241Z","0.0.10":"2024-04-11T01:20:20.861Z","0.0.11":"2024-04-11T01:24:01.088Z","0.0.12":"2024-04-11T01:37:08.757Z","0.0.13":"2024-04-11T01:42:21.852Z","0.0.14":"2024-04-11T02:26:11.578Z","0.0.15":"2024-04-11T02:28:22.362Z","0.0.16":"2024-04-11T02:38:56.344Z","0.0.17":"2024-04-11T08:20:59.275Z","0.0.18":"2024-04-11T08:23:19.737Z","0.0.19":"2024-04-11T08:24:43.168Z","0.0.20":"2024-04-11T15:55:05.497Z","0.1.0":"2024-04-11T16:07:53.013Z","0.1.1":"2024-04-11T16:39:17.764Z","0.1.2":"2024-04-12T02:48:31.525Z","0.1.3":"2024-04-12T03:23:53.688Z","0.1.4":"2024-04-15T07:14:38.539Z","0.1.5":"2024-04-16T03:54:11.858Z","0.1.6":"2024-04-16T03:59:48.552Z","0.1.7":"2024-04-16T04:07:21.938Z","0.1.8":"2024-04-17T04:31:28.744Z","0.1.9":"2024-04-24T10:22:16.534Z","0.1.10":"2024-04-24T10:24:30.570Z","0.1.11":"2024-04-25T04:23:48.745Z","0.1.12":"2024-04-25T06:32:46.049Z","0.1.13":"2024-05-21T01:58:48.409Z","0.1.14":"2024-05-21T07:16:56.106Z","0.1.15":"2024-06-03T06:23:58.504Z","0.1.16":"2024-06-03T07:27:34.307Z","0.1.17":"2024-06-03T07:31:44.943Z","0.1.18":"2024-12-12T09:10:34.411Z","0.1.19":"2025-03-30T12:57:08.103Z","0.1.20":"2025-03-31T02:34:39.892Z","0.1.21":"2025-04-01T10:19:32.334Z","0.1.22":"2025-04-01T10:33:28.429Z","0.1.23":"2025-04-04T08:33:02.578Z","1.0.0":"2025-04-09T10:31:19.898Z","1.0.1":"2025-10-15T07:31:44.774Z"},"bugs":{"url":"https://github.com/mvtcode/vue3-flexi-data-table/issues"},"author":{"name":"tanmv"},"license":"MIT","homepage":"https://github.com/mvtcode/vue3-flexi-data-table#readme","keywords":["vue","vue3","table","data-table","grid","sortable","selectable"],"repository":{"type":"git","url":"git+https://github.com/mvtcode/vue3-flexi-data-table.git"},"description":"A flexible data table component for Vue 3","maintainers":[{"name":"mvtcode","email":"macvantan@gmail.com"}],"readme":"# Vue3 Flexi Data Table\n\nA flexible data table component for Vue 3 with rich features.\n\n## Features\n\n- 🔄 Dynamic column configuration\n- 📱 Responsive design\n- ✨ Rich data display options\n- 🎯 Custom field rendering\n- 🔍 Column sorting\n  - Configure sortable fields in column editor\n  - Click header to cycle through sort states (ascending → descending → no sort)\n  - Only one column can be sorted at a time\n- ✅ Row selection\n  - Single/Multiple row selection\n  - Select all/Deselect all\n  - Get/Set selected rows programmatically\n- 🎨 Flexible styling\n  - Column alignment (horizontal & vertical)\n  - Custom width settings (fixed, min, max)\n  - Custom CSS for header and cells\n- 🏷️ Label system\n  - Create and manage custom labels\n  - Style labels with colors and sizes\n- 🛠️ Rich customization options\n  - Column reordering via drag & drop\n  - Column type support (data/select)\n  - Symbol and icon integration\n\n## Screenshot\n\n![Screenshot](./screenshot.png)\n\n## License\n\nMIT\n\n## Author\n\n### Tanmv\n\n- GitHub: [tanmv](https://github.com/mvtcode)\n\n### Contact for work\n\n- Email: tanmv@mpos.vn\n- Telegram: @tanmac\n- Skype: trai_12a1\n\n## Installation\n\n```bash\nnpm install vue3-flexi-data-table\n```\n\n## Components\n\n### FlexiTable\n\nThe main table component that displays data with configured columns.\n\n```vue\n<template>\n  <FlexiTable\n    ref=\"flexiTableRef\"\n    v-model=\"layoutId\"\n    :layouts=\"layouts\"\n    :templates=\"vfFields\"\n    :actions=\"actions\"\n    :icons=\"icons\"\n    :data=\"dataTable\"\n    :label-presets=\"labelPresets\"\n    @onCta=\"onCta\"\n    @error=\"onErrorHandle\"\n    @save=\"onSaveHandle\"\n    @remove=\"onRemoveHandle\"\n    @setDefault=\"onSetDefaultHandle\"\n    @selectChange=\"onSelectChange\"\n    @sortChange=\"onSortChange\"\n  >\n    <template #actions>\n      <!-- Custom actions slot -->\n    </template>\n  </FlexiTable>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { FlexiTable, VfType } from 'vue3-flexi-data-table';\n\nconst flexiTableRef = ref();\nconst layoutId = ref('default');\n\n// Define layouts\nconst layouts = ref([\n  {\n    id: 'default',\n    name: 'Default Layout',\n    isDefault: true,\n    columns: [\n      {\n        title: 'ID',\n        fieldCodes: ['id'],\n        sortField: 'id'\n      },\n      {\n        title: 'Name',\n        fieldCodes: ['name'],\n        sortField: 'name'\n      },\n      {\n        title: 'Status',\n        fieldCodes: ['status'],\n        sortField: 'status'\n      },\n      {\n        title: 'Actions',\n        fieldCodes: ['view', 'edit', 'delete']\n      }\n    ]\n  }\n]);\n\n// Define templates\nconst vfFields = ref([\n  {\n    vfCode: 'status',\n    vfType: VfType.LABEL,\n    vfTitle: 'Status',\n    vfAcutalField: 'status'\n  }\n]);\n\n// Define actions\nconst actions = ref([\n  {\n    vfCode: 'view',\n    vfType: VfType.ACTION,\n    vfTitle: 'View'\n  },\n  {\n    vfCode: 'edit',\n    vfType: VfType.ACTION,\n    vfTitle: 'Edit'\n  },\n  {\n    vfCode: 'delete',\n    vfType: VfType.ACTION,\n    vfTitle: 'Delete'\n  }\n]);\n\n// Sample data\nconst dataTable = ref([\n  {\n    id: 1,\n    name: 'John Doe',\n    status: 'active'\n  },\n  {\n    id: 2,\n    name: 'Jane Smith',\n    status: 'inactive'\n  }\n]);\n\n// Event handlers\nconst onCta = (action: string, row: any) => {\n  console.log('Action clicked:', action, row);\n};\n\nconst onErrorHandle = (error: Error) => {\n  console.error('Error:', error);\n};\n\nconst onSaveHandle = (layout: any) => {\n  console.log('Layout saved:', layout);\n};\n\nconst onRemoveHandle = (layoutId: string) => {\n  console.log('Layout removed:', layoutId);\n};\n\nconst onSetDefaultHandle = (layoutId: string) => {\n  console.log('Set default layout:', layoutId);\n};\n\nconst onSelectChange = (selectedRows: any[]) => {\n  console.log('Selected rows:', selectedRows);\n};\n\nconst onSortChange = (sort: { field: string; direction: string }) => {\n  console.log('Sort changed:', sort);\n};\n</script>\n```\n\n## Props\n\n### FlexiTable Props\n\n| Prop | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| modelValue | `string` | Yes | - | Layout ID (v-model) |\n| layouts | `Layout[]` | Yes | - | Array of table layouts |\n| templates | `VfField[]` | Yes | - | Field templates configuration |\n| actions | `VfField[]` | No | `[]` | Action buttons configuration |\n| icons | `VfField[]` | No | `[]` | Icon configuration |\n| data | `any[]` | Yes | - | Table data |\n| labelPresets | `LabelPreset[]` | No | `[]` | Predefined label styles |\n| height | `number` | No | `400` | Table height in pixels |\n| fixed | `boolean` | No | `false` | Enable fixed header |\n\n### Layout Interface\n\n```typescript\ninterface Layout {\n  id: string;\n  name: string;\n  isDefault?: boolean;\n  columns: Column[];\n}\n```\n\n### Column Interface\n\n```typescript\ninterface Column {\n  title: string;\n  fieldCodes: string[];\n  sortField?: string;\n  width?: string;\n  align?: 'left' | 'center' | 'right';\n  verticalAlign?: 'top' | 'middle' | 'bottom';\n}\n```\n\n### VfField Interface\n\n```typescript\ninterface VfField {\n  vfCode: string;\n  vfType: VfType;\n  vfTitle?: string;\n  vfAcutalField?: string;\n  vfRenderFunc?: (row: any, field: VfField, index: number) => string;\n}\n```\n\n## Events\n\n| Event | Parameters | Description |\n|-------|------------|-------------|\n| onCta | `(action: string, row: any)` | Triggered when an action button is clicked |\n| error | `(error: Error)` | Triggered when an error occurs |\n| save | `(layout: Layout)` | Triggered when a layout is saved |\n| remove | `(layoutId: string)` | Triggered when a layout is removed |\n| setDefault | `(layoutId: string)` | Triggered when a layout is set as default |\n| selectChange | `(selectedRows: any[])` | Triggered when row selection changes |\n| sortChange | `(sort: { field: string; direction: string })` | Triggered when sorting changes |\n\n## Methods\n\nYou can access these methods using a template ref:\n\n```typescript\nconst flexiTableRef = ref();\n\n// Get selected rows\nconst selectedRows = flexiTableRef.value.getSelected();\n\n// Set selected rows\nflexiTableRef.value.setSelect([0, 1, 2]);\n\n// Clear selection\nflexiTableRef.value.clearSelect();\n\n// Get current layout\nconst currentLayout = flexiTableRef.value.getCurrentLayout();\n\n// Set layout\nflexiTableRef.value.setLayout('layoutId');\n```\n\n## Styling\n\nThe component uses CSS variables for easy customization:\n\n```css\n:root {\n  --vft-primary-color: #1890ff;\n  --vft-border-color: #f0f0f0;\n  --vft-header-bg: #fafafa;\n  --vft-row-hover-bg: #f5f5f5;\n  --vft-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;\n}\n```\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b feature/my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin feature/my-new-feature`\n5. Submit a pull request\n\n## Support\n\nIf you have any questions or need help, please:\n\n1. Check the documentation\n2. Open an issue on GitHub\n3. Contact the author","readmeFilename":"README.md"}