revolist / vue3-datagrid Goto Github PK

View Code? Open in Web Editor NEW

111.0 4.0 31.0 696 KB

Vue 3 data grid spreadsheet

License: MIT License

JavaScript 8.30% Vue 8.57% HTML 13.91% TypeScript 67.07% CSS 2.15%

vue3-datagrid's Introduction

Powerful data grid component built on top of RevoGrid.

Millions of cells and thousands columns easy and efficiently.

Demo and API • Key Features • How To Use • Docs • License

RevoGrid material theme.

Key Features

Millions of cells viewport with a powerful core in-build by default;
Keayboard support with excel like focus;
Super light initial starter . Can be imported with polifill or as module for modern browsers;
Intelligent Virtual DOM and smart row recombination in order to achieve less redraws;
Sorting (multiple options, can be customized per column and advanced with events);
Filtering
- Predefined system filters;
- Preserve existing collection;
- Custom filters (extend existing system filters with your own set);
Export to file;
Custom sizes per Column and Row;
Column resizing;
Autosize support (Column size based on content);
Pinned/Sticky/Freezed:
- Columns (define left or right);
- Rows (define top or bottom);
Grouping:
- Column grouping (Nester headers);
- Row grouping (Nested rows);
Cell editing;
Customizations:
- Header template;
- Cell template (build your own cell view);
- Cell editor (apply your own editors and cell types);
- Cell properties (build you own properties around rendered cells);
Column types;
- Text/String (default);
- Number;
- Select;
- Date;
- Custom (take any type as template and create your own extended style);
Drag and drop rows;
Range operations:
- Selection;
- Edit;
Theme packages:
- Excel like (default)
- Material (compact, dark or light);
Copy/Paste (copy/paste from Excel, Google Sheets or any other sheet format);
Easy extenation and support with modern VNode features and tsx support;
Trimmed rows (hide rows on demand);
Plugin system (create your own plugins or extend existing one, it's transparent and easy);
Hundred others small customizations and improvements RevoGrid.

How to use

With NPM:

npm i @revolist/vue3-datagrid --save;

With Yarn:

yarn add @revolist/vue3-datagrid;

Sandbox

<template>
  <div id="app">
    <v-grid theme="compact" :source="rows" :columns="columns"/>
  </div>
</template>

<script>
import VGrid from "@revolist/vue3-datagrid";
export default {
  name: "App",
  data() {
    return {
      columns: [{
          prop: "name",
          name: "First",
        },
        {
          prop: "details",
          name: "Second",
      }],
      rows: [{
        name: "1",
        details: "Item 1",
      }]
    };
  },
  components: {
    VGrid,
  },
};
</script>

Contributing

If you have any idea, feel free to open an issue to discuss a new feature and submit your changes back to me.

License

MIT

vue3-datagrid's People

Contributors

Stargazers

Watchers

vue3-datagrid's Issues

Dynamically update when adding data/row

Hi there and thank you for the component.

I'm trying to implement an addRow button. The data are correctly passed into the source prop, but the dataGrid does not refresh.
Is this feature supported? How do I implement this?
Thanks in advance!

Is this actually still supported? Even the most basic stuff doesn't work

Hi,
I just tried it out and after finally getting it to render in my vue3 project neither resizing the columns, moving them around or adding the predefined date editor for a column works.

I can't resize it in the revogrid vue demo either. I'll try it without this wrapper now, but imho this should either be massively updated or actually removed as native vue3 support doesn't work at all imho.

use vue-demi support 2&3

https://github.com/vueuse/vue-demi#/

The VGrid has initially a height of "0" | Vue3

Hello Revolist-Community,

If I install revoGrid for Vue3 as described in your gitReadme, the started Vue3 App does not show anything cause the initial height of the VGrid is set to "0". So you need to give it a height first to see it.

Maybe you should add this info to your Readme.

Thank you, have a good time and stay healthy

Error Cannot read property 'emit' of undefined on Blank demo project

I tried to install it in a fresh install from vue-cli:

modiefied the App.vue from the example to:

<template>
  <div id="App">
    <v-grid
      theme="compact"
      :source="rows"
      :columns="columns"
    ></v-grid>
  </div>
</template>
 
<script>
import VGrid from "@revolist/vue3-datagrid";
export default {
  name: "App",
  data() {
    return {
      columns: [{ prop: "name" }, { prop: "details" }],
      rows: [{
        name: "1",
        details: "Item 1",
      }]
    };
  },
  components: {
    VGrid,
  },
};
</script>

but getting this error:

Uncaught TypeError: Cannot read property 'emit' of undefined
    at HTMLElement.columnChanged (vgrid.js?675a:1)
    at HTMLElement.connectedCallback (vgrid.js?675a:1)
    at HTMLElement.connectedCallback (vgrid.js?675a:1)
    at insert (runtime-dom.esm-bundler.js?830f:9)
    at mountElement (runtime-core.esm-bundler.js?5c40:4822)
    at processElement (runtime-core.esm-bundler.js?5c40:4754)
    at patch (runtime-core.esm-bundler.js?5c40:4670)
    at componentEffect (runtime-core.esm-bundler.js?5c40:5208)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
columnChanged @ vgrid.js?675a:1
connectedCallback @ vgrid.js?675a:1
connectedCallback @ vgrid.js?675a:1
insert @ runtime-dom.esm-bundler.js?830f:9
mountElement @ runtime-core.esm-bundler.js?5c40:4822
processElement @ runtime-core.esm-bundler.js?5c40:4754
patch @ runtime-core.esm-bundler.js?5c40:4670
componentEffect @ runtime-core.esm-bundler.js?5c40:5208
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
effect @ reactivity.esm-bundler.js?a1e9:17
setupRenderEffect @ runtime-core.esm-bundler.js?5c40:5154
mountComponent @ runtime-core.esm-bundler.js?5c40:5113
processComponent @ runtime-core.esm-bundler.js?5c40:5071
patch @ runtime-core.esm-bundler.js?5c40:4673
componentEffect @ runtime-core.esm-bundler.js?5c40:5274
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
flushJobs @ runtime-core.esm-bundler.js?5c40:386
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:286
queueJob @ runtime-core.esm-bundler.js?5c40:280
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
set value @ reactivity.esm-bundler.js?a1e9:764
eval @ runtime-core.esm-bundler.js?5c40:2575
Promise.then (async)
setup @ runtime-core.esm-bundler.js?5c40:2574
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
setupStatefulComponent @ runtime-core.esm-bundler.js?5c40:7131
setupComponent @ runtime-core.esm-bundler.js?5c40:7087
mountComponent @ runtime-core.esm-bundler.js?5c40:5096
processComponent @ runtime-core.esm-bundler.js?5c40:5071
patch @ runtime-core.esm-bundler.js?5c40:4673
mountChildren @ runtime-core.esm-bundler.js?5c40:4861
mountElement @ runtime-core.esm-bundler.js?5c40:4782
processElement @ runtime-core.esm-bundler.js?5c40:4754
patch @ runtime-core.esm-bundler.js?5c40:4670
componentEffect @ runtime-core.esm-bundler.js?5c40:5208
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
effect @ reactivity.esm-bundler.js?a1e9:17
setupRenderEffect @ runtime-core.esm-bundler.js?5c40:5154
mountComponent @ runtime-core.esm-bundler.js?5c40:5113
processComponent @ runtime-core.esm-bundler.js?5c40:5071
patch @ runtime-core.esm-bundler.js?5c40:4673
render @ runtime-core.esm-bundler.js?5c40:5791
mount @ runtime-core.esm-bundler.js?5c40:4081
app.mount @ runtime-dom.esm-bundler.js?830f:1319
eval @ main.js?56d7:4
./src/main.js @ app.js:1009
__webpack_require__ @ app.js:849
fn @ app.js:151
1 @ app.js:1022
__webpack_require__ @ app.js:849
checkDeferredModules @ app.js:46
(anonymous) @ app.js:925
(anonymous) @ app.js:928
vgrid.js?675a:1 TypeError: Cannot read property 'registerElement' of undefined
    at registerElement (vgrid.js?675a:1)
    at ref (vgrid.js?675a:1)
    at D (vgrid.js?675a:1)
    at I (vgrid.js?675a:1)
    at H (vgrid.js?675a:1)
    at H (vgrid.js?675a:1)
    at H (vgrid.js?675a:1)
    at B (vgrid.js?675a:1)
    at G (vgrid.js?675a:1)
    at Q (vgrid.js?675a:1) <revo-grid class grid-uuid="1624786465197-rvgrid" theme="compact" row-class></revo-grid>
      

      flex
    
xe @ vgrid.js?675a:1
oe @ vgrid.js?675a:1
ie @ vgrid.js?675a:1
eval @ vgrid.js?675a:1
ce @ vgrid.js?675a:1
ne @ vgrid.js?675a:1
r @ vgrid.js?675a:1
Re @ vgrid.js?675a:1
ze @ vgrid.js?675a:1
requestAnimationFrame (async)
raf @ vgrid.js?675a:1
eval @ vgrid.js?675a:1
re @ vgrid.js?675a:1
o @ vgrid.js?675a:1
de @ vgrid.js?675a:1
eval @ vgrid.js?675a:1
connectedCallback @ vgrid.js?675a:1
insert @ runtime-dom.esm-bundler.js?830f:9
mountElement @ runtime-core.esm-bundler.js?5c40:4822
processElement @ runtime-core.esm-bundler.js?5c40:4754
patch @ runtime-core.esm-bundler.js?5c40:4670
componentEffect @ runtime-core.esm-bundler.js?5c40:5208
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
effect @ reactivity.esm-bundler.js?a1e9:17
setupRenderEffect @ runtime-core.esm-bundler.js?5c40:5154
mountComponent @ runtime-core.esm-bundler.js?5c40:5113
processComponent @ runtime-core.esm-bundler.js?5c40:5071
patch @ runtime-core.esm-bundler.js?5c40:4673
componentEffect @ runtime-core.esm-bundler.js?5c40:5274
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
flushJobs @ runtime-core.esm-bundler.js?5c40:386
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?5c40:286
queueJob @ runtime-core.esm-bundler.js?5c40:280
run @ reactivity.esm-bundler.js?a1e9:183
trigger @ reactivity.esm-bundler.js?a1e9:189
set value @ reactivity.esm-bundler.js?a1e9:764
eval @ runtime-core.esm-bundler.js?5c40:2575
Promise.then (async)
setup @ runtime-core.esm-bundler.js?5c40:2574
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
setupStatefulComponent @ runtime-core.esm-bundler.js?5c40:7131
setupComponent @ runtime-core.esm-bundler.js?5c40:7087
mountComponent @ runtime-core.esm-bundler.js?5c40:5096
processComponent @ runtime-core.esm-bundler.js?5c40:5071
patch @ runtime-core.esm-bundler.js?5c40:4673
mountChildren @ runtime-core.esm-bundler.js?5c40:4861
mountElement @ runtime-core.esm-bundler.js?5c40:4782
processElement @ runtime-core.esm-bundler.js?5c40:4754
patch @ runtime-core.esm-bundler.js?5c40:4670
componentEffect @ runtime-core.esm-bundler.js?5c40:5208
reactiveEffect @ reactivity.esm-bundler.js?a1e9:42
effect @ reactivity.esm-bundler.js?a1e9:17
setupRenderEffect @ runtime-core.esm-bundler.js?5c40:5154
mountComponent @ runtime-core.esm-bundler.js?5c40:5113
processComponent @ runtime-core.esm-bundler.js?5c40:5071
patch @ runtime-core.esm-bundler.js?5c40:4673
render @ runtime-core.esm-bundler.js?5c40:5791
mount @ runtime-core.esm-bundler.js?5c40:4081
app.mount @ runtime-dom.esm-bundler.js?830f:1319
eval @ main.js?56d7:4
./src/main.js @ app.js:1009
__webpack_require__ @ app.js:849
fn @ app.js:151
1 @ app.js:1022
__webpack_require__ @ app.js:849
checkDeferredModules @ app.js:46
(anonymous) @ app.js:925
(anonymous) @ app.js:928

my package.json :

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@revolist/vue3-datagrid": "^3.0.52",
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Just a blank project.

Using in component lib?

Hi!

I was wondering if it was possible to use vue3-datagrid as part of a component library? Specifically, I'm trying to wrap it up into a UMD library so I can use it in a Vue app as part of a Java front end (sadly, I can't use straight up Vue). The entry point of my module looks like this:

