FooTable For WordPress

A WordPress plugin that makes your HTML tables responsive and awesome on all devices – No matter how many columns of data you may have in them.

Have you ever wanted to show a lot of data in your tables, but hate how badly it scales on smaller mobile devices? FooTable Lite solves this problem by hiding certain columns on smaller devices, but still allowing the user to expand each row to see the columns that were hidden. Responsive tables in WordPress.

This simple WordPress plugin allows you to easily include and configure the FooTable jQuery script into your site.

Footable uses specific data attributes on the table to define which columns will be visible at the different breakpoints Click the FooTable Demos link below or read through the documentation on how to use it.

Check Out These Awesome Features
Responsive HTML Tables in WordPress

Responsive HTML Tables

FooTable transforms your HTML tables into expandable responsive tables. It hides certain columns of data at different resolutions (we call these breakpoints). Rows become expandable to show the data that was hidden.

Play around with the responsive demo to see it in action.

FooTable Sorting Feature

Sorting

Easily add sorting capabilities to the data contained within your table columns. With the click of a button, you can sort each column alphabetically, or even by date, status, and more.

FooTable Filtering Feature

Filtering

Add a search box to your tables to allow your users to drill down to the data they need. Search all your table columns at once, whether the data is hidden from view or not.

FooTable Phone and Tablet Breakpoints

Specify Breakpoints

We work with the concepts of “breakpoints”, which are different device widths we care about. Depending on the markup you use, you can define what columns in your table will be hidden when the screen width is below 320 (or whatever breakpoint width you set).

FooTable Data Attributes

Config via Data Attributes

One of the main goals of FooTable was to make it completely configurable via data attributes inside the table. We wanted you to be able to look at the HTML markup and see exactly how the FooTable was going to function. Take a look at the markup on the Docs page to see how it's done.