Trigger function from within formatter? (responsiveLayout: collapse > toggleList)

Question

Is there a way to trigger a function from within a rowFormatter? I'm using the responsiveLayout: "collapse"-option, and I really like it.

However, I would like to trigger the toggleList function (or what's it's called.... 1 from '19)

I would like to not go the .click() way, so I created my own (rip-off) solution within the rowClick:

                    let isOpen = row._row.modules.responsiveLayout.open;
                    var collapseEl = row._row.element.querySelector('div.tabulator-responsive-collapse');

                    if (!(isOpen)) {
                        collapseEl.classList.add("open");
                        if (collapseEl) {
                            collapseEl.style.display = '';
                        }
                    } else {
                        collapseEl.classList.remove("open");
                        if (collapseEl) {
                            collapseEl.style.display = 'none';
                        }
                    }
                    row._row.modules.responsiveLayout.open = !(isOpen);

But... There must be a good way to trigger toggleList(), instead of writing a rip-off function, which doing the same thing...

I've tried to look through the values and functions in row._row, with no luck. I'm 99.7% sure that I missed this part in the documentation........ But I've really tried to search the best I could.

TL;DR: I would like to trigger the toggleList() function defined within formatter, in my rowClick() event-function. Is that possible?

Answer 1

There is no toggleList function built into Tabulator.

In the example you reference there it is simply a function called toggleList that is defined inside the row formatter and triggered when an element added by the row formatted is clicked.

Because the toggleClick function is defined inside the row formatter its scope is limited to that formatter function so it cannot be accessed from outside it.

one way to get around this would be to assign the function to a property on the row data object then you could access it from else where in the table.

So if we take the example you provided a link to and at the top of the customResponsiveCollapseFormatter function add the following:

var data = cell.getData(); //retrieve the row data object

Yhen where we define the toggleList function, instead of the simple function definition we can assign it to a property on the data object, lets call it collapseToggle, we will also tweak it so it dosnt need the isOpen property passed in and insted flips the state of the open variable itself, that way it can be called from anywhere outside the formatter without knowledge of the current state:

data.collapseToggle = function toggleList(){
    open = !open;

Then in our cellClick function we can check to see if the collapseToggle property is defined on the row data and then call it:

cellClick:function(e, cell){
    var data = cell.getData();

    if(data.collapseToggle){
        data.collapseToggle();
    }
}