5.5.1 Cells are not editable in reponsive layout mode

[ortwic]

Describe the bug
When reponsive layout mode is enabled the expanded cells are not editable anymore.

Tabulator Info
5.5.1

Working Example
https://stackblitz.com/edit/typescript-vcgxg4?file=index.ts

To Reproduce
Try to change value of favorite color or lucky number from the stackblitz example.

Expected behavior
Cells should stay editable regardless whether in collapsable area or not.

Desktop (please complete the following information):

• Windows 10
• Chrome, Firefox
• latest

[lekoala]

it's not a bug, it's currently designed this way

there is a work in progress PR that i made #3875 but my current approach is not 100% aligned with what oli thinks good :-)

If you need this, in the meantime you can use my custom element that implement the custom features that i need
https://formidable-elements.vercel.app/demo/tabulator-grid.html (check the flexResponsive example)

[ortwic]

Thank you very much. I'll give it a try.

Yes you could argue that way and I understand that's kinda missing feature. But as a user I'd not care about some technical issues and expect that the app will keep its functionallity regardless of its resolution or format.

Is it generally possible to inject "own" modules for tabulator? It kinda looks that way. Would be nice to import that as a custom module.

[lekoala]

as long as you build it yourself, it's not too hard. tabulator is built in a quite nice modular way and it's easy enough to add formatters/editors/modules . overriding modules is also not too hard, that what i did to get the responsive editing to work
https://github.com/lekoala/formidable-elements/blob/master/src/classes/tabulator/ResponsiveLayout/ResponsiveLayout.js

[ortwic]

@lekoala Your solution is not working for me neither. So I have to implement my own ResponsiveLayoutModule too. :-(

But it was helpful to find out how to integrate a custom module.

Anyways the row is missing in the ResponsiveLayoutModule and should be passed on toggle for further customizations.

Also if you use arrow functions instead of regular ones you avoid the var self = this workarounds as arrow function don't have their own context.

[lekoala]

@ortwic if you managed to make something useful don't forget to make a pr maybe that could be merged :-)
i'd be happy not to have my own little hacks for this to work

[ortwic]

The fix is actually quite easy. See here:

ortwic#1

Personally I prefer a formatter with flex layout. It is working both ways.

const cellFormatter = (data) => {
    //data - an array of objects containing the column title and value for each cell
    if (Object.keys(data).length) {
    
        const list = document.createElement('div');
        list.classList.add('flex');

        data.forEach(({ title, value }) => {
            const item = document.createElement('div');
            const label = document.createElement('label');
            label.innerHTML = title;
            item.appendChild(label);

            if (value instanceof Node) {
                item.appendChild(value);
            } else {
                const p = document.createElement('p');
                item.innerHTML = value;
                item.appendChild(p);
            }
            
            list.appendChild(item);
        });
        return list;
    }
    return '';
};

[ortwic]

I realized changing the visibility state of the columns results in a somewhat buggy behaviour. But this is also true for the current released version.