What is the best way to create nested tables?

Getting help Questions
,
1

What is the best way to create nested tables?

I created a custom renderer and succeeded in drawing a handsontable within a handsontable, but keyboard events (arrow keys, F2, Enter, etc.) behave strangely.

I would like to fix this keyboard behavior. (Or is there a better way to create nested tables?)

I am attaching my example.

https://jsfiddle.net/fbdykon0/3/

Thank you for your help.

2

Hi @idog

Thank you for contacting us. Nested tables aren’t officially support by Handsontable, and even as it is possible to display nested table with a custom renderer it’s still rather a workaround which has it’s flows, mainly not being able to edit the data inside the nested table.

I explained this in more details in this thread: Outermost table retains focus

As for now we don’t have this feature planned on our roadmap, but if that changes I will update you.

3

thank you for the reply.
Since nested tables are not officially supported, we solved it another way.

I inserted an inner table into a custom editor and forcibly disabled all events in the parent table when the editor was opened.
(This method is a temporary solution and is close to a hack, so do not use it unless absolutely necessary.)

// remove all events
open(...) {
    // do something...

    this.eventBackup = parentHotInstance.eventListeners || []
    this.eventBackup.forEach(v => {
        v.element.removeEventListener(v.event, v.callbackProxy, v.options)
    })

    parentHotInstance.eventListeners = []
}

// restore all event on close
finishEditing(...) {
    // do something...

    parentHotInstance.eventListeners = this.eventBackup
    this.eventBackup.forEach(v => {
        v.element.addEventListener(v.event, v.callbackProxy, v.options)
    })
}
4

Hi @idog

Thank you for sharing this solution, we appreciate it!