grid-js / gridjs-vue

A Vue.js wrapper component for Grid.js

gridjs-vue

A Vue wrapper component for Grid.js.

Install

npm install gridjs-vue

Also available on unpkg and Skypack!

<script>
  import { Grid } from 'gridjs-vue'

  export default {
    components: {
      Grid
    }
  }
</script>

Basic Usage

Pass columns (an array of column headers) and either rows, from, or server as a data source to the component. Everything else is optional. Pass in new data to update the table.

Read the full documentation for further configuration options.

Example

<template>
  <grid :columns="columns" :rows="rows" @ready="myMethod"></grid>
</template>

<script>
  import Grid from 'gridjs-vue'

  export default {
    name: 'Cars',
    components: {
      Grid
    },
    data() {
      return {
        columns: ['Make', 'Model', 'Year', 'Color'],
        rows: [
          ['Ford', 'Fusion', '2011', 'Silver'],
          ['Chevrolet', 'Cruz', '2018', 'White']
        ]
      }
    },
    methods: {
      myMethod() {
        console.log("It's ready!")
      }
    }
  }
</script>

🤝 Contributing

Originally authored by Daniel Sieradski.

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

gridjs-vue's Issues

Vue3?

When installing the plugin for Vue, I receive the error cannot resolve dependency for Vue2.

npm install gridjs-vue        

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   dev vue@"^3.0.5" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.6.11" from [email protected]
npm ERR! node_modules/gridjs-vue
npm ERR!   gridjs-vue@"^3.4.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Is Vue3 supported? I couldn't see it on the README.

steyle

fon size in stle works fine but column-width: and text-align not working....

How to use $router in $gridjs.render

Hi,

I'm using the nuxtjs framework here and I'm trying to use my component https://pastebin.com/TvyL6Lm7 for the actions column using $gridjs.render.

But, I can't use $router for route navigation.

Thank you in advance.

Unable to access $router inside library

Describe the bug
$router is not accessible inside the library. We cannot render router-link as a component nor wrap router-link inside a custom component. I've also tried to push the route manually via this.$router.push

Expected behavior
Be able to push routes via a rendered component or using the $router api

Using events

I can't figure out how to implement events. The Grid.js docs say it's with grid.on("rowClick"), but how do I get this grid object using Vue?

How to access the "grid" instance and work with its events

Describe the bug
I'm unable to figure out how to access the "grid" object that represents the <grid> element in my component. This object is mentioned in various places in the docs (e.g., https://gridjs.io/docs/examples/selection-events/) but not in a Vue context.

To Reproduce
Steps to reproduce the behavior:

1. Add a <grid> component with a ref attribute, such as <grid ref="memberGrid"/> (with all the other required properties and so on -- the grid itself works fine)
2. In mounted method of my component, attempt to access the grid instance, such as const grid = this.$refs.memberGrid;
3. Try to use the on method of the grid, for example: grid.on('ready', () => {})
4. Error message: TypeError: grid.on is not a function

Expected behavior
Able to access the grid instance in my Vue component. Note: Using refs was just a best guess of how this might work (docs are not explicit on how to do this, hence this issue).

Ready event

Is there a 'ready' event on the vue package? I did see it on the gridjs package, but when I use on '@ready' on vue, it's not fired.

Is there any other way to manipulate the HTML once gridjs has rendered?

onclick create an re-render & redirect to the first page of pagination

The bug occurs when I click on a button in one of my columns: the table is completely reloaded.
If I'm on page 2, 3, 4 ... of the table (via pagination), everything reloads and I don't stay on my page, but i'm back on the first page.

Expected behavior
That the table does not reload if we do not modify the data of the table, that I stay on the page (pagination) that I have chosen

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: chrome
• Version : 88.0

Thanks

core-js not found, package not working with Nuxt 2.14.7

Describe the bug
After running:

yarn add gridjs-vue

adding the global import in the ~/plugins/directives.js with 3 other modules that work like so:

import Vue from'vue'
import VueScroll from 'vue-scroll'
import VueResize from 'vue-resize'
import vSelect from 'vue-select'
import { GridGlobal } from 'gridjs-vue'


Vue.component('v-select', vSelect)

Vue.use(GridGlobal)
Vue.use(VueResize)
Vue.use(VueScroll)

then running

yarn dev

ℹ Preparing project for development                                                                               18:44:52
ℹ Initial build may take a while                                                                                  18:44:52
✔ Builder initialized                                                                                             18:44:52
✔ Nuxt files generated                                                                                            18:44:52

✖ Client
  Compiled with some errors in 9.83s


 WARN  Compiled with 1 warnings                                                                   friendly-errors 18:45:03


 WARN  in ./.nuxt/auth/schemes/oauth2.js                                                          friendly-errors 18:45:03

