Use component method as renderer in Vue.js

Tags: #<Tag:0x00007efc616301f0>
#1

Hi, I hope you guys are doing great!

I am following this example for conditional formatting (https://handsontable.com/docs/8.2.0/demo-conditional-formatting.html), but I’m having trouble getting it to work in Vue.

If I add the renderer as a method of the component, the new styles are not applied. If, however, the renderer is outside of the component, then it works.

Something like this:

<script>
function myRenderer (instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments)
  td.style.color = 'blue'
  td.style.background = 'red'
}

export default {
  name: 'MyComponent',

  mount() {
    // Fetch some data with HTTP 
  },

  data () {
    return {
      hotSettings: {
        cells: function (row, col) {
          const cellProperties = {}
          if (row === 0) {
            cellProperties.renderer = myRenderer // Works
            // cellProperties.renderer = this.myRenderer // Doesn't Work
          }

          return cellProperties
        },
        // ...
      }
    }
  },

  methods: {
    myRenderer (instance, td, row, col, prop, value, cellProperties) {
      Handsontable.renderers.TextRenderer.apply(this, arguments)
      td.style.color = 'blue'
      td.style.background = 'red'
    },
  }
}
</script>

Am I missing something? Is there a way to do it all in Vue world?

My use case is simple. I need to format each cell based on some metadata. This metadata is fetched separately from the data itself.

#2

Hi @johnverde

conditional formatting is one of the cases for the custom renderer. Here’s the demo for the Vue app with a custom renderer https://handsontable.com/docs/8.2.0/frameworks-wrapper-for-vue-custom-renderer-example.html

#3

Thank you for the pointer @aleksandra_budnik

I’ve managed to get a simple example working, however I still have an error when trying to use a component’s data. My renderer function currently looks like this:

renderer: function (instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments)

    if (!this.shouldChange[row][col]) {  // Error: `this` is undefined
      return
    }

    td.style.color = 'blue'
    td.style.background = 'red'
}

this.shouldChange is only available after the component is mounted. Is there a way to work around this? I tried using updateSettings from mount with no luck

#4

I was misusing updateSettings. I managed to get it working now. Thanks for all the help. This can be closed now.

#5

Great, Thank you for the update @johnverde

#6