...other imports
import VGrid from '@revolist/vue3-datagrid'

export {...
		VGrid as VGrid}

and all works until the addition of VGrid. Once I add it in, my browser complains about illegal characters, which points at this in my .umd.js file:

qt=Mt({À:"A",Á:"A"...

I did notice that when I build a test project using the grid as part of an app that line contains quotes around the keys as well. Is what I'm attempting possible? If so, what am I missing?

Thank you!

-Chris

Integration in nuxt3 throws "self is not defined" error ...

Hello friends ...

I never thought it would happen, but this is actually my first github-issue I'm going to send out in this world. I hope I won't start doing that with a stupid question ... 🙈

What I'm trying to do? I've been trying to integrate vue3-datagrid into my nuxt3 app.

I've created this component:

<template>
  <div>
    <v-grid theme="compact" :source="rows" :columns="columns"></v-grid>
  </div>
</template>

<script>
import VGrid from "@revolist/vue3-datagrid"

export default {
  data() {
    return {
      columns: [
        {
          prop: "name",
          name: "First",
        },
        {
          prop: "details",
          name: "Second",
        },
      ],
      rows: [
        {
          name: "1",
          details: "Item 1",
        },
      ],
    }
  },
  components: {
    VGrid,
  },
}
</script>

<style>
#app {
  height: 700px;
  width: 500px;
}
revo-grid {
  height: 100%;
}
</style>

Unfortunately it throws the following error:

ReferenceError: self is not defined
    at Object.<anonymous> (/Users/s***/Projects/workbench/g***/app/src/frontend/node_modules/@revolist/vue3-datagrid/dist/vgrid.js:1:238)
    at Module._compile (node:internal/modules/cjs/loader:1112:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1166:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)
    at Module._load (node:internal/modules/cjs/loader:834:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
    at async __instantiateModule__ (file:///Users/s***/Projects/workbench/g***/app/src/frontend/.nuxt/dist/server/server.mjs:4158:3)

Since vue3-datagrid is basically a client-side component, I already assumed that I have to register a plugin for the client-side ... So I added following file (including the suffix ".client") inside the plugins folder:

grid.client.ts:

import VGrid from "@revolist/vue3-datagrid";

export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.component("VGrid", VGrid) });

Unfortunately this doesn't work either. Same error. Is there something I'm doing wrong, or is there simply no possibility at the moment to use vue3-datagrid in nuxt3?

Btw: I'm using node version: v18.4.0 and my package.json looks like that:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@typescript-eslint/parser": "^5.30.6",
    "eslint": "^8.7.0",
    "nuxt": "3.0.0-rc.4",
    "prettier": "^2.5.1",
    "typescript": "^4.7.4",
    "vue-eslint-parser": "^9.0.3"
  },
  "dependencies": {
    "@revolist/vue3-datagrid": "^3.1.0",
    "sass": "^1.53.0",
    "vue3-carousel": "^0.1.40",
    "ws": "^8.8.0"
  }
}