"export 'default' (imported as 'nanoid') was not found in 'nanoid'                                friendly-errors 18:45:03
                                                                                                  friendly-errors 18:45:03

 ERROR  Failed to compile with 6 errors                                                           friendly-errors 18:45:03

These dependencies were not found:                                                                friendly-errors 18:45:03
                                                                                                  friendly-errors 18:45:03
* core-js/modules/es.array.concat in ./node_modules/gridjs-vue/dist/index.esm.js                  friendly-errors 18:45:03
* core-js/modules/es.object.assign in ./node_modules/gridjs-vue/dist/index.esm.js                 friendly-errors 18:45:03
* core-js/modules/es.object.to-string in ./node_modules/gridjs-vue/dist/index.esm.js              friendly-errors 18:45:03
* core-js/modules/es.promise in ./node_modules/gridjs-vue/dist/index.esm.js                       friendly-errors 18:45:03
* core-js/modules/es.regexp.exec in ./node_modules/gridjs-vue/dist/index.esm.js                   friendly-errors 18:45:03
* core-js/modules/es.string.search in ./node_modules/gridjs-vue/dist/index.esm.js                 friendly-errors 18:45:03
                                                                                                  friendly-errors 18:45:03
To install them, you can run: npm install --save core-js/modules/es.array.concat core-js/modules/es.object.assign core-js/modules/es.object.to-string core-js/modules/es.promise core-js/modules/es.regexp.exec core-js/modules/es.string.search
ℹ Waiting for file changes                                                                                        18:45:03
ℹ Memory usage: 433 MB (RSS: 555 MB)                                                                              18:45:03
ℹ Listening on: http://localhost:3000/]

My current dependencies (without gridjs-vue):

  "dependencies": {
    "@nuxt/markdown": "^0.0.21",
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/axios": "^5.12.2",
    "@nuxtjs/dotenv": "^1.4.0",
    "@nuxtjs/pwa": "^3.2.2",
    "@nuxtjs/sitemap": "^2.4.0",
    "@sindresorhus/slugify": "^1.1.0",
    "eslint": "^7.12.1",
    "is-eu-member": "^1.0.5",
    "is-url-superb": "^4.0.0",
    "lodash": "^4.17.20",
    "markdown-it": "^12.0.2",
    "markdown-it-footnote": "^3.0.2",
    "nuxt": "^2.14.7",
    "vue-resize": "^0.5.0",
    "vue-scroll": "^2.1.13",
    "vue-select": "^3.10.8",
    "vuex-persist": "^3.1.3"
  },
  "devDependencies": {
    "@nuxtjs/style-resources": "^1.0.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-prettier": "^3.1.4",
    "frontmatter-markdown-loader": "^3.6.1",
    "node-sass": "^5.0.0",
    "prettier": "^2.1.2",
    "sass-loader": "^10.1.0"
  }

To Reproduce
Steps to reproduce the behavior:

1. install with yarn on a nNxt 2.14.7 project
2. include the package globally or in a component
3. see errors

Expected behavior
including the package after installing it should just work

tr cannot be customized via class

I want to create a striped table, I try to enter a class like this:

file scss. index.scss:

file index.vue

but nothing happened. i dont know, why tr cannot set class..
thank you

theme: 'none' has no effect.

This package does not support latest Vue

I am getting error message:

"does not provide an export named 'Vue'"

Use custom Vue components for rendering cells

Is there any support planned for this? It would be nice to be able to specify a component with a defined interface as a renderer

"ModuleNotFoundError: Could not find module in path: 'gridjs-vue/dist/themes/mermaid.css'

I'm getting this error after installing the module:

 "ModuleNotFoundError: Could not find module in path: 'gridjs-vue/dist/themes/mermaid.css' relative to '/node_modules/gridjs-vue/dist/index.esm.js'"

which I believe is because of this symlink https://github.com/grid-js/gridjs-vue/blob/master/dist/themes

[Vue warn]: Invalid prop: type check failed for prop "search". Expected Boolean, got Object

data().search type was not updated in the main docs at https://gridjs.io/docs/integrations/vue/

Unable to use HTML in cells or header

Whenever I try to use the HTML in Header feature of Grid.js, I hit errors with gridjs-vue. I believe that this is because I'm unable to import properly the html module from Grid.js when using gridjs-vue.

Here is how I'm importing it:
import {Grid, html} from "gridjs-vue";

And this is the error that I'm seeing in Vue (the table does not get rendered):

[Vue warn]: Unknown custom element: <grid> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Parse> at src/components/HelloWorld.vue
       <App> at src/App.vue
         <Root>

Am I doing something wrong?

#427 is still an issue

Skipping the holistic report as it's been done several times. This is still a problem #427

