https://github.com/borisflesch/vue-good-table-next

An easy to use powerful data table for Vue 3.x with advanced customizations including sorting, column filtering, pagination, grouping etc. Based on Vue-good-table (Vue 2.x).
https://github.com/borisflesch/vue-good-table-next

data datatable table vue vue3 vuejs vuejs3

Last synced: 3 months ago
JSON representation

An easy to use powerful data table for Vue 3.x with advanced customizations including sorting, column filtering, pagination, grouping etc. Based on Vue-good-table (Vue 2.x).

• Host: GitHub
• URL: https://github.com/borisflesch/vue-good-table-next
• Owner: borisflesch
• License: mit
• Fork: true (xaksis/vue-good-table)
• Created: 2021-09-22T22:48:37.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-09-10T21:44:06.000Z (5 months ago)
• Last Synced: 2024-12-06T02:09:42.801Z (3 months ago)
• Topics: data, datatable, table, vue, vue3, vuejs, vuejs3
• Language: Vue
• Homepage: https://borisflesch.github.io/vue-good-table-next/
• Size: 46.4 MB
• Stars: 218
• Watchers: 6
• Forks: 41
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Vue-good-table-next

| :warning: WARNING          |

|:---------------------------|

| This project is a port of Vue-good-table for Vue 3.x. The current version is stable enough to start developing new projects but work is still in progress and changes could be made in the short-term. Thus the project is not yet intended to be used in a production environment. |

[![npm](https://img.shields.io/npm/dm/vue-good-table-next.svg?style=flat-square)](https://www.npmjs.com/package/vue-good-table-next)

[![npm](https://img.shields.io/github/package-json/v/borisflesch/vue-good-table.svg?style=flat-square)](https://github.com/borisflesch/vue-good-table-next/releases)

[![npm](https://img.shields.io/github/license/borisflesch/vue-good-table-next.svg?style=flat-square)](https://github.com/borisflesch/vue-good-table-next/master/LICENSE)

[![](https://data.jsdelivr.com/v1/package/npm/vue-good-table-next/badge)](https://www.jsdelivr.com/package/npm/vue-good-table-next)

[![Twitter Follow](https://img.shields.io/twitter/follow/borisflesch.svg?label=Follow&style=social)](https://twitter.com/borisflesch)

An easy to use, clean and powerful data table for Vue with essential features like sorting, column filtering, pagination and much more - [borisflesch.github.io/vue-good-table-next/](https://borisflesch.github.io/vue-good-table-next/)

## Installing

Install with npm:

```bash

npm install vue-good-table-next

```

Install with npm:

```bash

yarn add vue-good-table-next

```

Import globally in app:

```javascript

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

// import the styles 

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

Vue.use(VueGoodTablePlugin);

```

Import into your component

```js

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

// add to component

components: {

  VueGoodTable,

}

```

Import into your component using Typescript

```typescript

// add to component

components: {

  'vue-good-table': require('vue-good-table-next').VueGoodTable,

}

```

##### Example table with grouped rows and column filters

![Advanced Screenshot](README/images/vgt-table.advanced.png)

## Features

* [Table Search](https://borisflesch.github.io/vue-good-table-next/guide/configuration/search-options.html)

* [Sorting](https://borisflesch.github.io/vue-good-table-next/guide/configuration/sort-options.html)

* [Column Filtering](https://borisflesch.github.io/vue-good-table-next/guide/configuration/column-filter-options.html#filteroptions)

* [Pagination](https://borisflesch.github.io/vue-good-table-next/guide/configuration/pagination-options.html)

* [Highly Customizable](https://borisflesch.github.io/vue-good-table-next/guide/advanced/#custom-row-template)

* [Checkbox Table](https://borisflesch.github.io/vue-good-table-next/guide/advanced/checkbox-table.html)

* [Grouped Rows Table](https://borisflesch.github.io/vue-good-table-next/guide/advanced/grouped-table.html)

* [Server Powered Table](https://borisflesch.github.io/vue-good-table-next/guide/advanced/remote-workflow.html#why-remote-mode)

* [Customizable Style and Themes](https://borisflesch.github.io/vue-good-table-next/guide/style-configuration/)

## Authors

* [Boris Flesch](https://github.com/boris-flesch)

* [xaksis](https://github.com/xaksis) (initial version of Vue-good-table for Vue 2.x)

* [Other Contributors](https://github.com/borisflesch/vue-good-table-next/graphs/contributors)

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details