Thanks a lot in advance! Any help is appreciated!

Dynamic data support

Support dynamic change of data passed into the source prop.
At the current state, if source data changes the data-grid view does not refresh to display it.

Minimal reproduction:
https://codesandbox.io/s/revo-grid-vue3-forked-vdi1pu

Typescript support

Hi! Great work on this component. Will try it out the couple of weeks so I think you can aspect more issues-tickets from me with bugs or feature requests :). Is there a definition file present for Typescript?

Please publish version 3.7.0 to npm

Current published package is 3.6.17. Would be great if you could publish version 3.7.0 to npm as well.

Many thanks for the great library.

Error with use UI framework

Error with use Quasar UI Framework on custom cell render/editor. Can't use Quasar components.
I think this is some kind of fundamental error that can manifest itself in other UI-frameworks.

I can use it without the framework (I've seen examples, I know to use VGridVueEditor, etc.), but the error occurs when I try to integrate quasar components inside

Could this be a related bug with #22?

Custom Editor

<template>
  <q-input
    outlined
    filled
    v-model.number="text"
    type="number"
    label="Test"
  />
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "CustomEditor",
  props: ["rowIndex", "model", "close", "save"],
  setup(props) {
    console.log("CustomEditor props: ", props);
    return {
      text: ref(""),
    };
  },
});
</script>

