Responsive Tables – How to scale your site beautifully
Tags: css, html, webdev
Published: 2018-12-19 07:32:58

---
title: Responsive Tables – How to scale your site beautifully
published: true
tags: css, html, webdev
canonical_url: https://dirkstrauss.com/responsive-tables/
---

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](https://dev.to/dirkstrauss/chrome-developer-tools--easy-web-debugging-you-need-to-know-30na)
- [Chrome Dev Tools – More Advanced Tips for Better Debugging](https://dev.to/dirkstrauss/chrome-dev-tools--more-advanced-tips-for-better-debugging-5cgh)
- [Sassy Css – The Valuable Benefits You Need To Know](https://dev.to/dirkstrauss/sassy-css--the-valuable-benefits-you-need-to-know-5447-temp-slug-6301632)
- [Sass CSS – This Awesome Extension Will Make You Sassy](https://dev.to/dirkstrauss/sass-css--this-awesome-extension-will-make-you-sassy-35m0)
- [The Unbelievably Powerful Multi Select. Increase Productivity Now](https://dirkstrauss.com/the-unbelievably-powerful-multi-select/)

I was looking for some information regarding responsive tables and came across [Matt Smith’s article on Responsive table layouts](https://allthingssmitty.com/2016/10/03/responsive-table-layout/). 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](https://github.com/dirkstrauss/ResponsiveTables).

## HTML Table

For this example, I will use some straightforward markup to [create a table to hold planet data](https://codepen.io/dirkstrauss/pen/GPqbOz).

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

![Responsive Tables - Plain table](https://i0.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/responsive-tables-plain-table.jpg?w=640&ssl=1)

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

![Responsive Tables Mobile View](https://i2.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/responsive-tables-mobile-view.jpg?w=640&ssl=1)

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](https://codepen.io/dirkstrauss/pen/LMZwxa).


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

![Responsive Tables CSS Media Query](https://i0.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/responsive-tables-css.jpg?w=640&ssl=1)

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 <g id="4" data-gr-id="4">sitepoint</g>](https://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions/).

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](https://codepen.io/dirkstrauss/pen/YdWmow) for the code. Note: Just a reminder, all the source code is [available on GitHub](https://github.com/dirkstrauss/ResponsiveTables) 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. 

![Responsive Tables Bootstrap Example](https://i1.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/responsive-tables-bootstrap-example.jpg?w=640&ssl=1)

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](https://isotope.metafizzy.co/).

## 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.

![Responsive Tables Isotope](https://i2.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/responsive-tables-isotope.jpg?w=640&ssl=1)

To add Isotope to your Web Application, you need to [visit the Isotope page](https://isotope.metafizzy.co/) 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. 

![Responsive Tables Add Isotope To Project](https://i1.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/responsive-tables-add-isotope-to-project.jpg?w=640&ssl=1)

### 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](https://github.com/dirkstrauss/ResponsiveTables).

### 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<g id="391" data-gr-id="391">.</g>

[View a demo of the filtering functionality on YouTube](https://www.youtube.com/watch?v=Jeb-cxwxs0Q)

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.

![Responsive Tables Isotope on Mobile](https://i1.wp.com/dirkstrauss.com/wp-content/uploads/2018/12/responsive-tables-isotope-mobile.jpg?w=640&ssl=1)

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](https://isotope.metafizzy.co/filtering.html) available as well as [sorting](https://isotope.metafizzy.co/sorting.html) and [layout modes](https://isotope.metafizzy.co/layout-modes.html).

The post [Responsive Tables – How to scale your site beautifully](https://dirkstrauss.com/responsive-tables/) appeared first on [Programming and Tech Blog](https://dirkstrauss.com).