{"id":12486,"library":"vue-good-table-next","title":"Vue Good Table Next","description":"vue-good-table-next is a data table component designed for Vue 3.x, offering essential functionalities such as sorting, column filtering, pagination, and various customization options. It serves as a direct port of the popular `vue-good-table` library, originally developed for Vue 2.x, bringing its features to the Vue 3 ecosystem. The package is currently at version 0.2.2 and, despite its README stating \"work is still in progress,\" has not received a new release in approximately two years. This indicates a potentially slow or halted development cadence. While the project describes itself as \"stable enough to start developing new projects,\" it explicitly warns against production usage. Its key differentiators include its robust feature set and straightforward integration for Vue 3 applications, but prospective users should be aware of its early development stage and the lack of recent updates.","status":"maintenance","version":"0.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/borisflesch/vue-good-table-next","tags":["javascript","vue","vuejs","table","datatable"],"install":[{"cmd":"npm install vue-good-table-next","lang":"bash","label":"npm"},{"cmd":"yarn add vue-good-table-next","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-good-table-next","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Used for global registration via `app.use()` in Vue 3, similar to `Vue.use()` in Vue 2.","wrong":"const VueGoodTablePlugin = require('vue-good-table-next');","symbol":"VueGoodTablePlugin","correct":"import VueGoodTablePlugin from 'vue-good-table-next';"},{"note":"Used for local component registration within a Vue component's `components` option.","wrong":"import VueGoodTable from 'vue-good-table-next';","symbol":"VueGoodTable","correct":"import { VueGoodTable } from 'vue-good-table-next';"},{"note":"Required to apply the default styling of the table. Ensure your build system processes CSS imports.","symbol":"Styles","correct":"import 'vue-good-table-next/dist/vue-good-table-next.css'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport VueGoodTablePlugin from 'vue-good-table-next';\nimport 'vue-good-table-next/dist/vue-good-table-next.css';\n\nconst app = createApp(App);\napp.use(VueGoodTablePlugin);\napp.mount('#app');\n\n// App.vue\n<template>\n  <div id=\"app\">\n    <h1>My Data Table</h1>\n    <vue-good-table\n      :columns=\"columns\"\n      :rows=\"rows\"\n      :line-numbers=\"true\"\n      :sort-options=\"{\n        enabled: true,\n        initialSortBy: {\n          field: 'name',\n          type: 'asc'\n        }\n      }\"\n      :pagination-options=\"{\n        enabled: true,\n        perPage: 5,\n        perPageDropdown: [5, 10, 20]\n      }\"\n      :search-options=\"{\n        enabled: true\n      }\"\n    />\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst columns = ref([\n  { label: 'Name', field: 'name', sortable: true, filterOptions: { enabled: true } },\n  { label: 'Age', field: 'age', type: 'number', sortable: true, filterOptions: { enabled: true } },\n  { label: 'City', field: 'city', sortable: true, filterOptions: { enabled: true } },\n  { label: 'Score', field: 'score', type: 'percentage', sortable: true, filterOptions: { enabled: true } }\n]);\n\nconst rows = ref([\n  { id: 1, name: 'John Doe', age: 30, city: 'New York', score: 0.85 },\n  { id: 2, name: 'Jane Smith', age: 24, city: 'London', score: 0.92 },\n  { id: 3, name: 'Peter Jones', age: 45, city: 'Paris', score: 0.78 },\n  { id: 4, name: 'Alice Brown', age: 29, city: 'Berlin', score: 0.95 },\n  { id: 5, name: 'Robert Green', age: 37, city: 'Rome', score: 0.70 },\n  { id: 6, name: 'Sarah White', age: 22, city: 'Madrid', score: 0.88 },\n  { id: 7, name: 'David Black', age: 50, city: 'Tokyo', score: 0.65 },\n  { id: 8, name: 'Emily Blue', age: 33, city: 'Sydney', score: 0.90 },\n  { id: 9, name: 'Michael Red', age: 41, city: 'Toronto', score: 0.73 },\n  { id: 10, name: 'Olivia Gray', age: 27, city: 'Amsterdam', score: 0.81 }\n]);\n</script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n.vgt-table {\n  margin: 20px auto;\n  width: 90%;\n}\n</style>","lang":"vue","description":"Demonstrates global registration of VueGoodTablePlugin and basic usage of the <vue-good-table> component with columns, rows, sorting, pagination, and search features in a Vue 3 setup with Composition API and script setup."},"warnings":[{"fix":"Use with caution in non-critical applications. Regularly monitor the GitHub repository for updates and breaking changes. Consider locking the package version to avoid unexpected issues.","message":"The package is explicitly marked as 'not yet intended to be used in a production environment' due to ongoing development and potential short-term changes.","severity":"gotcha","affected_versions":">=0.2.2"},{"fix":"Evaluate the project's long-term viability before committing to its use. Be prepared to fork or maintain the library yourself if critical bugs arise or new Vue features are needed.","message":"Despite the README stating 'work is still in progress,' the package (v0.2.2) has not been updated in approximately two years. This suggests development may have stalled, and the 'work in progress' statement might be outdated.","severity":"breaking","affected_versions":">=0.2.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you either globally register the plugin (`app.use(VueGoodTablePlugin)`) in your main.js/main.ts, or locally import and register `{ VueGoodTable }` in your component's `components` option.","cause":"The `VueGoodTable` component was not properly registered or imported into your Vue application/component.","error":"Failed to resolve component: vue-good-table"},{"fix":"Verify the package is installed (`npm install vue-good-table-next` or `yarn add vue-good-table-next`). Confirm the import path `import 'vue-good-table-next/dist/vue-good-table-next.css'` is correct and your bundler (e.g., Vite, Webpack) is set up to process CSS files.","cause":"The CSS stylesheet import path is incorrect, or the package was not installed correctly, or your build setup is not configured to handle CSS imports.","error":"Cannot find module 'vue-good-table-next/dist/vue-good-table-next.css'"}],"ecosystem":"npm"}