TypeError: $q is undefined

    __WEBPACK_DEFAULT_EXPORT__ use-dark.js:12
    run reactivity.esm-bundler.js:185
    get value reactivity.esm-bundler.js:1144
    classes use-field.js:195
    run reactivity.esm-bundler.js:185
    get value reactivity.esm-bundler.js:1144
    renderField use-field.js:566
    renderComponentRoot runtime-core.esm-bundler.js:896
    componentUpdateFn runtime-core.esm-bundler.js:5580
    run reactivity.esm-bundler.js:185
    update runtime-core.esm-bundler.js:5694
    setupRenderEffect runtime-core.esm-bundler.js:5708
    mountComponent runtime-core.esm-bundler.js:5490
    processComponent runtime-core.esm-bundler.js:5448
    patch runtime-core.esm-bundler.js:5038
    componentUpdateFn runtime-core.esm-bundler.js:5587
    run reactivity.esm-bundler.js:185
    update runtime-core.esm-bundler.js:5694
    setupRenderEffect runtime-core.esm-bundler.js:5708
    mountComponent runtime-core.esm-bundler.js:5490
    processComponent runtime-core.esm-bundler.js:5448
    patch runtime-core.esm-bundler.js:5038
    render runtime-core.esm-bundler.js:6209
    render runtime-dom.esm-bundler.js:1579
    u vgrid.js:1
    ref vgrid.js:1
    setAccessor index.js:553
    updateElement index.js:674
    createElm index.js:728
    addVnodes index.js:809
    patch index.js:1000
    renderVdom index.js:1196
    callRender index.js:1458
    updateComponent index.js:1380
    dispatchHooks index.js:1361
    then index.js:1591
    dispatchHooks index.js:1361
    dispatch index.js:1329
    consume index.js:2991
    flush index.js:3046
    raf index.js:26
    queueTask index.js:2984
    scheduleUpdate index.js:1330
    forceUpdate index.js:1558
    stencilSubscription index.js:3592
    set index.js:3629
    set index.js:3629
    setStore index.js:3872
    setEdit index.js:7190
    setEdit index.js:7401
    onEdit index.js:25994
    onSetEdit index.js:24836
    emitEvent index.js:1309
    emit index.js:1291
    doEdit index.js:28504
    onDblClick index.js:28480
    ael index.js:27
    setAccessor index.js:593
    updateElement index.js:674
    patch index.js:986
    renderVdom index.js:1196
    callRender index.js:1458
    updateComponent index.js:1380
    dispatchHooks index.js:1361
    then index.js:1591
    dispatchHooks index.js:1361
    dispatch index.js:1329
    consume index.js:2991
    flush index.js:3046
    raf index.js:26
    queueTask index.js:2984
    scheduleUpdate index.js:1330
    forceUpdate index.js:1558
    stencilSubscription index.js:3592
    set index.js:3629
    set index.js:3629
    setStore index.js:3872
    clearFocus index.js:7161
    onFocusCell index.js:24677
    emitEvent index.js:1309
    emit index.js:1291
    focus index.js:28393
    focus index.js:27915
    onElementMouseDown index.js:28493
    onMouseDown index.js:28480
    ael index.js:27
    setAccessor index.js:593
    updateElement index.js:674
    patch index.js:986
    renderVdom index.js:1196
    callRender index.js:1458
    updateComponent index.js:1380
    dispatchHooks index.js:1361
    then index.js:1591
    dispatchHooks index.js:1361
    dispatch index.js:1329
    consume index.js:2991
 
