Responsive Layout

[stgraveyard]

Hello Oli,

First of all, thank you so much for this amazing piece software. Just fantastic.

I'm using this now in my webproject. I'm a bit of a NOOB, everything seems to be working perfectly for me except the responsive layout. The tables don't disappear when I make the window smaller. Is there something you need to do with the extensions? I have included this : <script type="text/javascript" src="{$template_dir}includes/js/tabulator.min.js"></script> <!-- tabulator script --> This is my code for the tab :

<script>
                //define some sample data
                var tabledata = {$data};
                {literal}

                //create Tabulator on DOM element with id "example-table"
                $("#games-table").tabulator({
                    height:"600px", // set height of table (optional)
                    responsiveLayout:true, // this option takes a boolean value (default = false)
                    pagination:"local",
                    fitColumns:true, //fit columns to width of table (optional)
                    columns:[ //Define Table Columns
                        {title:"Name", field:"game_name", sorter:"string", align:"left", headerFilter:"input",responsive:0},
                        {title:"Publisher", field:"publisher_name", sorter:"string", align:"left", headerFilter:"input"},
                        {title:"Developer", field:"developer_name", sorter:"string", align:"left", headerFilter:"input"},
                        {title:"Year", field:"year", sorter:"string", align:"left",headerFilter:"input"},
                        {title:"Boxscan", field:"boxscan", sorter:"string", formatter:"tickCross",headerFilter:"input"},
                        {title:"Screenshot", field:"screenshot", sorter:"string", formatter:"tickCross",headerFilter:"input"},
                        {title:"Download", field:"download", sorter:"string", formatter:"tickCross",headerFilter:"input"},
                    ],
                    rowClick:function(e, id, data, row){ //trigger an alert message when the row is clicked
                        alert("Row " + id + " Clicked!!!!");
                    },
                });
                $("#games-table").tabulator("setPageSize", 20); // show 20 rows per page

                //trigger download of data.csv file
                $("#download-csv").click(function(){
                    $("#games-table").tabulator("download", "csv", "data.csv");
                });

                //trigger download of data.json file
                $("#download-json").click(function(){
                    $("#games-table").tabulator("download", "json", "data.json");
                });

                //trigger download of data.xlsx file
                $("#download-xlsx").click(function(){
                    $("#games-table").tabulator("download", "xlsx", "data.xlsx");
                });

                //load sample data into the table
                $("#games-table").tabulator("setData", tabledata);
                {/literal}
                </script>   

I wonder what I'm doing wrong.

Also, I'm using pagination, but when I go to a width of 320px or 360px (for older phones, I think) and I have over 3 pages of data, the paging and the 'next', 'previous', 'last' ... buttons are not all on the screen anymore. I don't think this is solved by activating the reponsiveness?

Thank you in advance, Maarten

[olifolkerd]

Hey Maarten,

Thanks for your kind words, it is always great to hear that Tabulator is appreciated :)

Looking at your code, the issue is that you are not redrawing the table as the window is resized. you need to include the following code in your page, it listens for the resize event on the window then redraws tabulator to fit the new space:

$(window).on('resize', function () {
    $(".tabulator").tabulator("redraw");
});

Let me know if that helps

Cheers

Oli :)

[stgraveyard]

Thank you Oli,

This works like a charm. I'm gonna play now a bit with this reponsive option and fit column options.

Again, simply amazing work! When my project is ready and online, I'm gonna give you credit and add a link to this wonderfull tool.

[stgraveyard]

Only remark I have is that the pagination is not responsive. But it is just a detail...

[olifolkerd]

Thanks for the feedback,

I agree that the pagination controls could work better in responsive mode. How would you like them to reach when the footer is too small?

Cheers

Oli

[olifolkerd]

Thanks, a link would be great! let me know when your done, it would be great to see the table in action :)

[stgraveyard]

Oli,

Maybe only the prev en next button when there is no more space?

Also, I have noticed that the responsive mode does not work with column fit. If these 2 would work together, that would make it look even better.

I will definitely sent you the link...

[olifolkerd]

When you say it dosnt work with column fit what do you mean?

do you mean that it isnt hiding columns or that when it hides a column it isnt resizing the others to fit?

[stgraveyard]

When I use column fit, the columns get nicely resized, but there is no hiding anymore, so when the screen gets smaller and smaller, the columns become also to small. But ok, maybe that is how it should be, I mean, at what width should a column get hidden? I guess it needs quite a bit reprogramming if you want to add this.

This is no criticism Oli, I'm just thinking out loud. I have been playing a bit with it and I have a really nice result now with the responsiveness. Amazing work you have done, I just can't believe this is so easily implementable in my DB project. You are a pro!

[olifolkerd]

