Cell template slots

[pejrak]

Hi Rob, I am trying to use a slickgrid in my vuejs project, and found your work. I have already tried using slimgrid with my data and it works great to view them and format them.

The difficult part I am finding is how to make the vuejs participate in rendering cells or if it is even viable. I am attempting to edit on your work and see if I can pass some rendering onto vuejs. This is also to achieve the ability to trigger events via the *.vue view component so I can call my vuex actions directly. Did you consider this or have any ideas?

I will try to build on your work if not, and update you on my efforts. Thank you for creating this package.

[pejrak]

this is something that I imagine should work like in the view:

<grid :data='gridData'>
  <template slot='name' slot-scope='data'>
    <button @click='handleNameClick'>{{data.value}}</button>
  </template>
</grid>

While the data via slot-scope would be an object like this:

data = {
  value: cellDataValue,
  item: rowItemData,
  cell: cellIndex,
  row: rowIndex,
}

[rob-white]

Hey @pejrak! I'm glad your finding the package useful. Sorry I'm just now getting back to you, I just started a new job and haven't had any time to work on open source stuff recently.

This is functionality I would really love to have added, but I'm not even sure it's possible with the way SlickGrid handles rendering/formatting of cells behind the scenes (ie. jQuery removing, adding, and manipulating DOM elements out the wazoo). But that's just my initial thoughts... I could be totally wrong since I haven't really taken a look at it very much 😅.

So if you want to give it a go and try to figure something out, feel free to fork what I have and hack it into what you need. Let me know how it goes! 😃

[pejrak]

I did not get anywhere in this yet, the dynamic load is just wrestling with the vue instances too much and looks like each cell content would have to be a standalone vue instance. Will work a bit more on this when time allows. I would be interested how they solved it in paid version, the https://www.ag-grid.com/

[pejrak]

So I gave it another go, and managed to get something like this working:

import Vue from 'vue'

export default (r, c, val, def, data) => (VueComponent) => {
  const containerId = `item-cell-${r}-${c}`
  
  setTimeout(() => {
    new Vue({
      el: `#${containerId}`,
      render: (html) => html(VueComponent, {
        props: {
          containerId,
          item: data
        }
      })
    })
  }, 10)
  return `<div id='${containerId}'>${r}:${c}</div>`
}

This is basically a formatter function on a column, that returns a function accepting a Vue component, and as you guessed it does the following:

• return a div with unique element id to the formatter
• after Xms, mount the instantiated Vue component onto that div

It's working for me and will try to convert it to the slot template style mounting. I am testing this with some ~2k rows and performance was not impacted yet. I will see how it goes further.

[daveedwards45]

Hi Pejrak, How did you finish up on this? I'm about to start trying something similar so I'd welcome any advice.