<revogr-edit class="edit-input-wrapper" style="left: 600px; top: 900px;…: 150px; height: 100px;">
index.js:2934
    consoleError index.js:2934
    callRender index.js:1467
    updateComponent index.js:1380
    dispatchHooks index.js:1361
    then index.js:1591
    dispatchHooks index.js:1361
    dispatch index.js:1329
    consume index.js:2991
    flush index.js:3046
    (Асинхронный: FrameRequestCallback)
    raf index.js:26
    queueTask index.js:2984
    scheduleUpdate index.js:1330
    forceUpdate index.js:1558
    stencilSubscription index.js:3592
    set index.js:3629
    set index.js:3629
    setStore index.js:3872
    setEdit index.js:7190
    setEdit index.js:7401
    onEdit index.js:25994
    onSetEdit index.js:24836
    emitEvent index.js:1309
    emit index.js:1291
    doEdit index.js:28504
    onDblClick index.js:28480
    (Асинхронный: EventListener.handleEvent)
    ael index.js:27
    setAccessor index.js:593
    updateElement index.js:674
    patch index.js:986
    renderVdom index.js:1196
    callRender index.js:1458
    updateComponent index.js:1380
    dispatchHooks index.js:1361
    then index.js:1591
    dispatchHooks index.js:1361
    dispatch index.js:1329
    consume index.js:2991
    flush index.js:3046
    (Асинхронный: FrameRequestCallback)
    raf index.js:26
    queueTask index.js:2984
    scheduleUpdate index.js:1330
    forceUpdate index.js:1558
    stencilSubscription index.js:3592
    set index.js:3629
    set index.js:3629
    setStore index.js:3872
    clearFocus index.js:7161
    onFocusCell index.js:24677
    emitEvent index.js:1309
    emit index.js:1291
    focus index.js:28393
    focus index.js:27915
    onElementMouseDown index.js:28493
    onMouseDown index.js:28480
    (Асинхронный: EventListener.handleEvent)
    ael index.js:27
    setAccessor index.js:593
    updateElement index.js:674
    patch index.js:986
    renderVdom index.js:1196
    callRender index.js:1458
    updateComponent index.js:1380
    dispatchHooks index.js:1361
    then index.js:1591
    dispatchHooks index.js:1361
    dispatch index.js:1329
    consume index.js:2991

Error on running unit test for Vite project using Vitest framework

Describe the issue
I am using the revolist/vue3-datagrid module for Vue3 project built with Vite and Vitest.
I am getting an error when running the unit test caused by this module:


SyntaxError: Cannot use import statement outside a module
 ❯ Object.compileFunction node:vm:360:18
 ❯ node_modules/@revolist/vue3-datagrid/dist/vgrid.js:1:98

 ❯ Object.<anonymous> node_modules/@revolist/vue3-datagrid/dist/vgrid.js:1:406
 ❯ async /home/brandonniu/dev/repos/aim-cloud-web/aim-cloud-web-frontend/src/modules/task/pages/TasksListPage.vue:7:31
 ❯ async /home/brandonniu/dev/repos/aim-cloud-web/aim-cloud-web-frontend/src/modules/task/routes.ts:5:31
 ❯ async /home/brandonniu/dev/repos/aim-cloud-web/aim-cloud-web-frontend/src/router.ts:19:31
 ❯ async /home/brandonniu/dev/repos/aim-cloud-web/aim-cloud-web-frontend/src/test-utils.ts:5:31
 ❯ async /home/brandonniu/dev/repos/aim-cloud-web/aim-cloud-web-frontend/src/components/ui/BaseForm/__tests__/FooterControlGroups.test.ts:3:31

Module /home/brandonniu/dev/repos/aim-cloud-web/aim-cloud-web-frontend/node_modules/@revolist/revogrid/custom-element/index.js:4 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "@revolist/revogrid" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

As a temporary workaround you can try to inline the package by updating your config:

// vitest.config.js
export default {
  test: {
    deps: {
      inline: [
        "@revolist/revogrid"
      ]
    }
  }
}

Tried the inline method recommended, but this issue persists.

Providing appContext to VGridVueTemplate components

I'm trying to use VGridVueTemplate to display custom components, and it's working great.

But when my component uses CustomDirectives or other libraries that do installs on the app contexts... VGridVueTemplate fails to render correctly cause it has no information from the appContext

I did a little edit on my local files for the repository, to fit my needs:

File: /src/vue-template.tsx
Line: 33

const vNode = createVNode(vueConstructor, p);
vNode.appContext = {...globalAppContext};
render(vNode, el);

I did it in an ugly way, but is working for me. And I want to do it correctly, and I think this would be helpful for everyone.

How can it be done correctly? Is there any way to do it already? If not, I think there's need to be a PR for this :-)

One of the libraries I'm using is: https://www.npmjs.com/package/vue3-touch-events

I also want to find a way to provide props to the attached component.

Which I added it by doing this, but again it is ugly. I found a way to add them to the columns data.

File: /src/vue-template.tsx
Line: 33
vNode.props = {...vNode.props, ...(vNode.props.column.props||{})};

e.$destroy is not a function in custom editor with input

