Correct way to initialize table with metadata

Tags: #<Tag:0x00007efc600c5220>

Hi there!

I want to add some invisible “meta-information” to every row of my data source and I can’t quite wrap my head around how to best achieve this. As of now, the meta information is contained inside an invisible column. I have created a small fiddle ilustrating this:

https://jsfiddle.net/5db2Lk0g/

This behaves as expected - it colors the rows by level (the first - and hidden - column). However, I feel like the solution is not the “cleanest” way to solve the problem, and it is susceptible to this bug: [GH #5883] When using custom renderers, hiddenColumns and colWidths the rendering fails to work properly, which causes the HTML in the bottom of the table to not render any more.

It has been fixed in v8, but I cannot upgrade to that version.

I feel like setCellMeta and getCellMeta aren’t really appropriate, as they can only be used to add information after the table has been rendered. Setting the correct class name for every cell using the cell option does feel rather verbose.

Is there a better way to do this?

Hi @chaosflaws

There is no method to pass an array or cellmeta so we can either use

  • cell
  • cells
  • setCellMeta
  • setCellMetaObject

you’ve mentioned that setCellMeta works only when you already renderer the table. But as you use the getDataAtCell method inside the level variable you still need to attach the meta once the table is loaded.

While testing cellmeta of Handsontable I’ve ended up using setCellMeta for single cells https://jsfiddle.net/handsoncode/tb7rw0xk/ but for the whole table I would create a function that returns an array of objects (cells) via cell option https://jsfiddle.net/AMBudnik/t3qmyhdr/

3 Likes

Thanks, I’ve got it now! This can be closed.

I’m glad to hear that. Thank you for the update, @chaosflaws