Incorrect Peer dependency for Vue 3

Working with codesandbox to demo previous issue, reporting

[email protected]" has incorrect peer dependency "vue@^2.6.11"

I assume this means no Vue 3.0 support? (yet?)

`Vue is not defined`

Describe the bug
Following the documentation exactly produces this error in the console.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://gridjs.io/docs/integrations/vue/
2. Follow the documentation
3. Attempt to load page.
4. Console instead shows error ReferenceError: Vue is not defined.

Expected behavior
Grid should display without error.

Desktop (please complete the following information):

• OS: Mac OS 12.0.1
• Browser: Firefox
• Version: 94.0.1

Additional context

I am using Vue 3, but others have reported this same issue using Vue 2, here: #426

It was staled when it really should not have been, as the issue is still active and a complete blocker.

'Vue is not defined'

Attempting to use gridjs-vue produces the error 'Vue is not defined' in the browser console, and the app is prevented from rendering.

Following either the local or global component registration guide produces the same error.

My main.js before adding any gridjs-vue references, working fine:

import Vue from 'vue'
import App from './App.vue'
import store from './store/store.js'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'select2/dist/css/select2.min.css'

Vue.config.productionTip = false
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

After registering:

import Vue from 'vue'
import App from './App.vue'
import store from './store/store.js'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import { GridGlobal } from 'gridjs-vue';

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'select2/dist/css/select2.min.css'

Vue.config.productionTip = false
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.use(GridGlobal)

new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

Then the app no longers renders and the following error is seen in the browser console:

main.esm.js?a234:1 Uncaught ReferenceError: Vue is not defined
    at Module.eval (main.esm.js?a234:1)
    at eval (main.esm.js:8)
    at Module../node_modules/gridjs-vue/dist/main.esm.js (chunk-vendors.js:5346)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at eval (main.js:14)
    at Module../src/main.js (app.js:1292)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at Object.

If I just follow the local component registration and do something like this:

<template>  
    <div>
        <Grid :cols="[]" :rows="[]"></Grid>
    </div>
</template>

<script>
import  { Grid } from 'gridjs-vue'

export default {    
    components: {
        Grid    
    }
}
</script>

I still get the same 'Vue is not defined' error. I fail to see anything I'm doing wrong, other parts of my app work fine without throwing any errors.

I'm using Vue 2.6.14.

Uncaught ReferenceError: Vue is not defined

import Vue from 'vue'; needed to add

gridjs-vue/src/gridjs-vue.ts

Line 10 in cc25a8e

