Vue components inside cell?

[bbbford]

How could one use a Vue component inside of a cell?

For example, I'd like to put an element-ui button in there for edit/delete/etc. I'd need be able to handle the click event.
I'd also like to use a datepicker component.

This does not seem obvious to me using the cell renderer.

Thanks for all the hard work on this great component!

[revolist]

Hey @bbbford, it's a nice feature to have.
We are considering adding this in the future, for now, custom content limited with VNode native DOM web component. This allows the fastest response and dom update.

[bbbford]

Thanks @revolist. How would one create a column with some action buttons and handle the click events?

[revolist]

@bbbford hey, what exactly are you referring to?
there are custom cells and custom headers

https://revolist.github.io/revogrid/guide/column.customHeader.html
https://revolist.github.io/revogrid/guide/cell.renderer.html

const columns = [{ name: 'Person name', prop: 'name', cellTemplate: (createElement, props) => { return createElement('span', { style: { color: 'red' }, onClick() { // my click happened }, onKeyDown: (e: KeyboardEvent) => {} }, props.model[props.prop]); }, }];

[bbbford]

Thank you @revolist! That was what I needed to get going.

[revolist]

@bbbford , just in case you still consider vue:
https://github.com/revolist/vue-datagrid/releases/tag/v1.2.1

Still it's recommended to stick with classic approach for better performance.

[bbbford]

Thank you @revolist !

[bbbford]

@revolist I continue to struggle implementing vue components into the grid.

Even your example here fails to compile - https://github.com/revolist/vue-datagrid/releases/tag/v1.2.1

However, what I am really trying to accomplish is to use components from Element UI as my Cell Editor. For example, I want to use this date picker when editing a date cell - https://element.eleme.io/#/en-US/component/date-picker

Any guidance on how I could accomplish this?

[revolist]

@bbbford ,

• datepicker there is an implementation sample with external component:
  https://github.com/revolist/revogrid-column-date
• vuecomponent: we'll check it

[bbbford]

I have looked at the column date plugin, but am left confused. I will study it some more.

It would be nice to be able to use any vue component as custom editor, without having to create a plugin, like so -

<template>
    <div class="grid-container">
        <v-grid
            theme="material"
            :source="rows"
            :columns="columns"
            :col-size="150"
            :resize="true"
            :columnTypes="gridPlugins"
            @afterEdit="doEditCell"
            :editors="gridEditors"
            >
        </v-grid>
    </div>
</template>

<script>
import VGrid, {VGridVueTemplate} from "@revolist/vue-datagrid";
import TestEditor from '@/components/misc/grid-custom-editors/TestEditor';

export default {
    name: 'DataGrid',
    components: {
        VGrid,
        TestEditor
    },
    props: {
        columns: Array,
        rows: Array
    },
    data () {
        return {
           gridEditors: { 'myEditor': VGridVueTemplate(TestEditor) }
        }
    },
}
</script>

[revolist]

Even your example here fails to compile - https://github.com/revolist/vue-datagrid/releases/tag/v1.2.1

Are you using typescript?
The example was provided in typescript :-)

[revolist]

@bbbford about Vue component in cells. I have created a sample for you here:
https://codesandbox.io/s/revogrid-vuecomponent-9yh0o?file=/src/App.vue

[bbbford]

@revolist Thank you for this. I really appreciate your willingness to help! I was able to render my vue component as a cellTemplate.

Can the same concept be applied to render a vue component as a cell Editor?

Attempting to do so, like this, results in TypeError:

https://codesandbox.io/s/revogrid-vuecomponent-forked-5xlrs?file=/src/App.vue

[revolist]

@bbbford in order to create an editor you have to follow rules specified in https://revolist.github.io/revogrid/guide/cell.editor.html

We'll provide a common adapter for editors in the nearest future, I have created a draft for you which you can use for your purposes. Just copy the whole editorAdapter.js as it is.

https://codesandbox.io/s/revogrid-vueeditor-bxpq0?file=/src/App.vue

[bbbford]

@revolist Brilliant! I'm well on my way now... thanks you!!

[Tadeu17]

Hey guys, I read all this topic, and while I was thinking of opening an issue, I believe this fits here.
I've done the following example, which you can see in the following image.
Everything is working fine until I try to import the CellHeader to then use it on the VGridVueTemplate.
Got some hints to solve this? Basically if I use the base render function, all good, when I try to import the CellHeader, I get the error in the image.
Any tips?

[bbbford]

I'd like to reopen this too. A big reason why I can't use many other table systems is, they lack the ability to work with reactive data and components. For instance, Here is a slot I use one a vuetify datatables, it allows me to replace the column render of choice using a template, Im not sure if I can accomplish something similar using this, so far it doesnt appear so, which severely limits how this can be used in my opinion.

Chips on status:

<template v-slot:item.status="{ item }">
	<v-chip v-if="item.status=='inactive'" class="ma-2" color="red" outlined small>Inactive</v-chip>
	<v-chip v-else-if="item.status=='active'" class="ma-2" dark color="green" small>Active</v-chip>
         <v-chip v-else class="ma-2" color="black" outlined small>Pending</v-chip>
</template>

Or an example of using a button component:

<template v-slot:item.id="{ item }">
     <v-btn small @click="edit(item.id)">Edit</v-btn>
</template>

You can do this, check the documentation.

https://revolist.github.io/revogrid/guide/framework.vue.component.html

[timothymarois]

Ah sorry. I actually just removed the comment since I realized it is in the documentation. Thanks for the swift reply!

[timothymarois]

@bbbford While I got the component to import, and added to columns, it gives an error looks like same as @Tadeu17 has reported. Component fails to work using cellTemplate.

import TBtn from "../../../components/dynamic/table/Button.vue";

cellTemplate: VGridVueTemplate(TBtn),

Button.vue

<template>
    <v-btn
        :rounded="false"
        elevation="0"
        small
    >Edit</v-btn>
</template>


<script>
export default {
	props : ['rowIndex','prop']
}
</script>

[revolist]

@bbbford While I got the component to import, and added to columns, it gives an error looks like same as @Tadeu17 has reported. Component fails to work using cellTemplate.

import TBtn from "../../../components/dynamic/table/Button.vue";

cellTemplate: VGridVueTemplate(TBtn),

Button.vue

<template>

    <v-btn

        :rounded="false"

        elevation="0"

        small

    >Edit</v-btn>

</template>





<script>

export default {

	props : ['rowIndex','prop']

}

</script>

For faster reply please provide a sample in online editor, you can fork our sample

https://codesandbox.io/embed/data-vue-test-3wkzi?file=/src/App.vue&codemirror=1

[timothymarois]

@revolist Here, quickly copied the code I provided above, same results on this isolated sandbox.

https://codesandbox.io/s/kind-nobel-4v45w?file=/src/App.vue

[revolist]

@revolist Here, quickly copied the code I provided above, same results on this isolated sandbox.

https://codesandbox.io/s/kind-nobel-4v45w?file=/src/App.vue

@timothymarois I see your problem. Initially vue-component template was built with idea of typescript support. Hence to make it work correctly you have to return Vue instance as component, not just structure.

https://codesandbox.io/s/sleepy-colden-7c468?file=/src/Button.vue

<script> import Vue from "vue"; export default Vue.extend({ props: ["rowIndex", "prop"], }); </script>

[revolist]

@timothymarois starting from version 2.9.8 you can pass as structure as well:
https://codesandbox.io/s/tender-night-zjt80

[lesiki]

Hi @revolist , thanks for all the clear instructions here.

My code is organised like yours in this example, where the Button component is in a separate source file. What is the recommended way to get the actual cell value inside the cell template? I can access prop and rowIndex, but how do I get the current cell's value?

I could use a Vuex getter with the prop & rowIndex to look that up in the custom component, but I wonder if that will affect performance when I have many rows?

[lesiki]

👆🏽 I figured this out by looking at the Editor example.

In addition to prop and rowIndex, you can also receive a prop called model in your custom template.

The model is populated with all the data for your current row, so this.model[this.prop] gives you access to the value that would have been displayed in this cell by default.

[xcchcaptain]

@lesiki thanks ,it works
example

[tobiasBora]

Is it possible to translate this code to use react component instead of vue components?