Vue Good Table Next

0.2.2 · maintenance · verified Sun Apr 19

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.

Common errors

```
Failed to resolve component: vue-good-table
```
cause 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'
```
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.

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.

Warnings

gotcha 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.
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.
breaking 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.
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.

Install

npm install vue-good-table-next npm
yarn add vue-good-table-next yarn
pnpm add vue-good-table-next pnpm

Imports

VueGoodTablePlugin
wrong:
```
const VueGoodTablePlugin = require('vue-good-table-next');
```
correct:
```
import VueGoodTablePlugin from 'vue-good-table-next';
```
Used for global registration via `app.use()` in Vue 3, similar to `Vue.use()` in Vue 2.
VueGoodTable
wrong:
```
import VueGoodTable from 'vue-good-table-next';
```
correct:
```
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.

Quickstart

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>

view raw JSON →