Responsive Tables for WordPress using jQuery

_responsive_tables_wordpress.md

Responsive Tables

This is a jQuery solution for responsive tables to be used in WordPress. Originally posted on http://zurb.com/playground/projects/responsive-tables/index.html.

Required Files

The following files are required in order for this responsive tables solution to function correctly.

responsive-tables.js

This is the original javascript file from Zurb.

table-class.js

This javascript file will add a class called "responsive" to the

element.

_tables.scss

Styles needed for responsive tables. Colors, width, heights, and other options can be edited to match the overall design of the site this is being used on.

functions.php

This is a standard script enqueue for WordPress. Both responsive-tables.js and table-class.js must be enqueued. In the sample above, the scripts are only being enqueued on single blog posts and pages. This can be edited to load conditionally or to load on the entire site.

_tables.scss

/*********************
Media Queries Mixin
*********************/
/* Example : @include breakpoint(767){
    stuff;
}
*/
@mixin breakpoint($break) {
    @media screen and (max-width: $break + px) {
        @content;
    }
}

@mixin min-width-breakpoint($break) {
    @media screen and (min-width: $break + px) {
        @content;
    }
}
table{
	th{
		background: $soft-gray;
		font-weight: bold;
		padding: 9px 10px;
		text-align: left;
	}
	td{
		padding: 9px 10px;
		text-align: left;
	}
	tr{
		border-bottom: 1px solid $light-gray;
	}
}
/* Mobile */
@include breakpoint(767) {
	table.responsive {
		margin-bottom: 0;
		font-size: 80%;
	}
	.pinned {
		position: absolute;
		left: 0;
		top: 0;
		background: #fff;
		width: 35%;
		overflow: hidden;
		overflow-x: scroll;
		border-right: 1px solid #ccc;
		border-left: 1px solid #ccc;
	}
	.pinned table {
		border-right: none;
		border-left: none;
		width: 100%;
		font-size: 80%;
	}
	.pinned table th, .pinned table td {
		white-space: nowrap;
	}
	.pinned td:last-child {
		border-bottom: 0;
	}

	div.table-wrapper {
		position: relative;
		margin-bottom: 20px;
		overflow: hidden;
		border-right: 1px solid #ccc;
	}
	div.table-wrapper div.scrollable {
		margin-left: 35%;
	}
	div.table-wrapper div.scrollable {
		overflow: scroll;
		overflow-y: hidden;
	}
	table.responsive td, table.responsive th {
		position: relative;
		white-space: nowrap;
		overflow: hidden;
	}
	table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td {
		display: none;
	}
}

functions.php

function add_theme_scripts() {

	if ( is_single() || is_page() ) {
	
		wp_enqueue_script( 'responsive-tables', get_template_directory_uri() . '/assets/js/vendor/responsive-tables.js', array( ), '0.1.6', false );
	
	    wp_enqueue_script( 'tables-class', get_template_directory_uri() . '/assets/js/src/table-class.js', array( ), '0.1.6', false );

	}
	
}

add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

responsive-tables.js

/**
 * Responsive Tables from Zurb: http://zurb.com/playground/projects/responsive-tables/index.html
 */

(function ($) {
	"use strict";

	$(document).ready(function() {
		var switched = false;
		var updateTables = function() {
			if (($(window).width() < 767) && !switched ){
				switched = true;
				$("table.responsive").each(function(i, element) {
					splitTable($(element));
				});
				return true;
			}
			else if (switched && ($(window).width() > 767)) {
				switched = false;
				$("table.responsive").each(function(i, element) {
					unsplitTable($(element));
				});
			}
		};

		$(window).load(updateTables);
		$(window).on("redraw",function(){switched=false;updateTables();}); // An event to listen for
		$(window).on("resize", updateTables);


		function splitTable(original)
		{
			original.wrap("<div class='table-wrapper' />");

			var copy = original.clone();
			copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none");
			copy.removeClass("responsive");

			original.closest(".table-wrapper").append(copy);
			copy.wrap("<div class='pinned' />");
			original.wrap("<div class='scrollable' />");

			setCellHeights(original, copy);
		}

		function unsplitTable(original) {
			original.closest(".table-wrapper").find(".pinned").remove();
			original.unwrap();
			original.unwrap();
		}

		function setCellHeights(original, copy) {
			var tr = original.find('tr'),
				tr_copy = copy.find('tr'),
				heights = [];

			tr.each(function (index) {
				var self = $(this),
					tx = self.find('th, td');

				tx.each(function () {
					var height = $(this).outerHeight(true);
					heights[index] = heights[index] || 0;
					if (height > heights[index]) heights[index] = height;
				});

			});

			tr_copy.each(function (index) {
				$(this).height(heights[index]);
			});
		}

	});


}(jQuery) );

table-class.js

(function ($) {
	"use strict";

	/* add class to tables */
	$(document).ready(function() {

		var table = jQuery('table');

		table.addClass('responsive');

	});

}(jQuery) );