Responsive Tables – How to scale your site beautifully

Responsive Tables provide flexibility to your site to scale well, especially when it comes to viewing tables on mobile devices. But for some websites, responsive tables are non-existent. You might wonder how an existing table on a website can be made responsive. Please note, by responsive, I do not mean horizontal scroll bars.

Looking for something else? Try these links instead:

• Chrome Developer Tools – Easy Web Debugging You Need to Know
• Chrome Dev Tools – More Advanced Tips for Better Debugging
• Sassy Css – The Valuable Benefits You Need To Know
• Sass CSS – This Awesome Extension Will Make You Sassy
• The Unbelievably Powerful Multi Select. Increase Productivity Now

I was looking for some information regarding responsive tables and came across Matt Smith’s article on Responsive table layouts. Let us have a look at a standard table that displays planet data.

Please note that all the sourcecode in this Visual Studio project is available on Github.

HTML Table

For this example, I will use some straightforward markup to create a table to hold planet data.

In Visual Studio I added some additional styling using Scss and when I run my web project, my table looks like this:

Not too bad hey? Well let’s have a look at how our table looks when viewed on an iPhone X.

This definitely does not look too good to me. It’s not horrible, but does not pass the grade in my opinion.

Making the planet table more responsive

To do this, I added a data-label attribute to each table data element. The data-label value is the value of each column’s name.

<td data-label="Planet">Mercury</td>

Then I added the CSS media query Matt suggested in his article. Here is the full pen including the CSS.

Have a look at this table now. It definitely looks much better than the previous layouts above.

This is really great and meets our end goal of having a table respond to a mobile device in a manner that is user-friendly and more readable to the user. There are definitely other solutions to making responsive tables, as outlined in this comprehensive list of solutions by sitepoint.

I did want to work with the Bootstrap grid system. I’m sure that doing this will result in an easier code base to work with.

Bootstrap Responsive Tables Example

I wanted to do this using only div tags. As you probably know, if you want responsive then a good choice is to use Bootstrap. Here is the CodePen for the code. Note: Just a reminder, all the source code is available on GitHub too.

Looking at this code, you will see that I have used Scss as my CSS Preprocessor. When I view the mobile version of the site, you will see that the result is quite the same as before.

Bootstrap and the media query has responded well to keep the table of data readable and responsive.

I wanted to take this one step further. If you need to create a table that is responsive and that includes filtering and a host of other functionality, have a look at Isotope.

Simple Responsive Tables Example using Isotope

Getting up to speed using Isotope is really easy. Let’s have a look at our table first. You will notice that I have added some more celestial bodies (dwarf planets) to the grid.

Each Category planet (if that is the correct terminology), is colored differently for clarity.

To add Isotope to your Web Application, you need to visit the Isotope page and download the isotope.pkgd.min.js file and add this to your site. You can also link directly to the CDN if you like.

In the screenshot below you will notice the Isotope file added to my Scripts folder. You will also notice the custom.js file I added.

Create the custom.js file

The custom.js file will contain the custom script for the Isotope grid.

var $grid;
var isoOptions;

$(function () {
    // Set the Isotope Grid Options
    isoOptions = {
        // options
        itemSelector: '.grid-item',
        masonry: {
            columnWidth: '.col-md-4'
        }
    };

    // Initialize the Isotope Grid
    $grid = $('.grid-container').isotope(isoOptions);

    // The Filter Button Click. This will filter the Isotope Grid by the class selected
    $('.button-filter').on('click', 'button', function () {
        var filterValue = $(this).attr('data-filter');
        currentFilter = filterValue; // Keep a variable set for the currently selected filter
        $grid.isotope({ filter: filterValue });
    });
});

Then we need to modify the BundleConfig file and add the following to it:

bundles.Add(new ScriptBundle("~/bundles/isotope").Include("~/Scripts/isotope.pkgd.min.js"));
bundles.Add(new ScriptBundle("~/bundles/custom").Include("~/Scripts/custom.js"));

In the _Layout.cshtml view, add the following lines of code:

@Scripts.Render("~/bundles/isotope")
@Scripts.Render("~/bundles/custom")

This should be all that you need to get the Isotope grid functioning. Note, that all the code (as mentioned above) is also available on GitHub.

Running the Isotope Grid and Filter

You should end up with a grid that displays planets and dwarf planets , but in addition to this, it also includes a filter. Clicking on the Planets button will display just the planets while clicking on the Dwarf Planets button will display only dwarf planets.

View a demo of the filtering functionality on YouTube

Another bonus is that Isotope will alter the layout of your grid items to make them fit the screen size you’re using.

Note: I have not bothered rendering the filter buttons for mobile.

This responsiveness also does not affect the filter functionality. It remains fully functional and responsive throughout.

Isotope Provides much more

The Isotope package has a lot to offer developers. Have a look at the filtering options available as well as sorting and layout modes.

The post Responsive Tables – How to scale your site beautifully appeared first on Programming and Tech Blog.