How to use handsontable in handsontable ？

Tags: #<Tag:0x00007efc6488a010>
#1

mmexport1666235041174
mmexport1666235041174.png1246×562 50 KB

It is similar to the following code.
var carData = [ [’’, ‘2017’], [‘Chrysler’, ‘2018’], [‘Nissan’, ‘2019’], [‘Toyota’, ‘2020’] ], container = document.getElementById(‘example1’), colorData = [], hot, timer; manufacturerData = [ { name: ‘BMW’, country: ‘Germany’, owner: ‘Bayerische Motoren Werke AG’ }, { name: ‘Chrysler’, country: ‘USA’, owner: ‘Chrysler Group LLC’ }, { name: ‘Nissan’, country: ‘Japan’, owner: ‘Nissan Motor Company Ltd’ }, { name: ‘Suzuki’, country: ‘Japan’, owner: ‘Suzuki Motor Corporation’ }, { name: ‘Toyota’, country: ‘Japan’, owner: ‘Toyota Motor Corporation’ }, { name: ‘Volvo’, country: ‘Sweden’, owner: ‘Zhejiang Geely Holding Group’ } ]; manufacturerData2 = JSON.parse(JSON.stringify(manufacturerData)) hot = new Handsontable(container, { data: carData, colHeaders: [‘Car’, ‘Year’], columns: [ { type: ‘handsontable’, handsontable: { colHeaders: [‘Marque’, ‘Country’, ‘Parent company’], autoColumnSize: true, data: manufacturerData, columns: [ { data: ‘name’ }, { data: ‘owner’ } ], getValue: function () { var selection = this.getSelectedLast(); return this.getSourceDataAtRow(selection[0]).name; }, } }, { type: ‘numeric’ } ], beforeKeyDown: function (e) { clearTimeout(timer); timer = setTimeout(function () { let newArr = [] if(hot.getSelectedLast()[2]==0){ for(let item of manufacturerData2){ if(item.name.indexOf(e.realTarget.value)!=-1){ newArr.push(item) } } } manufacturerData.length=0 for(let jtem of newArr){ manufacturerData.push(jtem) } }, 500); } });

#2

Hi @2992919713

haven’t we spoken here before https://github.com/handsontable/handsontable/issues/10033? I think that there we already discussed how to update the data within handsontable cell type. The date shows (like here https://jsfiddle.net/omLqrt10/) but the datapicker does not open as this table is not editable (that is how this cell type works by default). If you want this field to be editable you can take one of those approaches

  1. Create a custom cell type based on the handsontable cell type
  2. Use nestedRows feature to pack that details on parent-child basis
  3. Load a whole Handsontable instance to a cell (it will be editable by default)

ps. I have to admit that this code is really hard to hear. Wouldn’t it be better to put it in a demo?

#3

Hi @2992919713

would you be able to share a demo? Or update us if the issue is already solved.

#4

yes,thank!

#5

Thank you for the confirmation. I’m closing this forum thread.

#6