You will get the functionality you are after if you set the minWidth property on the columns, then Tabulator will know when to get rid of them, without that tabulator will think you are happy for the columns to get smaller and smaller.

I have added a note to the documentation so that people are aware of this in future.

I don't take any feedback as criticism, tabulator has gained a lot of its functionality as a result of user feedback, so it is always appreciated :)

[stgraveyard]

Hello Oli,

Thanks again, but once I add the fitcolumns feature, the responsiveness doesn't work anymore, even if I set a minWidth. This is my code now :

//create Tabulator on DOM element with id "example-table"
                $("#games-table").tabulator({
                    responsiveLayout:true, // this option takes a boolean value (default = false)
                    fitColumns:true,
                    pagination:"local",
                    columns:[ //Define Table Columns
                        {title:"Name", field:"game_name", sorter:"string", align:"left", headerFilter:"input",responsive:0},
                        {title:"Publisher", field:"publisher_name", sorter:"string", align:"left", headerFilter:"input", minWidth:50},
                        {title:"Developer", field:"developer_name", sorter:"string", align:"left", headerFilter:"input", minWidth:50},
                        {title:"Year", field:"year", sorter:"string", align:"left",headerFilter:"input", width:75, minWidth:50},
                        {title:"Boxscan", field:"boxscan", sorter:"string", formatter:"tickCross",headerFilter:"input", width:100, minWidth:50},
                        {title:"Screenshot", field:"screenshot", sorter:"string", formatter:"tickCross",headerFilter:"input", width:120, minWidth:50},
                        {title:"Download", field:"download", sorter:"string", formatter:"tickCross",headerFilter:"input", width:110, minWidth:50},
                        {title:"Music", field:"music", sorter:"string", formatter:"tickCross",headerFilter:"input", width:75, minWidth:50},
                    ],
                    rowClick:function(e, id, data, row){ //trigger an alert message when the row is clicked
                        alert("Row " + id + " Clicked!!!!");
                    },
                });
                $("#games-table").tabulator("setPageSize", 21); // show 21 rows per page

                //trigger download of data.csv file
                $("#download-csv").click(function(){
                    $("#games-table").tabulator("download", "csv", "data.csv");
                });

                //trigger download of data.json file
                $("#download-json").click(function(){
                    $("#games-table").tabulator("download", "json", "data.json");
                });

                //trigger download of data.xlsx file
                $("#download-xlsx").click(function(){
                    $("#games-table").tabulator("download", "xlsx", "data.xlsx");
                });

                //load sample data into the table
                $("#games-table").tabulator("setData", tabledata);

                $(window).on('resize', function () {
                    $(".tabulator").tabulator("redraw");
                });

You see what I'm doing wrong?

KR, Maarten

[stgraveyard]

it seems as if the resize function does not work when using fitcolumns. Because if I do refresh manually when making the screen smaller, the columns are being removed from the screen.

[olifolkerd]

looks like there was an issue with responsive layout and fitcolumns, i have just pushed a fix to the master branch for this.

it will be officially released in this months update in a couple of weeks time

[olifolkerd]

In fact, there have been enough small tweaks since the last patch update, so im releasing this as 3.1.2 now.

Enjoy,

Oli

[stgraveyard]

Thanks Oli. I will test it tonight and keep you posted.

[stgraveyard]

My god Oli, this works so beautifully, I just can't get over it. Everything is amazing now.

This is what I'm working on :

Thanks a lot.

BTW, as you can see, I fooled a bit in the JS script to change the color of the 'X'. Just thought the red did not fit the skin very well ;-)

Another skin with your beautifull tool :

Oh how I love this.

Cheers, Maarten

[stgraveyard]

Oli,

For the next version perhaps ... the only thing that is not correct is the actual pagination in 'phone view' (very small screen). Pretty please :-)

Apart from this, absolutely stunning!

[olifolkerd]

Hey Maarten,

I will make sure version 3.2 has better reactivity on the pagination controls.

Nice work! it is great to see people coming up with their own themes for their tables!

Cheers

Oli

[stgraveyard]

Hello Oli,

In regards of the responsiveness on phones, I have another suggestion/issue. On a phone, we don't have a mouse, so we can not change the width of the columns manually. Now lets say a title within a column is too long, we can not read it completely. On a computer, you just use the mouse to make the columns wider, on a phone this is not possible. Perhaps by adding a double click on the column so they go to the width of the largest title (like in excel) solves this issue.

KR, Maarten

[olifolkerd]

good idea, i will see if i can get that in 3.2

[olifolkerd]

Hey,

Tabulator 3.2 has just been released. it will now automatically hide the pagination page number selectors when the table gets too narrow.

Thanks for the suggestion!

Cheers

Oli

[stgraveyard]

Amazing. Thanks a lot Oli! Works like charm.