export default Vue.extend({

Add typescript definition file

Could not find a declaration file for module 'gridjs-vue'. '...node_modules/gridjs-vue/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/gridjs-vue` if it exists or add a new declaration (.d.ts) file containing `declare module 'gridjs-vue';`ts(7016)

Using without NPM

Can I use this component directly in browser without NPM?

Library seems to require global registration

Describe the bug
I get an error when attempting to import the Grid component in just one place. The error is resolved by registering the plugin globally.

To Reproduce
Steps to reproduce the behavior:

1. Import the library via import { Grid } from "gridjs-vue/dist/index.umd.js"
2. Attempt to render a table
3. See a TypeError: this.$gridjs is undefined error in the console. The table fails to render.
4. Import GridGlobal and add the line Vue.use(GridGlobal) to resolve the error.

Expected behavior
Local registration, as in the Grid.js docs (https://gridjs.io/docs/integrations/vue), works.
This could also be resolved by updating the docs on that link to remove the local registration option?

Additional context
Using [email protected].

export 'h' was not found in 'gridjs-vue'

Hi, why is the 'h' function not found in vue?

Is the 'h' function only available in reactjs? can you implement in vue? It might be more useful, for example, to create custom cells as in the documentation.

Thank you in advance.

server and pagination props not reactive

Hi;

I'm implement table prop like below code. and i have row limit select input when i was change rowlimit i'm using change method and i'm change like this.pagination.limit = val but table is not update. I hope i can explain myself.

   {
        url: '',
        headers: {
          Authorization: `Bearer ${this.$store.getters['auth/token']}`
        },
        // eslint-disable-next-line no-undef
        then: (res) =>
          res.Data.map((data) => [
            this.$moment(data.TimeStamp).format('DD-MM-YYYY HH:mm'),
            `${data.CoinFromCode}/${data.CoinToCode}`,
            this.$gridjs.html(
              this.$options.filters.currency(data.Amount, {
                symbol: data.CoinToCode,
                thousandsSeparator: '.',
                fractionCount: this.$fchelpers.moneyFractionCount(
                  data.CoinToCode
                ),
                fractionSeparator: ',',
                symbolPosition: '',
                symbolSpacing: true
              })
            ),
            this.$gridjs.html(
              this.$options.filters.currency(data.OrderValue, {
                symbol: data.CoinFromCode,
                thousandsSeparator: '.',
                fractionCount: this.$fchelpers.moneyFractionCount(
                  data.CoinFromCode
                ),
                fractionSeparator: ',',
                symbolPosition: '',
                symbolSpacing: true
              })
            )
          ]),
        handle: (res) => {
          // no matching records found
          if (res.status === 404) {
            return { data: [] }
          } else if (res.status === 401) {
            throw new Error('oh no :(')
          }
          if (res.ok) return res.json()
        },
        total: (res) => res.Data[0].total
      },
      pagination: {
        limit: 20,
        summary: false,
        server: {
          url: (prev, page, limit) => {
            return `${prev}&RowLimit=${limit}&PageNumber=${1 * (page + 1)}`
          }
        }
      }
  }

theme: 'none'

vue 2.9.6 cant use this lib

i followed the girdjs.io example , installed gridjs.
when i entered npm run dev . display this .

ERROR Failed to compile with 3 errors 5:55:29 ├F10: PM┤
These dependencies were not found:

• https://unpkg.com/[email protected]/dist/gridjs.module.js in ./node_modules/_gridjs-vue@5.0.1@gridjs-vue/dist/index.esm.js
• https://unpkg.com/parse-css-stylesheet/index.js in ./node_modules/_gridjs-vue@5.0.1@gridjs-vue/dist/index.esm.js
• https://unpkg.com/uid/single/index.mjs in ./node_modules/_gridjs-vue@5.0.1@gridjs-vue/dist/index.esm.js

Multiple queries when using server option

Describe the bug
When using the server option, multiple request are made to the API on mount.

To Reproduce
Steps to reproduce the behavior:

1. Create a new project with example
2. Check the console to see multiple call to the same API

Expected behavior
Only one request should be made

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser [e.g. chrome, safari] : Chrome
• Version [e.g. 22] 97.0.4692.99

Unexpected token '.'

Hello Gridjs team,

I'm trying to use it with Nuxt but I'm having a critical error with it.

Describe the bug
If I import gridjs-vue in Nuxt 2.15.4 with this simple template:

<template>
  <div class="section container">
    <grid></grid>
  </div>
</template>

<script>
import Grid from 'gridjs-vue'

export default {
  components: {
    Grid,
  },
}
</script>

I have Unexpected token '.'.

Screenshots

Thank you!!

Unable use with vue-3, selfhook.call is not a function

Probably a vue-3 issue, but...

Using the Basic example from the npm page, https://www.npmjs.com/package/gridjs-vue

Vue throws....Uncaught TypeError: selfHook.call is not a function
at callSyncHook (runtime-core.esm-bundler.js?5c40:5435)
at applyOptions (runtime-core.esm-bundler.js?5c40:5227)
at finishComponentSetup (runtime-core.esm-bundler.js?5c40:6006)
at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:5942)
at setupComponent (runtime-core.esm-bundler.js?5c40:5882)
at mountComponent (runtime-core.esm-bundler.js?5c40:4161)
at processComponent (runtime-core.esm-bundler.js?5c40:4137)
at patch (runtime-core.esm-bundler.js?5c40:3784)
at componentEffect (runtime-core.esm-bundler.js?5c40:4258)
at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)

core-js compile issue

I have a clean Vue install from vue create project-name, and installed the gridjs-vue package, set up the default example laid out in this repo, and yet the build fails.

NPM gives

These dependencies were not found:

* core-js/modules/es.array.concat.js in ./node_modules/gridjs-vue/dist/index.esm.js
* core-js/modules/es.object.assign.js in ./node_modules/gridjs-vue/dist/index.esm.js
* core-js/modules/es.object.to-string.js in ./node_modules/gridjs-vue/dist/index.esm.js
* core-js/modules/es.promise.js in ./node_modules/gridjs-vue/dist/index.esm.js
* core-js/modules/es.regexp.exec.js in ./node_modules/gridjs-vue/dist/index.esm.js
* core-js/modules/es.string.search.js in ./node_modules/gridjs-vue/dist/index.esm.js

To install them, you can run: npm install --save core-js/modules/es.array.concat.js core-js/modules/es.object.assign.js core-js/modules/es.object.to-string.js core-js/modules/es.promise.js core-js/modules/es.regexp.exec.js core-js/modules/es.string.search.js

VS Code shows a declaration error on the import Grid from 'gridjs-vue'

Could not find a declaration file for module 'gridjs-vue'. '/home/tubstrr/repos/summer-camp-dashbooard/node_modules/gridjs-vue/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/gridjs-vue` if it exists or add a new declaration (.d.ts) file containing `declare module 'gridjs-vue';`