https://github.com/revolist/vue3-datagrid/blob/b87d406b3aff3a93fb66d20e84744fa2bfe94b0d/public/Editor.vue

I replaced with this code:


<template>
  <input v-model="value" />
</template>

<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "Editor",
  props: ["rowIndex", "model", "close", "save"],

  setup(props) {
    return {
      value: ref(props.model[0]),
    };
  },
});
</script>

I sometimes get an error (but for some reason not always) when I try to enter data, then change focus or press Esc

Uncaught TypeError: e.$destroy is not a function
    disconnectedCallback vgrid.js:1
    disconnectedCallback index.js:26766
    disconnectedCallback index.js:2321
    removeVnodes index.js:837
    updateChildren index.js:940
    patch index.js:991
    renderVdom index.js:1196
    callRender index.js:1458
    updateComponent index.js:1380
    node_modules app.js:30724
    then index.js:1591
    dispatchHooks index.js:1361
    dispatch index.js:1329
    consume index.js:2991
    flush index.js:3046
    raf index.js:26
    node_modules app.js:32342
    scheduleUpdate index.js:1330
    forceUpdate index.js:1558
    node_modules app.js:3642
    node_modules app.js:3679
    set index.js:3629
    setStore index.js:3872
    clearFocus index.js:7161
    onFocusCell index.js:24677
    emitEvent index.js:1309
    emit index.js:1291
    focus index.js:28393
    focus index.js:27915
    onElementMouseDown index.js:28493
    onMouseDown index.js:28480
    ael index.js:27
    setAccessor index.js:593
    updateElement index.js:674
    patch index.js:986
    renderVdom index.js:1196
    callRender index.js:1458
    updateComponent index.js:1380
    node_modules app.js:30724
    then index.js:1591
    dispatchHooks index.js:1361
    dispatch index.js:1329
    consume index.js:2991
    flush index.js:3046
    raf index.js:26
    node_modules app.js:32342
    scheduleUpdate index.js:1330
    forceUpdate index.js:1558
    node_modules app.js:3642
    node_modules app.js:3679
    set index.js:3629
    setStore index.js:3872
    setEdit index.js:7190
    setEdit index.js:7401
    onEdit index.js:25994
    onSetEdit index.js:24836
    emitEvent index.js:1309
    emit index.js:1291
    doEdit index.js:28504
vgrid.js:1:3893

Please release version 3.0.97 including sorting updates from revogrid

The 3.0.96 vue3-datagrid artifacts on npmjs.com contain revogrid 3.0.96 and hence do not include our sorting improvements.
Please release vue3-datagtrid 3.0.97 include revogrid 3.0.97
TIA, Wolfgang

Custom cell element is rendered below the table on overflow

Hey,

I wanted to implement a tooltip on hover on a custom cell element. The cell contains an image and I wanted to show a bigger size image when hovering on the cell. I successfully implemented a custom cell template, but the tooltip containing the image is rendered below the table, even if I have tried increasing the z-index and set overflow: visible on all cells and columns in the table.

I am assuming there is a way to display items on top of other cells, but I cannot understand what I am doing wrong.

Issue with Vite

Unable to load the plugin with vite

 > ../node_modules/@revolist/vue3-datagrid/dist/vgrid.js:1:90: error: Could not resolve "vue" (mark it as external to exclude it from the bundle, or surround it with try/catch to handle the failure at run-time)
    1 │ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("VGrid",["vue"],t):"object"==typeof exports?exports.VGrid=t(require("vue")):e...
      ╵                                                                                           ~~~~~

error when starting dev server:

Nuxt3 compatible issue

Hi, thank for nice component, but usage it in the Nuxt3 have an compatible issues with EMS load. It is possible to fix it?

TypeError: r3 is not a function

o.defineCustomElements is not a function

Use error in vue3

<template>
  <div>
    <v-grid theme="compact" :source="rows" :columns="columns" />
  </div>
</template>

<script>
import VGrid from "@revolist/vue3-datagrid";

export default {
  name: "App",
  data() {
    return {
      columns: [
        {
          prop: "name",
          name: "First",
        },
        {
          prop: "details",
          name: "Second",
        },
      ],
      rows: [
        {
          name: "1",
          details: "Item 1",
        },
      ],
    };
  },
  components: {
    VGrid,
  },
};
</script>

Can't see the table in the DOM tree during unit test

I'm using Jest to write an unit test and when I mount the table, it never makes it into the DOM, just leaves an HTML comment in its place. I noticed since updating to 3.6.17 (from 3.2.17) tables have a moment where they're not in the DOM while running an app.

Is there a way to force things along so it's visible in Jest?

Drag and drop rows

I don't see the Drag and drop rows option in Vue. Should it be the default? Or does it need to be enabled somehow (not in the documentation)

Tried to execute the example but did not the see the grid at all.

Tried to execute the example but did not the see the grid at all.
Than I found this issue:
revolist/revogrid#278
He pointed out this working example
https://github.com/revolist/vue3-revolist-vite/blob/main/src/App.vue

There is the style added

To at least see something. Maybe this helps someone facing the same problem.
My humble idea would be to add the style to the example.

