Tabs and DataTables

MadBoyEvo

I'm using DataTables with Tabs. I've changed tabs to Tabbis. It doesn't seem to always resize DataTable as required - not fitting the whole screen.

https://codepen.io/MadBoyEvo/pen/MWWWJVN

I've tried adding in callback below

        <script type="text/javascript">
            var tabs = tabbis.init({
                tabGroup: "[data-tabs]",
                paneGroup: "[data-panes]",
                tabActive: "active",
                paneActive: "active",
                callback: function (tab, pane) {
                    console.log(tab);
                    console.log(pane);
                }
            });
        </script>

to:

<script type="text/javascript">
            var tabs = tabbis.init({
                tabGroup: "[data-tabs]",
                paneGroup: "[data-panes]",
                tabActive: "active",
                paneActive: "active",
                callback: function (tab, pane) {
                    //console.log(tab);
                    console.log(pane);
                    $('#DT-VxBJhSNk').DataTable()
                        .columns.adjust()
                        .responsive.recalc();
                    $('#DT-etPMuNuP').DataTable()
                        .columns.adjust()
                        .responsive.recalc();
                    $('#DT-KraCjyKX').DataTable()
                        .columns.adjust()
                        .responsive.recalc();
                    $('#DT-hHRFiWMZ').DataTable()
                        .columns.adjust().responsive.recalc();

                    var table = $('#DT-VxBJhSNk').DataTable();
                    $('#DT-VxBJhSNk').css('display', 'table');
                    table.responsive.recalc();


                    var table = $('#DT-etPMuNuP').DataTable();
                    $('#DT-etPMuNuP').css('display', 'table');
                    table.responsive.recalc();


                    var table = $('DT-KraCjyKX').DataTable();
                    $('#DT-KraCjyKX').css('display', 'table');
                    table.responsive.recalc();

                    var table = $('#DT-hHRFiWMZ').DataTable();
                    $('#DT-hHRFiWMZ').css('display', 'table');
                    table.responsive.recalc();
                }
            });
</script>

But nothing really changed. Any way for the DataTables to work properly? I've added refresh of page on callback but it's too visible (but works).

kthorngren

Sounds like you need to use columns.adjust(). This is a Bootstrap example but should show you how to use it:
https://datatables.net/examples/api/tabs_and_scrolling.html

Kevin

MadBoyEvo

Hrmms, I am too noobish to apply it to my example. Care to show it on my example because I tried to apply it to callback of tabbis but it doesn't do anything.

kthorngren

I'm not familiar with how tabbis works so not sure what to do with the callbacks. However there is one thing you could easily do that might help. Add style="width:100%" to your tables as shown in this example. That should help widen the tables.

Kevin

MadBoyEvo

Ye, tables do widen up, but buttons are still missing. So i guess I need proper recalc.

kthorngren

but buttons are still missing.

Do you mean the Datatables export buttons? They seem to be on the page when I look.

Kevin

MadBoyEvo

I mean the expand buttons. Responsive table. There are lots of columns (like 64+) When I add 100% width the width is correct but it doesn't fix the buttons which means it's probably only half working and resizing functionality of DataTables isn't kicking in.

kthorngren

I see the responsive icon and can open the child rows:

Can you replicate the issue so we can see it?

Kevin

MadBoyEvo

Updated pen adding more tables. This time all tables should be responsive as they have 64+ columns. Try opening it up (don't refresh) and jump around tabs and see not all tables are the same looking (and those should be - because they are exactly the same).

kthorngren

Here is an example:

You may need to use responsive.recalc(). It needs to be executed when the tab is shown. Without researching it I'm not sure how to do that with tabbis. It could be a csllback like you said or an event like the BS example I linked to.

Kevin

MadBoyEvo

The thing is I actually did that. I added it to callback and it didn't work. Nothing happened. As you can see in my first post... it's in there.

kthorngren

Found the first snippit you have above in you test case and changed it to this:

tabbis.init({
    tabGroup: "[data-tabs]",
    paneGroup: "[data-panes]",
    tabActive: "active",
    paneActive: "active",
    callback: function (tab, pane) {
        console.log(tab);
        console.log(pane);
      $('.dataTable').DataTable()
        .columns.adjust()
        .responsive.recalc();
    }
});

Seems like it works. Where without the recalc the columns aren't always correct. Not sure about your second snippet and why it doesn't work.

The one liner I put in is probably not very efficient since it recalculates (twice - two API's called) each table on a tab change. You will probably want to work out a way to determine the tab you are in and only recalculate that table.

Sorry, can't save the changes as I don't have a Codepen account to allow for saving.

Kevin

MadBoyEvo

Indeed! It works correctly. Thank you. Weird that by ID it didn't work.

But like you said. It's probably pretty heavy recalculating all tables all the time. I guess if there's a lot of rows, lots of tabs this will get visible.

I guess I would need to add an ID for each tab and then knowing that ID, create a list of tables to recalculate. Eh, I wish I knew JS