How can I add in responsiveness to my table?

kprohaszka

I have figured out how to convert my data to json, and I'm trying now to add in responsiveness to the table. For the sake of convenience, I've created a dummy file in codepen that writes in the table data, and I've linked in the scripts and files needed to add in the responsive feature. However, my table will not responsively resize, and I'm not seeing any errors in the console. I have the same issue with my active code as well.

This is a link to the code: https://codepen.io/katprohas/pen/BaemEQe?editors=1010

I've looked through the forums but am not seeing anything stand out as to what I'm missing, any help would be greatly appreciated.

allan

Update to DataTables 2.1.8 (the current release) and that will do it. The other option is to add style="width: 100% to the table (DataTables 2.1+ will do that automatically if no width is found to be defined).

Allan

kprohaszka

Thanks! That worked in my dummy case. For the active project though, it is being responsive in that the columns are collapsing, but it is not showing any child rows with the hidden columns. Is there something additional I will need to do because the data is being converted from XML to JSON?

This is the code I have. The table and data are being written with Velocity, and the script below is standard javascript.

    #set($block = $_.locateBlock("_cascade/blocks/feeds/employees-live")) #*locates the live employee feed block to pull in emp directory dynamically*#
    #set($block = $block.feedAsXMLElement) #* sets block as type XML to read XML feed*#
    ## $_SerializerTool.toJson($_XPathTool.selectSingleNode($block, "//root"), true)
    <script>
    var jsonOutput = ${_SerializerTool.toJson($_XPathTool.selectSingleNode($block, "//root"), true)};
    </script>


    #if(!$_PropertyTool.isEmpty($block))     #*as long as the block is not empty*#
        <table id="directory-table" class="display" style="width: 100%">
            <thead>
            <tr>
                <th></th><th>First Name</th><th>Last Name</th><th>Title</th><th>Email</th><th>Phone</th><th>Department</th><th>Location</th><th></th>
            </tr>
                    <tr>
                <th></th><th></th><th></th><th></th><th></th><th></th><th>Department</th><th></th><th></th>
            </tr>

            </thead>
            <tbody>
            #foreach ($item in $_XPathTool.selectNodes($block, "//directory"))
                #set($lastname = "")
                #set($firstname = "")
                #set($phone = "")
                #set($email = "")
                #set($department = "")
                #set($title = "")
                #set($location = "")
                #set($ee_image = "")

                #set($firstname = $item.getChild("first").text)
                #set($lastname = $item.getChild("last").text)
                #set($phone = $item.getChild("phone").text)
                #set($email = $item.getChild("email").text)
                #set($department = $item.getChild("department").text)
                #set($title = $item.getChild("title").text)
                #set($location = $item.getChild("location").text)
                #set($ee_image = $item.getChild("photo").value)

                ## HIDDEN COLUMN Data
                #set($employeeType = "")
                #set($employeeType = $item.getChild("type").text)

                <tr>
                    <td><div style="width: 60px; height: 80px; border-radius: 20%; overflow: hidden;">
                        <img src="$ee_image" alt="$lastname" style="width: 100%; height: 100%; object-fit: cover;"/>
                    </div></td>
                    <td>$_EscapeTool.xml($firstname)</td>
                    <td>$_EscapeTool.xml($lastname)</td>
                    <td>$_EscapeTool.xml($title)</td>
                    <td>$_EscapeTool.xml($email)</td>
                    <td>$phone</td>
                    <td>$_EscapeTool.xml($department)</td>
                    <td>$_EscapeTool.xml($location)</td>
                    <td>$_EscapeTool.xml($employeeType)</td>
                </tr>
            #end ##end foreach loop
            </tbody>
                <tfoot>
                <th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th>
            </tfoot>
        </table>
    #end
    <script>
    console.log("document is loaded 1");
    $(document).ready(function () {

                var table = $('#directory-table').DataTable({
                    layout: {
                        top1: 'alphabetSearch',
                        topStart: {
                            // buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
                            pageLength: {
                                menu: [10,25,50, 100]
                            }
                        }
                    },
                    // set alphabet search to last name (column 2)
                    alphabet: {
                        column: 2
                    },
                    //change search bar language
                    language: {
                        search: 'Search all columns: '
                    },
                    //add responsiveness to table
                    responsive: {
                        details: true
                    },
                    //change default order to last name
                    order: [[2, 'asc']],
                    //turn off sorting by photo column
                    columnDefs: [{ orderable: false, targets: 0 }],
                    orderCellsTop: true,
                    initComplete: function () {
                        this.api().columns([6]).every(function () {
                            var column = this;
                            var select = $('<select><option value=""></option></select>')
                                .appendTo($("#directory-table thead tr:eq(1) th").eq(column.index()).empty())
                                .on('change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );

                                    column
                                        .search(val ? '^' + val + '$' : '', true, false)
                                        .draw();
                                });

                            column.data().unique().sort().each(function (d, j) {
                                select.append('<option value="' + d + '">' + d + '</option>');
                            });
                        });
                    }
                });
            });
        </script>