VueTemplate render repeat

Hi, @revolist , there is a problem when use @vue3-datagrid VGridVueTemplate . And I think it has the same problem in @vue-datagrid.

If we use many cellTemplate= VGridVueTemplate(CellTemplate)，in my demo, when column1 change red ,we scroll table,and column7 will red, when column2 red, then column8 will red.

codesandbox

If vgrid.frameSize = 2 , when column1 change red,then column8 will red.

The cause of this problem is Vue renderer,

Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed / destroyed.
Children of the same common parent must have unique keys. Duplicate keys will cause render errors.

Vue #key

And I add a simple uuid in template span tag , created a PR.

If you have any other good ideas, feel free to talk to me.

thx ~

Filter select condition not working when click by mouse [Firefox]

Describe the issue
Hello, i notice, when you want to filter column data nothing happends.
I tested it on Edge, there it is working propertly.
On Firefox (110.0.1, Windows) when you choose option from filter conditions by mouse click, nothing happends. If you use enter instead of mouse click, filter works.

when the first input occurs in the grid, the alphabet is always entered regardless of isComposing

I have two questions.
This issue is similar to "revolist/revogrid#244"

I am using Korean.
First, when the first input occurs in the grid, the alphabet is always entered regardless of isComposing.
Second, if you press the Tab button in the above situation, it moves to the right twice.

How can I solve the above issue?

Please help.

thank you

issue_20220721.mp4

Vite support

Since upgrading to version 3.2.0 the code no longer compiles. Missing a dependency to revogrid (custom-element).

Sandbox: https://codesandbox.io/s/revo-grid-vue3-forked-h5gz06

You can install the @revolist/revogrid and @stencil/core dependancies to get it working again, but not ideal.
https://codesandbox.io/s/revo-grid-vue3-forked-o0xmru?file=/package.json:228-245

My package.json I am using for a test project (that generated the error in the image)
{
"name": "revo-test",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@revolist/vue3-datagrid": "^3.2.0",
"vue": "^3.2.37"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.3",
"vite": "^3.0.7"
}
}

miss the publicPath of webpack config cause the unittest failure

The Vue component:

The Test file:

The Unittest result:

The resolution:

Custom Editors?

How to define new editors in vue3 syntax because this syntax const editor = VGridVueEditor(Vue.component("vueEditor", VueEditor)); will not work with vue3 syntax is there any docs or examples for the new version?

Uncaught TypeError: (0 , i.defineComponent) is not a function

After the installation ended up with the following error in the console:

vgrid.js?675a:1 Uncaught TypeError: (0 , i.defineComponent) is not a function
    at eval (vgrid.js?675a:1)
    at Object.504 (vgrid.js?675a:1)
    at o (vgrid.js?675a:1)
    at eval (vgrid.js?675a:1)
    at eval (vgrid.js?675a:1)
    at eval (vgrid.js?675a:1)
    at eval (vgrid.js?675a:1)
    at Object../node_modules/@revolist/vue3-datagrid/dist/vgrid.js (chunk-vendors.js:formatted:4549)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)

The cellTemplate cannot be used properly,Use jsx syntax

use @revolist/[email protected]

column.cellTemplate = (h, props) => <div class="cell-render">1111</div>

Drag and drop for custom cellTemplate?

Hi, @revolist . I created my custom cell by using cellTemplate and VGridVueTemplate.
It lost the drag icon and can not drag and drop anymore. How can enable drag and drop row again?

How do you include an img source in a cell?

I have tried it using cellTemplate: VGridVueTemplate(thumbnail). However VGridVueTemplate does not seem to be a part of vue3-datagrid.

Or I can manually create the element

