Send multiple attributes in one column

#1

I want to utilize multiple attributes in one column.

ctrl.colHeaders = [
                "Name",
                "Status",
            ];
ctrl.columns = [
                { data: "name", className: "htCenter htMiddle" },
                { data: "status", className: "htCenter htMiddle" },]

Below is my custom renderer:

myTooltipRenderer(instance, td, row, col, prop, value, cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        td.innerHTML = '';
        var divMain = document.createElement('DIV');
        divMain.title = 'This is dummy tooltip';
        divMain.innerHTML= value        
        td.appendChild(divMain);
    }

I want to send say “cost” with “status” attribute, how am I suppose to do that?

#2

Hi @mehdiraza

I do not quite understand the intention. Could you tell me what is the cost here? I’ve loaded your settings here https://jsfiddle.net/6mt79vdw/ so we can work on that demo.

#3

Consider a product having following features
Product= {name: “chocolate”, status:“available”, quantity: 4, cost: 200}
I want to show the table in below manner

Col1
chocolate
Col2
Available with cost of 200

So second column consists of multiple attributes from the same data

#4

Did you get my point ? @aleksandra_budnik

In your jsFiddle code case, I just need “John is active” in second column. Which means I need to pass two attributes in one column.

#5

If that should be applied only for the cell renderer then you can use the custom renderer logic like in this demo https://jsfiddle.net/u1jfse9x/. But then the cell value is empty.

#6

That’s more like accessing it from global list with just row attribute. But, I was looking for internal solution of sending multiple attributes to one column. Is that not possible directly from this variable?

var hot = new Handsontable(example1, {
  data: shop,
  licenseKey: 'non-commercial-and-evaluation',
  colHeaders: true,
  columns: [
  	{data: 'name'}, {data: '--ANY WAY TO SEND TWO ATTRIBUTES--'}
  ]
});

Is there any way to do so, let me know.

#7

Not at the moment, you would need to parse your dataset. Meaning, combine those elements in a separate object key and then load the altered dataset.

#8

I see. Thanks for the response.

#10

I don’t know if this will help, but I had a similar issue for my own project. What I did was

  1. Have data from two attributes that I wanted to combine into one column.
  2. Hide one of the columns in my Handsontable GridSettings.
  3. In my render function, get the entire row of data using handsontable’s getDataAtRow()
  4. Add the data from the hidden column to the innerHTML of the column that will show both values.

So if you have a set of data with two columns, and want to put both values in the first column:

myRenderer(instance, td, row, col, prop, value, cellProperties) {
   Handsontable.renderers.TextRenderer.apply(this, arguments);
   const rowData = instance.getDataAtRow(row);
   if (col === 0) {
     td.innerHTML += ' ' + rowData[1];
   }
}

var hot = new Handsontable(example1, {
  data: shop,
  ...
  hiddenColumns: {
     columns: [1]
  }
});

The drawback here is that when you try to copy the cell data of column 0, it only gives the value attribute 0, not the combined text.

Apologies if this is unhelpful/bad coding practice/ I misunderstood your question.

#11