{"_id":"vue-screener","_rev":"92-6429cc9ed59e977535a912752b7acf63","name":"vue-screener","dist-tags":{"latest":"0.16.2"},"versions":{"0.0.1":{"name":"vue-screener","version":"0.0.1","_id":"vue-screener@0.0.1","maintainers":[{"name":"francisashley","email":"francisashley.dev@gmail.com"}],"dist":{"shasum":"7a3098e9d2e69dbebeecc4311caea693bdfacdde","tarball":"https://registry.npmjs.org/vue-screener/-/vue-screener-0.0.1.tgz","fileCount":2,"integrity":"sha512-2Y9huOTv/55E9GFQ5jTVkhwU9hVIRzoKxexql9YmCLV+LskBbpoc4SwPCPAxP1RNyOnVPaC6RJ2SodX5ODi07A==","signatures":[{"sig":"MEYCIQCFsFlO8CQeazxLl/3oPfzMwRCaK8Nzj9zt7n2qRTF2lAIhAJooEy0of92hkmPa01JKZ9J/nCla/73Gx8luiviymZMe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4180},"type":"module","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/vue-screener.js","require":"./dist/vue-screener.umd.cjs"},"./style.css":"./dist/style.css"},"gitHead":"6b98f42dc8c08331fececc253a270e9df39312d4","scripts":{"dev":"vite","build":"vite build && vue-tsc --emitDeclarationOnly","types":"vue-tsc","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"francisashley","email":"francisashley.dev@gmail.com"},"_npmVersion":"9.5.1","description":"
\"Logo\"
Easily search and filter javascript arrays
Documentation
","directories":{},"_nodeVersion":"18.16.0","dependencies":{"vue":"^3.3.4"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.66.1","vite":"^4.4.5","react":"^18.2.0","vitest":"^0.34.3","vue-tsc":"^1.8.5","react-dom":"^18.2.0","storybook":"^7.4.0","typescript":"^5.0.2","@storybook/vue3":"^7.4.0","natural-orderby":"^2.0.3","@storybook/blocks":"^7.4.0","@vitejs/plugin-vue":"^4.2.3","@storybook/vue3-vite":"^7.4.0","@storybook/addon-links":"^7.4.0","@storybook/testing-library":"^0.2.0","@storybook/addon-essentials":"^7.4.0","@storybook/addon-interactions":"^7.4.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-screener_0.0.1_1694037183284_0.6294826074178685","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"vue-screener","version":"0.0.2","_id":"vue-screener@0.0.2","maintainers":[{"name":"francisashley","email":"francisashley.dev@gmail.com"}],"dist":{"shasum":"5c00c7279965972ded623fda1f39b260780cc18a","tarball":"https://registry.npmjs.org/vue-screener/-/vue-screener-0.0.2.tgz","fileCount":30,"integrity":"sha512-6zTWxLgUUpSza6gZRqen+AlYf9zkXf8z9XVHi92sgzcsYjPTXeqPs2edjqJIypJkFaZZOfr9kpUMZDz+nv7fpw==","signatures":[{"sig":"MEUCIQD8wjYEIzVWyA/vtZdCaojHXoSG5P5ZZNdujirkR92qmAIgDxa+Ra0H2Z6MTmtMboENwOD9ieEwfv4j/FRV7o5P5A0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":800302},"type":"module","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/vue-screener.js","require":"./dist/vue-screener.umd.cjs"},"./style.css":"./dist/style.css"},"gitHead":"1bca3e005c9bf6ee0f6e24ff9cf7d71d0fc531e0","scripts":{"dev":"vite","build":"vite build && vue-tsc --emitDeclarationOnly","types":"vue-tsc","preview":"vite preview","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"francisashley","email":"francisashley.dev@gmail.com"},"_npmVersion":"9.5.1","description":"
\"Logo\"
Easily search and filter javascript arrays
\n \"Logo\"\n
\n Easily search and filter data in Vue3\n
\n Documentation\n
\n\n## Install\n\n```bash\nnpm install vue-screener\n# or\nyarn add vue-screener\n```\n\n## Basic Usage\n\n```vue\n\n\n\n```\n\n## Remote Control\n\nControl the state externally using the `useVueScreener` hook:\n\n```vue\n\n\n\n```\n\n## Component Props\n\nYou can also configure options directly through VueScreener component props:\n\n```vue\n\n```\n\n## Custom Styling\n\nYou can customize the appearance and layout by composing your own table using individual components. Here's an example:\n\n```vue\n\n\n\n```\n\n## Configuration Options\n\n### useVueScreener Options\n\n* `contentHeight`: String - CSS height value for fixed height with scroll (optional)\n* `defaultCurrentPage`: Number (default: 1)\n* `defaultRowsPerPage`: Number (default: 10)\n* `defaultSortField`: String\n* `defaultSortDirection`: 'asc' | 'desc'\n* `columns`: Column configuration object\n* `disableSearchHighlight`: Boolean (default: false)\n* `loading`: Boolean (default: false)\n\n### VueScreener Props\n\n* `data`: Array of data (optional)\n* `screener`: VueScreener state from useVueScreener (optional)\n* `class`: String (optional)\n* `contentHeight`: String - CSS height value for fixed height with scroll (optional)\n* `defaultCurrentPage`: Number (default: 1)\n* `defaultRowsPerPage`: Number (default: 10)\n* `defaultSortField`: String\n* `defaultSortDirection`: 'asc' | 'desc'\n* `columns`: Column configuration object\n* `disableSearchHighlight`: Boolean (default: false)\n* `loading`: Boolean (default: false)\n* `title`: String (optional)\n\n### Column Configuration\n\n```ts\ninterface Column {\n width?: string | number\n label?: string\n order?: number\n isPinned?: boolean\n isSortable?: boolean\n hidden?: boolean\n format?: (value: any, row: Row) => string\n}\n```\n\n### Updating Options After Initialization\n\nYou can update options after initialization via the props or using the setOptions action:\n\n```ts\nscreener.actions.setOptions({\n contentHeight: '600px',\n disableSearchHighlight: true,\n loading: true\n})\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}