An Alternative Modal Approach to Responsive Tables

c0d3m0nst3r

Let me begin by saying I work in a .NET shop that has been converting its site to MVC (Model View Controller), and we are using the Bootstrap Framework along with the DataTables.js plugin. Some of our data tables have somewhere around 6-8 columns and utilizing the current schools of thought on responsive tables wasn't satisfying to me. To continue, I don't like horizontal scrolling (in my opinion that's not aesthetically pleasing and not very user intuitive) and hiding columns based on screen size didn't sit well with me either because who am I to decide what the user should and shouldn't see. There had to be a better way. Turns out there is a better way (at least I think), and my team and I set out to build a prototype of how it would work.

So we have our table below:

<table>
    <thead>
        <tr>
            <th>Service</th>
            <th class="hidden-xs">Occupancy</th>
            <th class="hidden-xs">Ordered</th>
            <th>Completed</th>
            <th class="hidden-xs">Invoice ID</th>
            <th class="hidden-xs">Invoice Date</th>
            <th class="text-right hidden-xs">Invoice Amount</th>
            <th class="center">Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><!-- Service From Database --></td>
            <td><!-- Occupancy From Database --></td>
            <td><!-- Ordered From Database --></td>
            <td><!-- Completed From Database --></td>
            <td><!-- Invoice ID From Database --></td>
            <td><!-- Invoice Date From Database --></td>
            <td><!-- Invoice Amount From Database --></td>
            <td>
                <div class="visible-xs visible-sm visible-md visible-lg">
                    <div class="btn-group" dropdown is-open="status.isopen">
                        <button type="button" class="btn btn-o btn-sm dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-cog"></i>&nbsp;<span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu pull-right" role="menu" style="z-index: 9999;">
                            <li>
                                <a href="<!-- Destination Link -->">
                                    <i class="fa fa-info"></i> Property Details
                                </a>
                            </li>
                            <li>
                                <a href="<!-- Destination Link -->">
                                    <i class="fa fa-file-pdf-o"></i> Download Report
                                </a>
                            </li>
                            <li class="hidden-lg hidden-md hidden-sm">
                                <a class="showInfo">
                                    <i class="fa fa-eye"></i> See all info
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

You will notice in the last column of the table we've setup an "Action Column" with a drop-down. Within the drop-down is a list item:

<li class="hidden-lg hidden-md hidden-sm">
    <a class="showInfo">
        <i class="fa fa-eye"></i> See all info
    </a>
</li>

Below is the javascript for the click function on the list item:

    $(".showInfo").click(function () { ShowRowInfo($(this)) });

The list item only shows on xs screen sizes, i.e. mobile phones. The link within the list item is what we will use to call a Bootstrap modal:

<div class="modal fade" id="rowInfoModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Row Info</h4>
            </div>
            <div class="modal-body">
                <table class="table">
                    <colgroup>
                        <col width="35%" />
                        <col width="65%" />
                    </colgroup>
                </table>
            </div>
        </div>
    </div>
</div>

    function ShowRowInfo(o) {
        var th, tr;
        var colData = { data: [] };

        th = $(o).closest("table").find("thead tr");
        tr = $(o).closest('tr');
        $('.modal-body table').empty();

        th.find('th').each(function (i) {
            colData.data.push({ "col": $(this).html(), "value": tr.find("td:nth(" + i + ")").html() });
        });

        $.each(colData.data, function (i) {
            $('.modal-body table').append("<tr><td>" + colData.data[i].col + "</td><td>" + colData.data[i].value + "</td></tr>");
        });

        $("#rowInfoModal").modal();
    }

    $("#rowInfoModal").modal('hide');

We are using a partial view within the MVC solution so we can reuse this modal throughout our site. The javascript and modal code above are within the same partial view.

What the above code (modal and javascript) does is creates a two column table to display the contents of a given row. So without having to choose between permanently hiding data on xs screens or using horizontal scrolling, they have the option to view all the info within a given row on a mobile phone. We have created a compromise

My team and I thought this was really cool, and we hope some of you out there do as well. Happy coding all.

The images are what it looks like.

allan

Hi,

Thanks for posting this - great to have a discussion about it. Personally I really dislike inner scrolling!

To check my understanding first of all - does the hidden-xs class apply only on small screens?

i'm not sure I see the difference between this and the Responsive extension's breakpoints? Unless I'm missing something, Responsive does all of this except the dropdown button to show the modal.

The reuse of the code through out your site is nice - that's a very worthy goal!

Allan

c0d3m0nst3r

Hey there Allan,

Glad to hear I'm not the only one that dislikes inner scrolling.

The class hidden-xs comes from the Bootstrap framework and it applies to extra small devices, i.e phones (<768px).

Is this what you are referring to when you say Responsive Extension's Breakpoints?
https://datatables.net/extensions/responsive/examples/column-control/classes.html

If so, yes I was aware of this extension, but we also have tables nested within rows in some instances and this would cause confusion when clicking a row to expand. Also, I am not a huge fan of that extension.

Thanks for your feedback!

c0d3m0nst3r

Hello again Allan,

I think I actually found what you were referring to this time:
https://datatables.net/extensions/responsive/examples/display-types/modal.html

Yes, but I wanted a way to only show this option at a certain screen width and hide at others. Since all the data is displayed at screen sizes greater than or equal to 768px, the link to display the modal doesn't need to be visible at those sizes.

It is similar to that extension, yet different. Either way I think both solutions are way better than horizontal scrolling.

Thanks again for the chat!

allan

we also have tables nested within rows in some instances and this would cause confusion when clicking a row to expand

That would do it. Responsive doesn't look inside the child rows since the content of the child rows are set externally.

Either way I think both solutions are way better than horizontal scrolling.

Agreed ;-) !

Thanks for the feedback here - I'll take it onboard as I progress with improving Responsive in future.

And thanks for this thread - I'm sure others will find it useful in future!

Allan