Master-detail view with handsontable vue.js

Tags: #<Tag:0x00007f8b25a8f360>
#1

Hi,

I’m using the vue.js wrapper and I don’t see examples or plugins permitting to do a master-detail view on an expanded row, like so:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/AdvancedMasterDetailView/jQuery/Light/

I read the nested row documentation but it does not suit my needs. I need to expand any kind of html tags, not particularly a table w/ the very same columns. The design pattern I wish is the kind of pattern where you have a modal window opened with details information once clicked on a column’s row, but instead of a modal, I prefer an expanded row to display the details.

Am I missing something?

Thanks, and keep the good work!

#2

Hi @angus

When I’m exploring the demo it looks like you also the mergeCells to complete the goal. You are able to push every HTML inside a cell using renderer: 'html' but sometime it can affect how the tale is displayed.

Have you already tried to make some examples?

#3

Hi @aleksandra_budnik

If you click on the address tab of the devexpress sample, you’ll see the kind of data I want to display.
I need to inject other data that aren’t part of the table data, so I’ll do another REST call to retrieve the REST detail view (item), whereas the table is using the REST resource view (collection), where the collection contains only a portion of the attributes, whereas the detail view contains all attributes.
The expanded row will displays attributes not available in the collection.

Hope it helps :wink:

#4

If you use a custom renderer to pass a different handsontable instance you are able to pass completely new data that do not have any connection to what is saved in the base table. However, this is a quite complex case so I recommend to check if it works with all features that are in your requirements.

Example https://codesandbox.io/s/stupefied-snyder-s6num

#5

Thanks a lot @aleksandra_budnik

This custom renderer is very interesting, but as it’s defined at the cell level (i.e. not the whole row without column), I guess it’s better that I keep the modal window pattern then.

Thanks anyway!

1 Like
#6