name: 'url',
 prop: 'url',
 cellTemplate: (createElement, props) => {
   return createElement('img', {
   }, props.model[props.prop]);

but the source image url is equal to the current prop. How do I set the img src to equal the url value?

Automatic publicPath is not supported in this browser

As reported here: revolist/vue-datagrid#19

I'm encountering the same problem when testing in Chrome latest and Safari latest, with the basic code from the example and using Webpack:

Uncaught Error: Automatic publicPath is not supported in this browser
    at eval (vgrid.js?675a:1)
    at eval (vgrid.js?675a:1)
    at eval (vgrid.js?675a:1)
    at eval (vgrid.js?675a:1)
    at eval (vgrid.js?675a:1)
    at Object../node_modules/@revolist/vue3-datagrid/dist/vgrid.js

<template>
  <div id="app">
    <v-grid theme="compact" :source="rows" :columns="columns"/>
  </div>
</template>

<script>
import VGrid from "@revolist/vue3-datagrid";
export default {
  name: "App",
  data() {
    return {
      columns: [{
          prop: "name",
          name: "First",
        },
        {
          prop: "details",
          name: "Second",
      }],
      rows: [{
        name: "1",
        details: "Item 1",
      }]
    };
  },
  components: {
    VGrid,
  },
};
</script>

Tried to navigate, but no router was found. Make sure you have mounted Vue Router.

Hey,

I get this warning every time I click on a cell. I've seen where it's coming from but I don't understand why a router is even needed in the first place. When is this called?

vue3-datagrid/src/vue-component-lib/utils.ts

Lines 82 to 97 in 9f2d66f

    
           const handleRouterLink = (ev: Event) => { 
        
             const { routerLink } = props as any; 
        
             if (!routerLink) return; 
        
             const routerProps = Object.keys(props).filter(p => p.startsWith(ROUTER_PROP_REFIX)); 
        
             if (navManager !== undefined) { 
        
               let navigationPayload: any = { event: ev }; 
        
               routerProps.forEach(prop => { 
        
                 navigationPayload[prop] = (props as any)[prop]; 
        
               }); 
        
               navManager.navigate(navigationPayload); 
        
             } else { 
        
               console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.'); 
        
             } 
        
           }

the data repeats when generate the table.

Hi,

i use

"@revolist/vue3-datagrid": "^3.0.96",
"vue": "^3.0.5",
"vite": "^2.4.4",
"typescript": "^4.3.5",

when the table is generate, the data is repeat, in the photo, the colum 'SEXO', repeat at 3 times, but this only happens in production

Vue3 codesandbox examples not working

Many thanks for the amazing work on this project.

The examples you posted on codesandbox for Vue3 are not working.

1: https://codesandbox.io/s/revo-grid-vue3-thry7
2: https://codesandbox.io/s/revo-grid-vue3-forked-c16kb

When I try to use the package locally it does not work either. I am using vitejs with the Vue 3 template.

Minimal project uploaded here: https://github.com/alythal/vue3-revolist-sample

The most important sections are pasted below:

App.vue

<template>
  <v-grid theme="compact" :source="rows" :columns="columns"></v-grid>
</template>


<script>
import { defineComponent } from "vue";
import VGrid from "@revolist/vue3-datagrid";
export default defineComponent({
  name: "App",
  data() {
    return {
      columns: [{ prop: "name" }, { prop: "details" }],
      rows: [
        {
          name: "1",
          details: "Item 1"
        }
      ]
    };
  },
  components: {
    VGrid
  }
});
</script>

package.json

"dependencies": {
    "@revolist/vue3-datagrid": "^1.0.6",
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.1.2",
    "@vue/compiler-sfc": "^3.0.5",
    "@vuedx/typecheck": "^0.4.1",
    "@vuedx/typescript-plugin-vue": "^0.4.1",
    "typescript": "^4.1.3",
    "vite": "^2.0.0-beta.45"
  }

Firefox error message

Chromium error message

If I could help with the issue please let me know, I tried debugging it myself but unfortunately with no success.

The issue #5 related to Vite seems to be fixed in the latest Vite.

TS7016: Could not find a declaration file for module '@revolist/vue3-datagrid'

Hi,

I installed the module as recommended in the docs, trying to incorporate in a new vue3 project. Followed the example to include a simple grid in a vue component, but getting the following error.

TS7016: Could not find a declaration file for module '@revolist/vue3-datagrid'. '/Users/borislav/temp/vuelearn/pitchfor/node_modules/@revolist/vue3-datagrid/dist/vgrid.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/revolist__vue3-datagrid` if it exists or add a new declaration (.d.ts) file containing `declare module '@revolist/vue3-datagrid';`
    14 | <script lang="ts">
    15 | import { ref, defineComponent, onMounted } from 'vue'
  > 16 | import VGrid from '@revolist/vue3-datagrid'

There is nothing complicated in my environment, I just used Vue CLI to generate the project scaffolding and then immediately tried using vue3-grid following the docs and hit the above roadblock.

Any suggestion what I could do to solve this?

Dynamic data not load properly with wrapper VGridVueTemplate

Vue3.
Here is my problem.
I have a variable initialized to null which will then be loaded with an array of 23 elements.

These elements have properties, some of which are booleans or types that must be interpreted.

But cells with for example the value false are displayed with true.

When I log what happens in an onVnodeMounted function I have the feeling that only part of the data is loaded and that the values of these data affect themselves.

cellTemplate: VGridVueTemplate((VNode: IVNode) => h(BasicSwitch, { label: "", modelValue: VNode.model.orderPortfolioMode, // Maybe true or false but it's always true isDisabled: true, onVnodeMounted: () => { console.log(VNode); // Only 8 elements out of 23 } }))

It would come from the VGridVueTemplate wrapper.
cellTemplate: VGridVueTemplate((VNode: IVNode) => VNode.model.orderPortfolioMode.toString()) return always true -> KO

cellTemplate: VGridVueTemplateConstructor((VNode: IVNode) => VNode.model.orderPortfolioMode.toString()) return true and false -> OK

Has anyone ever had the problem?

	const handleRouterLink = (ev: Event) => {
	const { routerLink } = props as any;
	if (!routerLink) return;

	const routerProps = Object.keys(props).filter(p => p.startsWith(ROUTER_PROP_REFIX));

	if (navManager !== undefined) {
	let navigationPayload: any = { event: ev };
	routerProps.forEach(prop => {
	navigationPayload[prop] = (props as any)[prop];
	});
	navManager.navigate(navigationPayload);
	} else {
	console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
	}
	}