{"_id":"@aivue/smart-datatable","_rev":"5-41fb494f1e5f69a34b9cb5c491c2ae1a","name":"@aivue/smart-datatable","dist-tags":{"latest":"2.0.3"},"versions":{"1.0.0":{"name":"@aivue/smart-datatable","version":"1.0.0","keywords":["vue","ai","datatable","table","grid","smart","intelligent","sorting","filtering","search","ui","components"],"author":{"name":"reachbrt"},"license":"MIT","_id":"@aivue/smart-datatable@1.0.0","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"homepage":"https://github.com/reachbrt/vueai#readme","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"dist":{"shasum":"12ebe0e793bb9e51597c90573b4dc26411292c37","tarball":"https://registry.npmjs.org/@aivue/smart-datatable/-/smart-datatable-1.0.0.tgz","fileCount":20,"integrity":"sha512-VWoceUzFdwUzK79yAKVK+AJaM+KWSLT812AQ6byAWMvlwJzPuabb8xXFW7/MZo6TVHVuHINVOhS0OMs/ZQrgZA==","signatures":[{"sig":"MEUCIHUeLjzIf0qKTH8VbLDEYWdFvn35sByeGhAxnIAIyMrkAiEAiYC2X7KIy2oQgZDng+7qW6GiUb+XJ0aIfX47FO3mAF8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":215578},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./style.css":"./dist/smart-datatable.css","./components/*":{"import":"./dist/components/*","require":"./dist/components/*"}},"gitHead":"25c5a7b9b54ebff7300463942ea87b49805da951","scripts":{"dev":"vite --watch","lint":"eslint \"src/**/*.{ts,vue}\"","test":"vitest run","build":"npm run clean && vite build && npm run postbuild","clean":"rm -rf dist","postbuild":"cp -r src/components dist/components && cp -r src/composables dist/composables && cp -r src/utils dist/utils && cp README.md dist/ && cp CHANGELOG.md dist/ 2>/dev/null || true","test:watch":"vitest"},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"repository":{"url":"git+https://github.com/reachbrt/vueai.git","type":"git","directory":"packages/smart-datatable"},"_npmVersion":"10.9.2","description":"AI-powered data table with intelligent sorting, filtering, and insights for Vue.js","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.0","tsup":"^8.0.0","eslint":"^8.56.0","vitest":"^1.0.0","typescript":"^5.3.0","@types/node":"^20.16.0","vite-plugin-dts":"^3.7.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^2.6.0 || ^3.0.0","@aivue/core":"^1.3.2"},"_npmOperationalInternal":{"tmp":"tmp/smart-datatable_1.0.0_1764901005033_0.9043059658186214","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aivue/smart-datatable","version":"1.0.1","keywords":["vue","ai","datatable","table","grid","smart","intelligent","sorting","filtering","search","ui","components"],"author":{"name":"reachbrt"},"license":"MIT","_id":"@aivue/smart-datatable@1.0.1","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"homepage":"https://github.com/reachbrt/vueai#readme","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"dist":{"shasum":"3a72faba01e5265736253f0594b2db660fcae1e0","tarball":"https://registry.npmjs.org/@aivue/smart-datatable/-/smart-datatable-1.0.1.tgz","fileCount":20,"integrity":"sha512-/E7v4LMzD+8qoRu65lt/BtuncB0bDbqPLFEW2rhOTrGsPTov2Ujw9LK9hukLiVpVtMlnxLHgX+KIvmNkz+z0eA==","signatures":[{"sig":"MEYCIQDaG9/hGVBpbEXFYo8DVLik3z8Mfz04vCcnoIA6HBMYTwIhAPooA8oUQL2xeSfm7bdI5TQ4LelqHaq7f5dFrGBpDd4x","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":216965},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./style.css":"./dist/smart-datatable.css","./components/*":{"import":"./dist/components/*","require":"./dist/components/*"}},"gitHead":"c3a2b65fec27d25b9f1287eadf3f18abfc6e225e","scripts":{"dev":"vite --watch","lint":"eslint \"src/**/*.{ts,vue}\"","test":"vitest run","build":"npm run clean && vite build && npm run postbuild","clean":"rm -rf dist","postbuild":"cp -r src/components dist/components && cp -r src/composables dist/composables && cp -r src/utils dist/utils && cp README.md dist/ && cp CHANGELOG.md dist/ 2>/dev/null || true","test:watch":"vitest"},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"repository":{"url":"git+https://github.com/reachbrt/vueai.git","type":"git","directory":"packages/smart-datatable"},"_npmVersion":"10.9.2","description":"AI-powered data table with intelligent sorting, filtering, and insights for Vue.js","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.0","tsup":"^8.0.0","eslint":"^8.56.0","vitest":"^1.0.0","typescript":"^5.3.0","@types/node":"^20.16.0","vite-plugin-dts":"^3.7.0","@vitejs/plugin-vue":"^5.0.0"},"peerDependencies":{"vue":"^2.6.0 || ^3.0.0","@aivue/core":"^1.3.2"},"_npmOperationalInternal":{"tmp":"tmp/smart-datatable_1.0.1_1764907582683_0.35510469546881374","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@aivue/smart-datatable","version":"2.0.1","keywords":["vue","ai","ai-native","datatable","table","grid","smart","intelligent","natural-language","llm","openai","insights","row-agents","transformations","sorting","filtering","search","ui","components"],"author":{"name":"reachbrt"},"license":"MIT","_id":"@aivue/smart-datatable@2.0.1","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"homepage":"https://github.com/reachbrt/vueai#readme","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"dist":{"shasum":"4fc03a56a0a498a7a7bd68020199faf07ead48fa","tarball":"https://registry.npmjs.org/@aivue/smart-datatable/-/smart-datatable-2.0.1.tgz","fileCount":38,"integrity":"sha512-FnP64NWxfCaDhzipLTlgi3fm1/vl3BEGzIXf+bcqypDS1Myer4fdXM3DAenfpXSaIEuBwfROYxk6QwcMKc65Iw==","signatures":[{"sig":"MEUCIQCg3NwuQW3iyvTU6IZpwMet1s7uQT0iCAARdQLpIXf5NgIgEuFY7RJ4VgLi2AS8p4agzYr9XXcOh1Pf6fl85eITJjw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":611686},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./style.css":"./dist/smart-datatable.css","./components/*":{"import":"./dist/components/*","require":"./dist/components/*"}},"gitHead":"2c1375e259fc33f94a09503be06d9c1b0d3106a7","scripts":{"dev":"vite --watch","lint":"eslint \"src/**/*.{ts,vue}\"","test":"vitest run","build":"npm run clean && vite build && npm run postbuild","clean":"rm -rf dist","test:e2e":"vitest run tests/e2e","postbuild":"cp -r src/components dist/components && cp -r src/composables dist/composables && cp -r src/utils dist/utils && cp README.md dist/ && cp CHANGELOG.md dist/ 2>/dev/null || true","test:unit":"vitest run tests/unit","test:watch":"vitest","test:coverage":"vitest run --coverage","test:integration":"vitest run tests/integration"},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"repository":{"url":"git+https://github.com/reachbrt/vueai.git","type":"git","directory":"packages/smart-datatable"},"_npmVersion":"10.9.2","description":"AI-Native Data Table for Vue.js - Natural language querying, auto-insights, row agents, and intelligent transformations","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.21.0","vue":"^3.5.0","tsup":"^8.0.0","jsdom":"^23.2.0","eslint":"^8.56.0","vitest":"^1.0.0","typescript":"^5.3.0","@types/node":"^20.16.0","@vue/test-utils":"^2.4.6","vite-plugin-dts":"^3.7.0","@vitejs/plugin-vue":"^5.0.0","@vitest/coverage-v8":"^1.6.1"},"peerDependencies":{"vue":"^2.6.0 || ^3.0.0","@aivue/core":"^1.3.2"},"_npmOperationalInternal":{"tmp":"tmp/smart-datatable_2.0.1_1765248100154_0.6520476508539204","host":"s3://npm-registry-packages-npm-production"}},"2.0.2":{"name":"@aivue/smart-datatable","version":"2.0.2","keywords":["vue","ai","ai-native","datatable","table","grid","smart","intelligent","natural-language","llm","openai","insights","row-agents","transformations","sorting","filtering","search","ui","components"],"author":{"name":"reachbrt"},"license":"MIT","_id":"@aivue/smart-datatable@2.0.2","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"homepage":"https://github.com/reachbrt/vueai#readme","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"dist":{"shasum":"871477b19c57aea4a2dbadb8ab359ef76bd95af9","tarball":"https://registry.npmjs.org/@aivue/smart-datatable/-/smart-datatable-2.0.2.tgz","fileCount":38,"integrity":"sha512-aLtNAKAo2dH+NZy9TaQKT1NgxHCgKsTqaFLfWKWzhFY4OMbiuPJk0BTxOE5iaSBDjoOMYvhiqiTbIyiYQBVfSA==","signatures":[{"sig":"MEQCIAn7hSNISGuMA/Rfso1X06nK23rndIrdvDys5uf81fAGAiAiSC7KXf5rj+d/U7DwptmxMPVxTPQ0YcrEn2M+n/M7rA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":611484},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./style.css":"./dist/smart-datatable.css","./components/*":{"import":"./dist/components/*","require":"./dist/components/*"}},"gitHead":"2567f0769c449fe4333ccc807a82444957dc0cd3","scripts":{"dev":"vite --watch","lint":"eslint \"src/**/*.{ts,vue}\"","test":"vitest run","build":"npm run clean && vite build && npm run postbuild","clean":"rm -rf dist","test:e2e":"vitest run tests/e2e","postbuild":"cp -r src/components dist/components && cp -r src/composables dist/composables && cp -r src/utils dist/utils && cp README.md dist/ && cp CHANGELOG.md dist/ 2>/dev/null || true","test:unit":"vitest run tests/unit","test:watch":"vitest","test:coverage":"vitest run --coverage","test:integration":"vitest run tests/integration"},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"repository":{"url":"git+https://github.com/reachbrt/vueai.git","type":"git","directory":"packages/smart-datatable"},"_npmVersion":"10.9.2","description":"AI-Native Data Table for Vue.js - Natural language querying, auto-insights, row agents, and intelligent transformations","directories":{},"_nodeVersion":"22.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.21.0","vue":"^3.5.0","tsup":"^8.0.0","jsdom":"^23.2.0","eslint":"^8.56.0","vitest":"^1.0.0","typescript":"^5.3.0","@types/node":"^20.16.0","@vue/test-utils":"^2.4.6","vite-plugin-dts":"^3.7.0","@vitejs/plugin-vue":"^5.0.0","@vitest/coverage-v8":"^1.6.1"},"peerDependencies":{"vue":"^2.6.0 || ^3.0.0","@aivue/core":"^1.3.2"},"_npmOperationalInternal":{"tmp":"tmp/smart-datatable_2.0.2_1765265297393_0.6495263581317146","host":"s3://npm-registry-packages-npm-production"}},"2.0.3":{"name":"@aivue/smart-datatable","version":"2.0.3","description":"AI-Native Data Table for Vue.js - Natural language querying, auto-insights, row agents, and intelligent transformations","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./style.css":"./dist/smart-datatable.css","./components/*":{"import":"./dist/components/*","require":"./dist/components/*"}},"scripts":{"build":"npm run clean && vite build && npm run postbuild","dev":"vite --watch","lint":"eslint \"src/**/*.{ts,vue}\"","clean":"rm -rf dist","test":"vitest run","test:unit":"vitest run tests/unit","test:integration":"vitest run tests/integration","test:e2e":"vitest run tests/e2e","test:watch":"vitest","test:coverage":"vitest run --coverage","postbuild":"cp -r src/components dist/components && cp -r src/composables dist/composables && cp -r src/utils dist/utils && cp README.md dist/ && cp CHANGELOG.md dist/ 2>/dev/null || true"},"keywords":["vue","ai","ai-native","datatable","table","grid","smart","intelligent","natural-language","llm","openai","insights","row-agents","transformations","sorting","filtering","search","ui","components"],"author":{"name":"reachbrt"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/reachbrt/vueai.git","directory":"packages/smart-datatable"},"homepage":"https://github.com/reachbrt/vueai#readme","bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"publishConfig":{"access":"public"},"peerDependencies":{"@aivue/core":"^1.3.2","vue":"^2.6.0 || ^3.0.0"},"devDependencies":{"@types/node":"^20.16.0","@vitejs/plugin-vue":"^5.0.0","@vitest/coverage-v8":"^1.6.1","@vue/test-utils":"^2.4.6","eslint":"^8.56.0","jsdom":"^23.2.0","tsup":"^8.0.0","tsx":"^4.21.0","typescript":"^5.3.0","vite-plugin-dts":"^3.7.0","vitest":"^1.0.0","vue":"^3.5.0"},"_id":"@aivue/smart-datatable@2.0.3","gitHead":"c54d7def7f2bad63a3e63881dd7ac15ba3e957a4","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-BFExZK1fiyiJRlVvtM7KQ9DjbJYM1+iIYNOaQ1dZXXFoFkYCkurrAy3BeB9/JLtYhx7ZCmeYKNPeOoKucagMdw==","shasum":"37207fd40baa7f3764f90baf6326155749501c0c","tarball":"https://registry.npmjs.org/@aivue/smart-datatable/-/smart-datatable-2.0.3.tgz","fileCount":38,"unpackedSize":611484,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDEYkwx4QTC9a0Qi+DgTRMOSSYARaULcSMu34osIyEOIAiBfgiqm0jAUfqPOK3BAgPlZ/4cXX/SnUQe0PL36h45fzw=="}]},"_npmUser":{"name":"aivue","email":"reachbrt@gmail.com"},"directories":{},"maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/smart-datatable_2.0.3_1768404834974_0.41882299763883424"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-05T02:16:44.943Z","modified":"2026-01-14T15:33:55.279Z","1.0.0":"2025-12-05T02:16:45.305Z","1.0.1":"2025-12-05T04:06:22.840Z","2.0.1":"2025-12-09T02:41:40.354Z","2.0.2":"2025-12-09T07:28:17.566Z","2.0.3":"2026-01-14T15:33:55.169Z"},"bugs":{"url":"https://github.com/reachbrt/vueai/issues"},"author":{"name":"reachbrt"},"license":"MIT","homepage":"https://github.com/reachbrt/vueai#readme","keywords":["vue","ai","ai-native","datatable","table","grid","smart","intelligent","natural-language","llm","openai","insights","row-agents","transformations","sorting","filtering","search","ui","components"],"repository":{"type":"git","url":"git+https://github.com/reachbrt/vueai.git","directory":"packages/smart-datatable"},"description":"AI-Native Data Table for Vue.js - Natural language querying, auto-insights, row agents, and intelligent transformations","maintainers":[{"name":"aivue","email":"reachbrt@gmail.com"}],"readme":"# @aivue/smart-datatable\n\n[![npm version](https://img.shields.io/npm/v/@aivue/smart-datatable.svg?style=flat-square)](https://www.npmjs.com/package/@aivue/smart-datatable)\n[![npm downloads](https://img.shields.io/badge/downloads-188%2Fmonth-CB3837?style=flat-square&logo=npm)](https://www.npmjs.com/package/@aivue/smart-datatable)\n[![NPM Downloads](https://img.shields.io/npm/d18m/%40aivue%2Fsmart-datatable)](https://www.npmjs.com/package/@aivue/smart-datatable)\n[![MIT License](https://img.shields.io/npm/l/@aivue/smart-datatable.svg?style=flat-square)](https://github.com/reachbrt/vueai/blob/main/LICENSE)\n\n[![Netlify Status](https://img.shields.io/netlify/5cb37fa7-9ee1-4af6-9ff4-d34ff0322ded?style=flat-square&logo=netlify)](https://aivue.netlify.app/)\n\n> **AI-Native Data Table for Vue.js** - The world's first truly AI-powered datatable that understands your data, not just displays it.\n\n## 🚀 What Makes This Different?\n\nUnlike traditional datatables that just display data, `@aivue/smart-datatable` is **AI-native** - it talks to LLM APIs and truly understands your table data:\n\n- 🗣️ **Natural Language Querying** - \"show orders from India last 30 days where total > 500\"\n- 🧠 **Auto-Insights** - One-click AI analysis with trends, outliers, and recommendations\n- 🤖 **Row Agents** - AI operations on individual rows (explain, predict, generate content)\n- ✨ **AI Transformations** - Intelligent data cleaning, enrichment, and standardization\n- 💬 **Chat Interface** - Conversational queries about your data\n- 📋 **OpenAPI Integration** - Auto-generate columns from API schemas\n\n## ✨ Features\n\n### 🤖 **AI-Native Features**\n\n#### 1. Natural Language Querying\nTransform how users interact with data - no more complex filter UIs:\n```vue\n<SmartDataTable\n  :data=\"orders\"\n  :ai-client=\"aiClient\"\n  :ai-search=\"true\"\n/>\n```\nUsers can type: *\"show only orders from India last 30 days where total > 500\"*\n\n#### 2. Auto-Insights & Summaries\nOne-click AI analysis of your data:\n```vue\n<SmartDataTable\n  :ai-insights=\"true\"\n  :ai-client=\"aiClient\"\n/>\n```\nGet instant insights on trends, outliers, patterns, and actionable recommendations.\n\n#### 3. AI Row Agents\nExecute AI operations on individual rows:\n```vue\n<SmartDataTable\n  :row-agents=\"[\n    {\n      id: 'explain',\n      label: 'Explain Record',\n      promptTemplate: 'Explain this order: {{customer}} ordered {{product}} for ${{total}}'\n    },\n    {\n      id: 'predict',\n      label: 'Predict Delivery',\n      promptTemplate: 'Predict delivery date for order {{id}} to {{country}}'\n    }\n  ]\"\n/>\n```\n\n#### 4. AI Data Transformations\nIntelligent data cleaning and enrichment:\n```vue\n<SmartDataTable\n  :ai-transformations=\"[\n    {\n      id: 'standardize',\n      label: 'Standardize Country Names',\n      scope: 'column',\n      targetColumn: 'country'\n    }\n  ]\"\n/>\n```\n\n#### 5. Chat with Your Table\nConversational data analysis:\n```vue\n<SmartDataTable\n  :show-chat=\"true\"\n  :ai-client=\"aiClient\"\n/>\n```\nAsk questions like: *\"What is the average order value per country?\"*\n\n#### 6. OpenAPI Integration\nAuto-generate columns from API schemas:\n```vue\n<SmartDataTable\n  :ai-infer-columns=\"true\"\n  :open-api-config=\"{\n    schemaUrl: 'https://api.example.com/openapi.json',\n    operationId: 'getOrders'\n  }\"\n/>\n```\n\n### 🎯 **Core Features**\n- 📊 **Smart Data Display** - Beautiful, responsive table with modern design\n- 📈 **Intelligent Sorting** - Multi-column sorting with type detection\n- 🎨 **Customizable Columns** - Show/hide columns, custom formatters\n- 📱 **Responsive Design** - Works perfectly on all devices\n- ✅ **Row Selection** - Single and multi-select with bulk actions\n- 📤 **Export Data** - Export to CSV, JSON, or Excel\n- 🎯 **Custom Actions** - Add custom row actions\n- 🎨 **Themes** - Light and dark theme support\n- 📄 **Pagination** - Smart pagination with customizable page sizes\n\n## 📦 Installation\n\n```bash\nnpm install @aivue/smart-datatable @aivue/core\n```\n\n## 🚀 Quick Start\n\n### Three Integration Levels\n\n#### 1️⃣ Zero-Config (Simplest)\nJust pass data and enable AI - columns are auto-generated!\n\n```vue\n<template>\n  <SmartDataTable\n    :data=\"orders\"\n    :ai-client=\"aiClient\"\n    :ai-search=\"true\"\n    :ai-insights=\"true\"\n  />\n</template>\n\n<script setup>\nimport { SmartDataTable } from '@aivue/smart-datatable';\nimport { AIClient } from '@aivue/core';\n\nconst aiClient = new AIClient({\n  provider: 'openai',\n  apiKey: 'your-api-key'\n});\n\nconst orders = [\n  { id: 1, customer: 'Acme Corp', total: 5000, country: 'USA' },\n  { id: 2, customer: 'Tech Inc', total: 3000, country: 'India' }\n];\n</script>\n```\n\n#### 2️⃣ Config-Driven (Recommended)\nFull control with AI features:\n\n```vue\n<template>\n  <SmartDataTable\n    :data=\"orders\"\n    :columns=\"columns\"\n    :ai-client=\"aiClient\"\n    :ai-search=\"true\"\n    :ai-insights=\"true\"\n    :row-agents=\"rowAgents\"\n    :ai-transformations=\"transformations\"\n    :show-chat=\"true\"\n    title=\"Sales Orders\"\n    :pagination=\"true\"\n    :selectable=\"true\"\n    @ai-query=\"handleAiQuery\"\n    @ai-insight=\"handleAiInsight\"\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { SmartDataTable } from '@aivue/smart-datatable';\nimport { AIClient } from '@aivue/core';\nimport '@aivue/smart-datatable/dist/smart-datatable.css';\n\nconst aiClient = new AIClient({\n  provider: 'openai',\n  apiKey: import.meta.env.VITE_OPENAI_API_KEY,\n  model: 'gpt-4'\n});\n\nconst orders = ref([\n  { id: 'ORD-001', customer: 'Acme Corp', total: 5000, country: 'USA', status: 'delivered' },\n  { id: 'ORD-002', customer: 'Tech Inc', total: 3000, country: 'India', status: 'shipped' }\n]);\n\nconst columns = [\n  { key: 'id', label: 'Order ID', sortable: true },\n  { key: 'customer', label: 'Customer', sortable: true },\n  { key: 'total', label: 'Total', sortable: true, type: 'number' },\n  { key: 'country', label: 'Country', sortable: true },\n  { key: 'status', label: 'Status', sortable: true }\n];\n\nconst rowAgents = [\n  {\n    id: 'explain',\n    label: 'Explain Order',\n    icon: '📝',\n    promptTemplate: 'Explain this order: {{customer}} ordered for ${{total}}, status: {{status}}'\n  },\n  {\n    id: 'predict',\n    label: 'Predict Delivery',\n    icon: '📅',\n    promptTemplate: 'Predict delivery date for order {{id}} to {{country}}'\n  }\n];\n\nconst transformations = [\n  {\n    id: 'standardize-countries',\n    label: 'Standardize Country Names',\n    scope: 'column',\n    targetColumn: 'country',\n    promptTemplate: 'Standardize these country names to ISO format: {{values}}'\n  }\n];\n\nfunction handleAiQuery(result) {\n  console.log('AI Query Result:', result);\n}\n\nfunction handleAiInsight(insights) {\n  console.log('AI Insights:', insights);\n}\n</script>\n```\n\n#### 3️⃣ Advanced (Full Control)\nCustom AI client and interceptors:\n\n```vue\n<script setup>\nimport { useAiTableQuery, useAiInsights } from '@aivue/smart-datatable';\n\n// Create custom AI client\nconst customAiClient = {\n  async chat(messages, options) {\n    // Your custom AI implementation\n    const response = await fetch('your-ai-endpoint', {\n      method: 'POST',\n      body: JSON.stringify({ messages, ...options })\n    });\n    return await response.text();\n  }\n};\n\n// Use composables directly for full control\nconst { queryToFilter, applyFilter } = useAiTableQuery({\n  aiClient: customAiClient,\n  schema: tableSchema,\n  onQueryResult: (result) => {\n    // Custom handling\n  }\n});\n</script>\n```\n\n## 📖 Usage Examples\n\n### With Custom Formatters\n\n```vue\n<script setup>\nconst columns = ref([\n  { \n    key: 'createdAt', \n    label: 'Created', \n    formatter: (value) => new Date(value).toLocaleDateString() \n  },\n  { \n    key: 'price', \n    label: 'Price', \n    formatter: (value) => `$${value.toFixed(2)}` \n  }\n]);\n</script>\n```\n\n### With Row Actions\n\n```vue\n<template>\n  <SmartDataTable\n    :data=\"users\"\n    :columns=\"columns\"\n    :actions=\"actions\"\n  />\n</template>\n\n<script setup>\nconst actions = ref([\n  { \n    label: 'Edit', \n    icon: '✏️', \n    handler: (row) => editUser(row) \n  },\n  { \n    label: 'Delete', \n    icon: '🗑️', \n    handler: (row) => deleteUser(row) \n  }\n]);\n</script>\n```\n\n### With Custom Cell Templates\n\n```vue\n<template>\n  <SmartDataTable :data=\"users\" :columns=\"columns\">\n    <template #cell-status=\"{ value }\">\n      <span :class=\"value === 'Active' ? 'badge-success' : 'badge-danger'\">\n        {{ value }}\n      </span>\n    </template>\n  </SmartDataTable>\n</template>\n```\n\n### Dark Theme\n\n```vue\n<template>\n  <SmartDataTable\n    :data=\"users\"\n    :columns=\"columns\"\n    theme=\"dark\"\n  />\n</template>\n```\n\n## 🎯 API Reference\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `data` | `Array` | `[]` | Array of data objects to display |\n| `columns` | `Column[]` | `[]` | Column definitions |\n| `title` | `String` | `''` | Table title |\n| `searchPlaceholder` | `String` | `'Search with AI...'` | Search input placeholder |\n| `emptyMessage` | `String` | `'No data available'` | Message when no data |\n| `pagination` | `Boolean` | `true` | Enable pagination |\n| `pageSize` | `Number` | `10` | Items per page |\n| `pageSizeOptions` | `Number[]` | `[5, 10, 25, 50, 100]` | Page size options |\n| `selectable` | `Boolean` | `false` | Enable row selection |\n| `actions` | `Action[]` | `[]` | Row action buttons |\n| `theme` | `'light' \\| 'dark'` | `'light'` | Theme |\n| `rowKey` | `String` | `'id'` | Unique row identifier |\n| `aiClient` | `AIClient` | `undefined` | AI client for insights |\n\n### Column Interface\n\n```typescript\ninterface Column {\n  key: string;                                    // Data property key\n  label: string;                                  // Column header label\n  sortable?: boolean;                             // Enable sorting (default: true)\n  visible?: boolean;                              // Column visibility (default: true)\n  formatter?: (value: any, row: any) => string;  // Custom value formatter\n  type?: 'string' | 'number' | 'date' | 'boolean'; // Data type\n}\n```\n\n### Action Interface\n\n```typescript\ninterface Action {\n  label: string;              // Action label\n  icon?: string;              // Action icon (emoji or text)\n  handler: (row: any) => void; // Click handler\n}\n```\n\n### Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `row-click` | `row: any` | Emitted when a row is clicked |\n| `selection-change` | `rows: any[]` | Emitted when selection changes |\n| `export` | `data: any[], format: string` | Emitted when data is exported |\n\n### Slots\n\n| Slot | Props | Description |\n|------|-------|-------------|\n| `cell-{columnKey}` | `{ row, value }` | Custom cell content for specific column |\n\n## 🎨 Styling\n\nThe component comes with beautiful default styles, but you can customize it:\n\n```css\n/* Override CSS variables */\n.smart-datatable {\n  --primary-color: #4f46e5;\n  --border-color: #e0e0e0;\n  --hover-bg: #f8f9fa;\n}\n```\n\n## 🤖 Using with AI\n\n### Get Data Insights\n\n```vue\n<template>\n  <SmartDataTable\n    ref=\"tableRef\"\n    :data=\"salesData\"\n    :columns=\"columns\"\n    :ai-client=\"aiClient\"\n  />\n  <button @click=\"getInsights\">Get AI Insights</button>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst tableRef = ref();\n\nasync function getInsights() {\n  // AI insights are automatically generated when clicking the AI button\n  // Or you can use the composable for custom logic\n}\n</script>\n```\n\n### Using the Composable\n\n```vue\n<script setup>\nimport { ref } from 'vue';\nimport { useSmartDataTable } from '@aivue/smart-datatable';\nimport { AIClient } from '@aivue/core';\n\nconst data = ref([...]);\nconst aiClient = new AIClient({ provider: 'openai', apiKey: '...' });\n\nconst {\n  filteredData,\n  sortedData,\n  search,\n  searchWithAI,\n  getInsights,\n  sort,\n  reset\n} = useSmartDataTable({ data, aiClient });\n\n// Use AI-powered search\nawait searchWithAI('find all active users from last month');\n\n// Get insights\nconst insights = await getInsights();\nconsole.log(insights);\n</script>\n```\n\n## 📤 Export Data\n\nThe component supports exporting data in multiple formats:\n\n```vue\n<template>\n  <SmartDataTable\n    :data=\"users\"\n    :columns=\"columns\"\n    @export=\"handleExport\"\n  />\n</template>\n\n<script setup>\nfunction handleExport(data, format) {\n  console.log(`Exporting ${data.length} rows as ${format}`);\n  // Data is automatically downloaded\n  // You can also handle it manually here\n}\n</script>\n```\n\n## 🎯 Advanced Examples\n\n### Complete Example with All Features\n\n```vue\n<template>\n  <div class=\"app\">\n    <SmartDataTable\n      :data=\"products\"\n      :columns=\"columns\"\n      :ai-client=\"aiClient\"\n      title=\"Product Inventory\"\n      search-placeholder=\"Search products...\"\n      empty-message=\"No products found\"\n      :pagination=\"true\"\n      :page-size=\"25\"\n      :page-size-options=\"[10, 25, 50, 100]\"\n      :selectable=\"true\"\n      :actions=\"actions\"\n      theme=\"light\"\n      row-key=\"id\"\n      @row-click=\"handleRowClick\"\n      @selection-change=\"handleSelectionChange\"\n      @export=\"handleExport\"\n    >\n      <!-- Custom cell for price -->\n      <template #cell-price=\"{ value }\">\n        <span class=\"price\">${{ value.toFixed(2) }}</span>\n      </template>\n\n      <!-- Custom cell for stock status -->\n      <template #cell-stock=\"{ value }\">\n        <span :class=\"value > 10 ? 'in-stock' : 'low-stock'\">\n          {{ value }} units\n        </span>\n      </template>\n    </SmartDataTable>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { AIClient } from '@aivue/core';\nimport { SmartDataTable } from '@aivue/smart-datatable';\nimport '@aivue/smart-datatable/style.css';\n\nconst aiClient = new AIClient({\n  provider: 'openai',\n  apiKey: import.meta.env.VITE_OPENAI_API_KEY\n});\n\nconst products = ref([\n  { id: 1, name: 'Laptop', category: 'Electronics', price: 999.99, stock: 15 },\n  { id: 2, name: 'Mouse', category: 'Accessories', price: 29.99, stock: 50 },\n  { id: 3, name: 'Keyboard', category: 'Accessories', price: 79.99, stock: 8 }\n]);\n\nconst columns = ref([\n  { key: 'id', label: 'ID', sortable: true },\n  { key: 'name', label: 'Product Name', sortable: true },\n  { key: 'category', label: 'Category', sortable: true },\n  { key: 'price', label: 'Price', sortable: true, type: 'number' },\n  { key: 'stock', label: 'Stock', sortable: true, type: 'number' }\n]);\n\nconst actions = ref([\n  { label: 'Edit', icon: '✏️', handler: editProduct },\n  { label: 'Delete', icon: '🗑️', handler: deleteProduct },\n  { label: 'View', icon: '👁️', handler: viewProduct }\n]);\n\nfunction handleRowClick(row) {\n  console.log('Row clicked:', row);\n}\n\nfunction handleSelectionChange(rows) {\n  console.log('Selected rows:', rows);\n}\n\nfunction handleExport(data, format) {\n  console.log(`Exported ${data.length} rows as ${format}`);\n}\n\nfunction editProduct(product) {\n  console.log('Edit:', product);\n}\n\nfunction deleteProduct(product) {\n  console.log('Delete:', product);\n}\n\nfunction viewProduct(product) {\n  console.log('View:', product);\n}\n</script>\n\n<style scoped>\n.price {\n  font-weight: 600;\n  color: #059669;\n}\n\n.in-stock {\n  color: #059669;\n}\n\n.low-stock {\n  color: #dc2626;\n  font-weight: 600;\n}\n</style>\n```\n\n## 🌟 Features in Detail\n\n### Intelligent Sorting\n- Automatic type detection (string, number, date)\n- Multi-column sorting support\n- Custom sort functions\n- Visual sort indicators\n\n### Smart Search\n- Real-time filtering across all columns\n- AI-powered natural language search\n- Case-insensitive matching\n- Highlights matching results\n\n### AI Insights\n- Automatic pattern detection\n- Trend analysis\n- Anomaly detection\n- Actionable recommendations\n\n### Responsive Design\n- Mobile-first approach\n- Touch-friendly controls\n- Horizontal scrolling on small screens\n- Adaptive pagination\n\n## 📦 Related Packages\n\nExplore the complete @aivue ecosystem:\n\n### 🧠 [@aivue/core](https://www.npmjs.com/package/@aivue/core)\nCore AI functionality for Vue.js components\n\n### 💬 [@aivue/chatbot](https://www.npmjs.com/package/@aivue/chatbot)\nAI-powered chat components for Vue.js\n\n### ✨ [@aivue/autosuggest](https://www.npmjs.com/package/@aivue/autosuggest)\nAI-powered suggestion components for Vue.js\n\n### 📝 [@aivue/smartform](https://www.npmjs.com/package/@aivue/smartform)\nAI-powered form validation for Vue.js\n\n### 🎭 [@aivue/emotion-ui](https://www.npmjs.com/package/@aivue/emotion-ui)\nEmotion-aware UI components with sentiment analysis\n\n### 📄 [@aivue/doc-intelligence](https://www.npmjs.com/package/@aivue/doc-intelligence)\nDocument processing and OCR with AI\n\n### 🧠 [@aivue/predictive-input](https://www.npmjs.com/package/@aivue/predictive-input)\nAI-powered predictive text input\n\n### 🔔 [@aivue/smart-notify](https://www.npmjs.com/package/@aivue/smart-notify)\nIntelligent notification system\n\n### 🎤 [@aivue/voice-actions](https://www.npmjs.com/package/@aivue/voice-actions)\nVoice command integration\n\n### 🖼️ [@aivue/image-caption](https://www.npmjs.com/package/@aivue/image-caption)\nAI-powered image captioning with OpenAI Vision models\n\n### 📊 [@aivue/analytics](https://www.npmjs.com/package/@aivue/analytics)\nAI-powered analytics and insights\n\n## 📄 License\n\nMIT © [Bharatkumar Subramanian](https://github.com/reachbrt)\n\n## ⭐ Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=reachbrt/vueai&type=Date)](https://star-history.com/#reachbrt/vueai&Date)\n\n","readmeFilename":"README.md"}