How to use hot-renderer in renderer when using v-for for column declaration in Vue

Tags: #<Tag:0x00007efc6533f618>
#1

Halo~

<hot-table :settings="hotSettings">
  <hot-column :width="120">
    <stars-rating hot-renderer></stars-rating>
  </hot-column>
  <hot-column v-for="n in customTableColumns" :width="120" v-bind:key="'col' + n">
    <color-picker hot-editor hot-renderer></color-picker>
  </hot-column>
</hot-table>

when i found if i used hotInstance.updateSettings({columns: this.customTableColumns}), custom component will be deleted <hot-column :width="120"> <stars-rating hot-renderer></stars-rating> </hot-column>, and show the new customTableColumns

So i try to use settings: {columns: [{renderer: customRenderer } ]} instead, but how to use in Vue?

Thanks

#2

What’s more, using hotInstance.updateSettings({columns: []}) will remove component’s slot

#3

Hi @kwantsang

That’s correct. Updating the settings, and providing the columns parameter will override hot-column component.

As for the renderers, at the moment, this is the correct way to assign them: https://handsontable.com/docs/vue-custom-renderer-example/#custom-renderer-in-vue-2

#4

Thanks @adrian.szymanski
But how to set renderer’s value to a component, like

import CustomComponent from 'custom/customComponent'

export default {
    components: {
        CustomComponent
    },
   data() {
       return {
          settings: {
              columns: [
                    {
                         renderer: CustomComponent      // ???? how to use renderer with CustomComponent
                    }
              ]
          }
       }
   }
}
#5

Hi @kwantsang

Here’s an explanation on how to declare custom renderer as a component using hot-column:

https://handsontable.com/docs/vue-hot-column/#declaring-a-custom-renderer-as-a-component

#6 
<div id="advanced-editor-example" class="hot">
  <hot-table :settings="hotSettings">
    <hot-column :width="100">
      <stars-renderer hot-renderer></stars-renderer>
    </hot-column>
    <hot-column v-for="n in 2" :width="150" v-bind:key="'col' + n">
      <color-picker hot-editor hot-renderer></color-picker>
    </hot-column>
  </hot-table>
</div>

Yes, i know this way.
But what i want is dynamically defined it in setting: { columns: []}, not as the HTML tag T T

#7

Hi @kwantsang

I found a solution used by one of our users. Maybe that will help you achieve your goal. Here we have a custom renderer as a Vue component:

https://jsfiddle.net/ssprusakov/8pdn6h0x/

#8

Actually, i am using this now, but i want to use custom renderer as below picture, it’s more flexible to config columns, such as hidden , show, freeze column instead of using index to control.

image
image.png1500×2380 503 KB

#9

OK, now I have full understanding of your needs. Unfortunately it’s not possible to do this that way at the moment.

#10

it’s fine, waiting for your new feature, thanks bro