allan

Are you able to link to your page showing the issue? What happens if you click on the first cell in a table row? Does the child row appear anyway? If so, that would suggest your page isn't loading the Responsive CSS.

Allan

kprohaszka

Unfortunately I can't link to the page as it's behind a login, but clicking on the first column does actually make the child row appear! So it is working (hurray!). Do I need to add in an extra empty column at the front of the table so the dropdown menu icon shows?

kthorngren

Do I need to add in an extra empty column at the front of the table so the dropdown menu icon shows?

No, see this example. As Allan mentioned are loading responsive.dataTables.css or the appropriate CSS for the styling framework you are using?

Use the Download builder to get all the correct files.

Kevin

kprohaszka

I'm loading these css files:
<link href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.min.css" rel="stylesheet"/> <link href="https://cdn.datatables.net/plug-ins/2.0.8/features/alphabetSearch/dataTables.alphabetSearch.css" rel="stylesheet" type="text/css"/> <link href="https://cdn.datatables.net/responsive/3.0.3/css/responsive.dataTables.min.css" rel="stylesheet" type="text/css"/>

and in the table I've added style="width: 100%"

kthorngren

That looks correct. If you aren't seeing the icon then there is some styling conflict causing the issue. It will be hard to debug without seeing it.

Try right clicking the first cell in a row. You should see the dtr-control class and the ::before pseudo-element. Check to see if that is being overridden by another CSS. You can compare to this example.

Kevin

kprohaszka

I'm not seeing dtr-control, but the ::before element is being applied to the wrong row, so it seems like there's something wonky going on. I will do some digging and see if I can figure out what's interfering.

allan

What happens if you have simply:

responsive: true

?

Allan

kprohaszka

The same thing happens, child row works by clicking on the first column but there are no indicators that it is a drop down. I removed styling from the page except what is default with datatables, and it seems to have the same problem, though my CMS is a bit convoluted and I'm still looking to see if there is stray css code somewhere.

kthorngren

It seems strange the the dtr-control class doesn't show in the first td of each row. Possibly some JS code is removing it? I think I would place a breakpoint on the first statement after the Datatables initialization to see the class is there and if it is step through to find where its removed.

Kevin

kthorngren

As a test you could try adding a column and applying the responsive control to that like, like this example.

Or, as another test, maybe just add className: 'dtr-control' to the first column.

Kevin

kprohaszka

Okay, so the dtr-control class is now showing in the <td> tag of each row, it was a browser caching issue. Should I still try to manually apply dtr-control to a column to see if the toggle buttons appear?

kprohaszka

Okay, I did try adding a class "dtr-control" in columnDefs and I also tried assigning a column specifically the "dtr-control" class to no avail. Adding in columnDefs resulted in the first column disappearing in full-width, and appearing when sized down, but still no toggle. Similar issue with the manually assigned dtr-control class.

kthorngren

The only thing I can think of is to make sure responsive.dataTables.css is loaded only once. There might be a styling conflict if more than once is loaded especially different versions.

I copied your CSS code snippet into this test case and it works:
https://live.datatables.net/ladicuca/1/edit

Kevin

kprohaszka

Okay, I'll check it out. Is is possible to add the ::before pseudo element to force the toggle or it doesn't work like that?

kthorngren

The toggle should appear automatically unless you configure it not to show. One way is to set responsive.details.type to "none". In this case the ::before wouldn't be added.

I don't believe there is a way to force the toggle to show. There is something in your environment that is conflicting with the display of the toggle. You could try using View Source and get a copy of the generated HTML table and copy into the last test case I provided. I suspect it will work but its something to try.

Kevin

kprohaszka

I loaded in my page source, and it looks like it is having the same problem.

kthorngren

Do you have an updated URL link to the test case? It will update when you start editing it.

Kevin

kprohaszka

Oops, I didn't know that, here you go: https://live.datatables.net/ladicuca/4/edit

kthorngren

I fixed a couple minor issues:

1- The page is load responsive.js twice. It, along with the other .js files, should be loaded only once. Commented out this line:

  <!--  Load responsive.dataTables.js only once
    <script src="https://cdn.datatables.net/responsive/3.0.3/js/responsive.dataTables.js"></script>
-->

2- Added style="width: 100%" to the table tag.

3- Commented out this as it was generating a JS error:

      //$('.eq-col-ht').equalHeightColumns({
      //      afterloading: 'eq-col-ht'
      //  });

4- Removed the first unneeded column. You can remove the other empty column if you want the toggle in the First Name column.

5- The issue causing the missing toggle is rel="stylesheet" is missing from this statement:

    <link href="https://cdn.datatables.net/responsive/3.0.3/css/responsive.dataTables.min.css" />

Added it to this now working test case:
https://live.datatables.net/qajomele/1/edit

Kevin

kprohaszka

You are absolutely brilliant! Many thanks to you and Allan for all of your help.