Hi, Has anyone tried the responsive layout in Kvision tabulator? I gave this, but could not see the...

# kvision

[Kumaran Masilamani]

Hi, Has anyone tried the responsive layout in Kvision tabulator? I gave this, but could not see the any changes when I see it various screen sizes..

options = TabulatorOptions(
                        layout = Layout.FITCOLUMNS,
                        responsiveLayout = ResponsiveLayout.COLLAPSE,.....

[Robert Jaros]

It looks a bit strange for me, as well. There is some kind of difference, but I would expect something else.

[Robert Jaros]

It probably works better when there are a lot of columns with not-collapsable content.

[Robert Jaros]

But with typical tables I mostly use, this mode make almost no difference.

[Robert Jaros]

Of course - it's not KVision. It just how tabulator works.

[Kumaran Masilamani]

I have four columns with contents, which is too many for a small screen. I will try to add more columns to see if it works.

[Robert Jaros]

I think you need to have manually set fixed width for columns.

[Robert Jaros]

If the columns can shrink - they will just shrink, and there will be no collapsing.

[Kumaran Masilamani]

I see.. I tried with 10 columns, and I even tried the layout to fitDataFill as per the example in the tabulator :

[Kumaran Masilamani]

var table = new Tabulator("#example-table", {
    height:"311px",
    layout:"fitDataFill",
    responsiveLayout:"collapse",
    columns:[
    {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false},
    {title:"Name", field:"name", width:200, responsive:0},
    {title:"Progress", field:"progress", hozAlign:"right", sorter:"number", width:150},
    {title:"Gender", field:"gender", width:150, responsive:2},
    {title:"Rating", field:"rating", hozAlign:"center", width:150},
    {title:"Favourite Color", field:"col", width:150},
    {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date", width:150},
    {title:"Driver", field:"car", hozAlign:"center", width:150},
    ],
});

[Kumaran Masilamani]

I will try to set the width and minwidth

[Kumaran Masilamani]

ah there is another formatter setting..

[Kumaran Masilamani]

Dont know how to give this setting inside the ColumnDefinition:

{formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false},

[Kumaran Masilamani]

Somehow the responsive layout renders in rows when I give this:

responsiveLayoutCollapseUseFormatters = true,
responsiveLayoutCollapseStartOpen = true,
responsiveLayout = ResponsiveLayout.COLLAPSE,

But it seems it is buggy, as I have tabulators in different tabs, when I switch tabs, it throws errors in console:

Uncaught TypeError: onRendered is not a function

I will leave it non-responsive for now, until I get any other react component for adding dynamic rows for my requirement

[Robert Jaros]

this onRendered bug could be somehow KVision fault - please fill an issue for this

[Kumaran Masilamani]

sure will do.. Thanks again!