{"_id":"@bryceandy/vue-tan-table","_rev":"3-3d58a86f3af75e0caf5c2fbc4b01a4ad","name":"@bryceandy/vue-tan-table","dist-tags":{"latest":"0.0.7","beta":"0.0.6-beta.0"},"versions":{"0.0.5":{"name":"@bryceandy/vue-tan-table","version":"0.0.5","keywords":["vue","table","tanstack","datatable","vue3"],"author":{"name":"Bryce Kidayi","email":"hello@bryceandy.com"},"license":"MIT","_id":"@bryceandy/vue-tan-table@0.0.5","maintainers":[{"name":"bryceandy","email":"hello@bryceandy.com"}],"dist":{"shasum":"9fa2f2fdff5c752da3662ea20129fd35ba998677","tarball":"https://registry.npmjs.org/@bryceandy/vue-tan-table/-/vue-tan-table-0.0.5.tgz","fileCount":21,"integrity":"sha512-Gd0CeaIhp0A/F0TGS9m2PABRcrg8ZdFDB6CewQRc72wwZCoBCeVLQLDjPNFEMNYnl6DeVhbIlv4fi+ljGWppHQ==","signatures":[{"sig":"MEYCIQD1vVgnpwbaNeLtxUxJphlQ2QqANadn7Nu2OzbwB87F+QIhAOx6QttvHZ9dNvOqquUPMTDN+Hd5YTNZNFlNdkkCJJVI","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":168748},"main":"./dist/vue-tan-table.umd.js","type":"module","_from":"file:bryceandy-vue-tan-table-0.0.5.tgz","types":"./dist/index.d.ts","module":"./dist/vue-tan-table.es.js","scripts":{"lint":"eslint 'src/**/*.{js,ts,vue}' --fix","test":"vitest --config vite.config.ts","build":"vite build"},"_npmUser":{"name":"bryceandy","email":"hello@bryceandy.com"},"_resolved":"/private/var/folders/9g/jcjvwytj05b40ntc7x0zny0c0000gn/T/7f35bb3d514e04b9e4abea2f192daf66/bryceandy-vue-tan-table-0.0.5.tgz","_integrity":"sha512-Gd0CeaIhp0A/F0TGS9m2PABRcrg8ZdFDB6CewQRc72wwZCoBCeVLQLDjPNFEMNYnl6DeVhbIlv4fi+ljGWppHQ==","_npmVersion":"10.9.3","description":"Core Vue 3 table components built with TanStack Table","directories":{},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.0","jsdom":"^26.1.0","eslint":"^9.0.0","vitest":"^3.0.0","typescript":"^5.0.0","@types/node":"^22.17.1","@vue/test-utils":"^2.4.6","vite-plugin-dts":"^4.0.0","eslint-plugin-vue":"^10.0.0","vue-eslint-parser":"^10.2.0","@vitejs/plugin-vue":"^6.0.0","@tanstack/vue-table":"^8.21.0","@typescript-eslint/parser":"^8.39.1","@typescript-eslint/eslint-plugin":"^8.39.1"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-tan-table_0.0.5_1755357928077_0.9583126469083247","host":"s3://npm-registry-packages-npm-production"}},"0.0.6-beta.0":{"name":"@bryceandy/vue-tan-table","version":"0.0.6-beta.0","keywords":["vue","table","tanstack","datatable","vue3"],"author":{"name":"Bryce Kidayi","email":"hello@bryceandy.com"},"license":"MIT","_id":"@bryceandy/vue-tan-table@0.0.6-beta.0","maintainers":[{"name":"bryceandy","email":"hello@bryceandy.com"}],"dist":{"shasum":"cf5accc672ad47a0d15624712d352fbd7e4f0793","tarball":"https://registry.npmjs.org/@bryceandy/vue-tan-table/-/vue-tan-table-0.0.6-beta.0.tgz","fileCount":21,"integrity":"sha512-dhFNj9ajg0zZoSxm7kX0OnLQqW0dmgvSsal0emPfNPY8vu4UeOY7N7V0OiFpoJGjph2xYPVNJhdJhiSBt+VwIw==","signatures":[{"sig":"MEQCIDr1ca3Pe2+ZqdNr33QnO+qjo7f5yP1R2a9YQwokl6sgAiBTphzEEahuqGtN3qBUdC+tKQztPNAm3GYhhiEeYQRSqw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":174341},"main":"./dist/vue-tan-table.umd.js","type":"module","_from":"file:bryceandy-vue-tan-table-0.0.6-beta.0.tgz","types":"./dist/index.d.ts","module":"./dist/vue-tan-table.es.js","scripts":{"lint":"eslint 'src/**/*.{js,ts,vue}' --fix","test":"vitest --config vite.config.ts","build":"vite build"},"_npmUser":{"name":"bryceandy","email":"hello@bryceandy.com"},"_resolved":"/private/var/folders/9g/jcjvwytj05b40ntc7x0zny0c0000gn/T/b7bd2be5b02ef6ed689c8ea121d6a5b4/bryceandy-vue-tan-table-0.0.6-beta.0.tgz","_integrity":"sha512-dhFNj9ajg0zZoSxm7kX0OnLQqW0dmgvSsal0emPfNPY8vu4UeOY7N7V0OiFpoJGjph2xYPVNJhdJhiSBt+VwIw==","_npmVersion":"10.9.3","description":"Core Vue 3 table components built with TanStack Table","directories":{},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^7.0.0","jsdom":"^26.1.0","eslint":"^9.0.0","vitest":"^3.0.0","typescript":"^5.0.0","@types/node":"^22.17.1","@vue/test-utils":"^2.4.6","vite-plugin-dts":"^4.0.0","eslint-plugin-vue":"^10.0.0","vue-eslint-parser":"^10.2.0","@vitejs/plugin-vue":"^6.0.0","@tanstack/vue-table":"^8.21.0","@typescript-eslint/parser":"^8.39.1","@typescript-eslint/eslint-plugin":"^8.39.1"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-tan-table_0.0.6-beta.0_1755376948098_0.5559730609378992","host":"s3://npm-registry-packages-npm-production"}},"0.0.7":{"name":"@bryceandy/vue-tan-table","version":"0.0.7","description":"Core Vue 3 table components built with TanStack Table","main":"./dist/vue-tan-table.umd.js","module":"./dist/vue-tan-table.es.js","type":"module","types":"./dist/index.d.ts","peerDependencies":{"vue":"^3.0.0"},"devDependencies":{"@tanstack/vue-table":"^8.21.0","@types/node":"^22.17.1","@typescript-eslint/eslint-plugin":"^8.39.1","@typescript-eslint/parser":"^8.39.1","@vitejs/plugin-vue":"^6.0.0","@vue/test-utils":"^2.4.6","eslint":"^9.0.0","eslint-plugin-vue":"^10.0.0","jsdom":"^26.1.0","typescript":"^5.0.0","vite":"^7.0.0","vite-plugin-dts":"^4.0.0","vitest":"^3.0.0","vue-eslint-parser":"^10.2.0"},"keywords":["vue","table","tanstack","datatable","vue3"],"author":{"name":"Bryce Kidayi","email":"hello@bryceandy.com"},"license":"MIT","scripts":{"build":"vite build","lint":"eslint 'src/**/*.{js,ts,vue}' --fix","test":"vitest --config vite.config.ts"},"_id":"@bryceandy/vue-tan-table@0.0.7","_integrity":"sha512-Pp8GD46nvagJjptalGRY0nIDLiuZBCBkQK3ic3Z7oeSAXQQm03ikgmlpabI7rD3gGMjYZ7K+ADojqgZU0p4E3A==","_resolved":"/private/var/folders/9g/jcjvwytj05b40ntc7x0zny0c0000gn/T/0462435a4b92ce4e4070be07d9b0ca27/bryceandy-vue-tan-table-0.0.7.tgz","_from":"file:bryceandy-vue-tan-table-0.0.7.tgz","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-Pp8GD46nvagJjptalGRY0nIDLiuZBCBkQK3ic3Z7oeSAXQQm03ikgmlpabI7rD3gGMjYZ7K+ADojqgZU0p4E3A==","shasum":"f19afc735708a19c4c3db2ef747061163349791d","tarball":"https://registry.npmjs.org/@bryceandy/vue-tan-table/-/vue-tan-table-0.0.7.tgz","fileCount":21,"unpackedSize":175485,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAfzm+fvxB9T77SHXs16pIIT7D0JsLeE05IYFEu5m4sPAiEAwboK78tcyabH6p9TMjlkR0HDoMz5qJdqXeQE+bjaHrs="}]},"_npmUser":{"name":"bryceandy","email":"hello@bryceandy.com"},"directories":{},"maintainers":[{"name":"bryceandy","email":"hello@bryceandy.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-tan-table_0.0.7_1755548898042_0.07953174052052336"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-16T15:25:28.016Z","modified":"2025-08-18T20:28:18.430Z","0.0.5":"2025-08-16T15:25:28.323Z","0.0.6-beta.0":"2025-08-16T20:42:28.283Z","0.0.7":"2025-08-18T20:28:18.237Z"},"author":{"name":"Bryce Kidayi","email":"hello@bryceandy.com"},"license":"MIT","keywords":["vue","table","tanstack","datatable","vue3"],"description":"Core Vue 3 table components built with TanStack Table","maintainers":[{"name":"bryceandy","email":"hello@bryceandy.com"}],"readme":"# Vue Tan Table\n\n[![Downloads](https://img.shields.io/npm/dm/@bryceandy/vue-tan-table.svg)](https://www.npmjs.com/package/@bryceandy/vue-tan-table)\n[![Version](https://img.shields.io/npm/v/@bryceandy/vue-tan-table.svg)](https://www.npmjs.com/package/@bryceandy/vue-tan-table)\n[![Tests](https://github.com/brycandy/vue-tan-table/actions/workflows/test.yml/badge.svg)](https://github.com/brycandy/vue-tan-table/actions/workflows/test.yml/badge.svg)\n[![License](https://img.shields.io/github/license/@bryceandy/vue-tan-table.svg)](https://github.com/bryceandy/vue-tan-table/blob/main/LICENSE)\n\nA Vue 3 table component powered by TanStack Table\n\nFor Nuxt 3+ documentation [click here](https://github.com/bryceandy/vue-tan-table/tree/main/packages/nuxt)\n\n## Installation\n\n```\npnpm add @bryceandy/vue-tan-table\n```\n\n## Configuration\n\nYou can customize the table using a variety of options.\n\n1. Using configurations on component registration;\n\n```js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { VueTanTable } from '@bryceandy/vue-tan-table';\nimport '@bryceandy/vue-tan-table/dist/vue-tan-table.css';\n\ncreateApp(App)\n  .use(VueTanTable, {\n    primaryColor: '#ff6600',\n    pagination: {\n      // string of HTML content or a vue component\n      prevIcon: '<-',\n      nextIcon: '->',\n    }\n  })\n  .mount('#app');\n\n// DataTable will be available without importing\n<template>\n  <DataTable :data=\"data\" :columns=\"columns\" />\n</template>\n```\n\n2. Using configurations manually at runtime\n\n```js\n<script setup>\nimport { DataTable, configureVueTanTable } from '@bryceandy/vue-tan-table'\nimport '@bryceandy/vue-tan-table/dist/vue-tan-table.css'\n\nconfigureVueTanTable({\n  primaryColor: '#0099ff',\n  pagination: false\n})\n</script>\n```\n\n## Usage\n\n```js\n<script setup>\nimport { DataTable } from '@bryceandy/vue-tan-table'\nimport '@bryceandy/vue-tan-table/dist/vue-tan-table.css'\n\nconst columns = [\n  { header: 'Name', accessorKey: 'name' },\n  { header: 'Age', accessorKey: 'age' }\n]\nconst data = [\n  { name: 'Alice', age: 25 },\n  { name: 'Bob', age: 30 }\n]\n</script>\n\n<template>\n  <DataTable :data :columns :remote-data=\"false\" />\n</template>\n```\n\n## API\n\n### VueTanTable Configuration\n\n```ts\ninterface VueTanTableConfig {\n  primaryColor?: string\n  pagination?: VueTanTablePaginationConfig | false\n}\n\ninterface VueTanTablePaginationConfig {\n  prevIcon?: string | Component\n  nextIcon?: string | Component\n  ariaLabels?: {\n    previous?: string\n    next?: string\n    page?: (page: number) => string\n  }\n}\n```\n\n### DataTable Props\n\n```ts\ninterface DataTableProps {\n  data: TData[]\n  columns: ColumnDef<TData, TValue>[]\n  pageCount?: number\n  pageSize?: number\n  paginationState?: PaginationState\n  sortingState?: SortingState\n  filtersState?: ColumnFiltersState\n  rowSelectionState?: RowSelectionState\n  getRowId?: (row: TData) => string\n  onPaginationChange?: OnChangeFn<PaginationState>\n  onSortingChange?: OnChangeFn<SortingState>\n  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>\n  onRowSelectionChange?: OnChangeFn<RowSelectionState>\n  remoteData?: boolean\n}\n```\n\n|Prop | Details |\n|:---|:---|\n| `data` | An array of objects containing the data to be rendered. When `remoteData` is set to true, only list the items of a particular page coming from your API. |\n| `columns` | An array of column definitions using [Tanstack Table's API](https://tanstack.com/table/v8/docs/guide/column-defs)  |\n| `pageCount` | An integer value used with `remoteData` to let the component aware how many items are from your API |\n| `pageSize` | The number of items to be rendered on your table per page. Default is 10. |\n| `paginationState` | When using `remoteData` you provide this `ref` in order to take control of pagination and make API calls when state changes. |\n| `sortingState` | When using `remoteData` you provide this `ref` in order to take control of your sorting and apply API sorting parameters when state changes. |\n| `filtersState` | When using `remoteData` you provide this `ref` in order to take control of your filtering and apply API filtering parameters when state changes. |\n| `rowSelectionState` | Provide this `ref` when you want to track state changes of row-selection |\n| `getRowId` | A function to determine the unique column that may be used for row-selection. It should return the string format of the column from the row object property  |\n| `onPaginationChange` | Callback used with `remoteData` to manually update pagination state and side-effects |\n| `onSortingChange` | Callback used with `remoteData` to manually update sorting state and side-effects |\n| `onColumnFiltersChange` | Callback used with `remoteData` to manually update filter state and side-effects |\n| `onRowSelectionChange` | Callback to handle changes after row-selection state updates |\n| `remoteData` | Boolean value to indicate whether data comes from a remote source or local |\n\n## Examples\n\nVisit the [examples folder](https://github.com/bryceandy/vue-tan-table/tree/main/packages/core/examples) to find simple to complex usages.\n\nAll the examples can be visualized on the [library documentation](https://bryceandy.com/vue-data-table/examples).\n\n## Contributing\n\nContributions, issues, and feature requests are welcome!\nFeel free to check the [issues page](https://github.com/bryceandy/vue-tan-table/issues) if you'd like to start there.\n\n### How to Contribute\n\n1. **Fork** the repository\n2. **Clone** you fork:\n```bash\ngit clone https://github.com/bryceandy/vue-tan-table.git\n```\n3. **Create a branch** for your feature/fix:\n```bash\ngit checkout -b feature/awesome-feature\n```\n4. **Make your changes, add unit tests** and commit. For the core vue library changes will be made in the `packages/core` directory:\n```bash\ngit commit -m '[Core] Add awesome feature'\n```\n5. Push your branch:\n```bash\ngit push origin feature/awesome-feature\n```\n6. Open a pull request.\n\n### Guidelines\n\n - Follow the existing **code style** and conventions\n - Write **clear commit messages**\n - Add/update **tests** if applicable\n - Keep pull requests **small and focused**","readmeFilename":"README.md"}