Tabulator: Question: Any plans for master/detail view (or nested grids)?

[lrowleyUB]

Hi Oli,

I have a requirement for a master/detail grid display where I need the ability to expand/collapse rows to show more information. Is there any plans to add this to Tabulator? This control would be my first choice to use in the project!

Thanks,
Laura

[lrowleyUB]

Also FYI - I am aware of the row grouping and will be evaluating this as a possibility. The detail portion of the requirement is comprehensive and I'm not sure if row grouping alone would satisfy it. I will keep you posted!

[olifolkerd]

Hey @lrowleyUB

Thanks for getting in touch.

You would be able to do this using the rowFormatter callback, you can use it to insert other elements into the row, which in this case could be your details section.

Let me know if you need any further info.

Cheers

Oli :)

[lrowleyUB]

Excellent, thank you! I will look into this callback as well.

From: Oli Folkerd [e-mail]
Sent: Monday, March 12, 2018 2:47 PM
To: olifolkerd/tabulator [e-mail]
Cc: Laura Rowley [e-mail]; Mention [e-mail]
Subject: Re: [olifolkerd/tabulator] Question: Any plans for master/detail view (or nested grids)? (#956)

Hey @lrowleyUBhttps://github.com/lrowleyub

Thanks for getting in touch.

You would be able to do this using the rowFormatter callback, you can use it to insert other elements into the row, which in this case could be your details section.

Let me know if you need any further info.

Cheers

Oli :)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/olifolkerd/tabulator/issues/956#issuecomment-372421465, or mute the threadhttps://github.com/notifications/unsubscribe-auth/Af4QzJ1_xWhyQ7NtIUBSy6cYmn6mB4uhks5tdsKfgaJpZM4Sm8bX.

---

This email has been scanned by the Symantec Email Security.cloud service.
For more information please visit http://www.symanteccloud.com

---

[lrowleyUB]

UPDATE: _rowFormatter_ callback is exactly what I needed. Thank you!!

[olifolkerd]

There is now an example of nested tables here

[lrowleyUB]

Hi Oli,

Diving into this callback further, it appears that adding a nested table is adding two copies of the table. Here is my code:

var rowElement = row.getElement();
                var data = row.getData();
                var $divW = $('<div class="divAlertWrapper" style="display:none;"></div><br />');
                var $table = $('<table class="tblInsertAlerts" data-comcode="' + data.Comcode + '"><tr><td>TEST</td></tr></table>');

                $divW.append($table);              
                rowElement.append($divW);

                //check how many added
                $('.tblInsertAlerts[data-comcode="' + data.Comcode + '"]').each(function (i) {
                    console.log(data.Comcode + ' index ' + i);
                });

For example, if data.Comcode = 10, then the output in the console is always:
10 index 0
10 index 1

Is this by design? My dynamic table has a class defined only (no id attribute), which makes it difficult to use as a selector when there are two tables of the same. When I remove the div wrapper style "display:none" I still only see one table, but source is showing two.

Thanks,
Laura

[lrowleyUB]

Oli I found the problem! Looking at the source I noticed that the 2nd table was appending to the line break that was in my div wrapper:

var $divW = $('<div class="divAlertWrapper" style="display:none;"></div><br />');

When I removed the line break - the table stopped duplicating. I'm assuming your rowFormatter is using line break for parsing/appending the new html. Just thought I would point this out to you so you can reproduce and address it.

Thanks,
Laura

[olifolkerd]

Hi Laura,

Tabulator does not process any line breaks at all.

The issue is in the way that you have created the divW element. You should only pass one top level element in that string otherwise it will be counted as an array of elements and therefore when you call the append function it will append the table element to both and initialise them both.

That isnt an Tabulator thing, that is just how jQuery works im afraid.

I would be happy to suggest a solution for you if needed.

Cheers

Oli :)

[lrowleyUB]

Ahh yes, so sorry!! I should've picked up on this. I changed it like so and all is good:

var $divW = $('<div class="divAlertWrapper" style="display:none;"><br /></div>');
$divW.prepend($table);

My apologies again!

[olifolkerd]

@lrowleyUB

No need to apologise, every day is a school day.

Glad to hear you got it working.

Cheers

Oli :)