Registry / web-framework / vue-good-table-next

vue-good-table-next

library0.2.2jsnpmunverified

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.

web-framework data

npm install vue-good-table-next

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-GOOD-TABLE-NEX

vue-good-table-next

web-frameworkjavascriptv0.2.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueGoodTablePlugin

✓ import VueGoodTablePlugin from 'vue-good-table-next';

✗ const VueGoodTablePlugin = require('vue-good-table-next');

Used for global registration via `app.use()` in Vue 3, similar to `Vue.use()` in Vue 2.

VueGoodTable

✓ import { VueGoodTable } from 'vue-good-table-next';

✗ import VueGoodTable from 'vue-good-table-next';

Used for local component registration within a Vue component's `components` option.

Styles

✓ import 'vue-good-table-next/dist/vue-good-table-next.css'

Required to apply the default styling of the table. Ensure your build system processes CSS imports.

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.

import { createApp } from 'vue'; import App from './App.vue'; import VueGoodTablePlugin from 'vue-good-table-next'; import 'vue-good-table-next/dist/vue-good-table-next.css'; const app = createApp(App); app.use(VueGoodTablePlugin); app.mount('#app'); // App.vue <template> <div id="app"> <h1>My Data Table</h1> <vue-good-table :columns="columns" :rows="rows" :line-numbers="true" :sort-options="{ enabled: true, initialSortBy: { field: 'name', type: 'asc' } }" :pagination-options="{ enabled: true, perPage: 5, perPageDropdown: [5, 10, 20] }" :search-options="{ enabled: true }" /> </div> </template> <script setup> import { ref } from 'vue'; const columns = ref([ { label: 'Name', field: 'name', sortable: true, filterOptions: { enabled: true } }, { label: 'Age', field: 'age', type: 'number', sortable: true, filterOptions: { enabled: true } }, { label: 'City', field: 'city', sortable: true, filterOptions: { enabled: true } }, { label: 'Score', field: 'score', type: 'percentage', sortable: true, filterOptions: { enabled: true } } ]); const rows = ref([ { id: 1, name: 'John Doe', age: 30, city: 'New York', score: 0.85 }, { id: 2, name: 'Jane Smith', age: 24, city: 'London', score: 0.92 }, { id: 3, name: 'Peter Jones', age: 45, city: 'Paris', score: 0.78 }, { id: 4, name: 'Alice Brown', age: 29, city: 'Berlin', score: 0.95 }, { id: 5, name: 'Robert Green', age: 37, city: 'Rome', score: 0.70 }, { id: 6, name: 'Sarah White', age: 22, city: 'Madrid', score: 0.88 }, { id: 7, name: 'David Black', age: 50, city: 'Tokyo', score: 0.65 }, { id: 8, name: 'Emily Blue', age: 33, city: 'Sydney', score: 0.90 }, { id: 9, name: 'Michael Red', age: 41, city: 'Toronto', score: 0.73 }, { id: 10, name: 'Olivia Gray', age: 27, city: 'Amsterdam', score: 0.81 } ]); </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .vgt-table { margin: 20px auto; width: 90%; } </style>

Debug

Known issues

gotchaThe package is explicitly marked as 'not yet intended to be used in a production environment' due to ongoing development and potential short-term changes.

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.

affects: >=0.2.2

breakingDespite 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.

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.

affects: >=0.2.2

Errors

Common errors & fixes

Failed to resolve component: vue-good-table

The `VueGoodTable` component was not properly registered or imported into your Vue application/component.

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.

Cannot find module 'vue-good-table-next/dist/vue-good-table-next.css'

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.

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.

Upgrade

Version history

0.2.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

22 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/borisflesch/vue-good-table-next ↗

packagehttps://www.npmjs.com/package/vue-good-table-next ↗