🌜
🌞
footable

footable

v2.0.6

jQuery plugin to make HTML tables responsive

npm install footable

README

FooTable

FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome - No matter how many columns of data you may have in them.

Home Page | WordPress Plugin (free) | Demos

FooTable

Features

  • Hide certain columns at different sizes
  • Configuration via data attributes
  • Built to work with Bootstrap
  • Easy to theme
  • Sorting
  • Filtering
  • Pagination
  • Easy to extend with add-ons

What Is FooTable?

FooTable is a jQuery plugin that transforms your HTML tables into expandable responsive tables. This is how it works:

  1. It hides certain columns of data at different resolutions (we call these breakpoints).
  2. Rows become expandable to reveal any hidden data.

So simple! Any hidden data can always be seen just by clicking the row.

Demos

Check out the growing number of FooTable demos (with built-in documentation!)

Documentation

The docs are built into the demos! On every demo page, there is a docs tab that outlines how to use the specific feature.

Data Attribute Configuration

One of the main goals of FooTable was to make it completely configurable via data attributes. 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 this markup for example:

<table class="footable" data-filter="#filter" data-page-size="5">
  <thead>
    <tr>
      <th data-toggle="true">
        First Name
      </th>
      <th data-sort-ignore="true">
        Last Name
      </th>
      <th data-hide="phone,tablet">
        Job Title
      </th>
      <th data-hide="phone,tablet" data-name="Date Of Birth">
        DOB
      </th>
      <th data-hide="phone">
        Status
      </th>
    </tr>
  </thead>

All available data attributes are listed in the data attributes demo

Breakpoints

FooTable works with the concepts of "breakpoints", which are different table widths we care about. The default breakpoints are:

breakpoints: {
  phone: 480,
  tablet: 1024
}

So looking at the markup in the Data Attribute Configuration section, you can now tell that the Job Title, DOB and Status columns will be hidden when the table width is below 480 (phone).

There are also two built-in breakpoints called "default" and "all".

The "default" breakpoint is the fallback breakpoint for when the current table width is larger than any defined breakpoint. Looking at the above JS snippet the "default" breakpoint would be applied once the table width is larger than 1024 (tablet).

The "all" breakpoint is pretty straight forward in it's use. You can always hide a column on any table width by applying the data-hide="all" attribute to the header.

Usage

Create a simple table (don't forget to set the data attributes for each column in your thead!):

<table class="footable">
  <thead>
    <tr>
      <th>Name</th>
      <th data-hide="phone,tablet">Phone</th>
      <th data-hide="phone,tablet">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob Builder</td>
      <td>555-12345</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Bridget Jones</td>
      <td>544-776655</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Tom Cruise</td>
      <td>555-99911</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>
  1. Include FooTable Core CSS

    ```html

```
  1. [optional] Include FooTable Theme CSS

    FooTable is now built to work with Twitter Bootstrap out of the box - WOOT!

    You can use one of our built-in themes if you want:

    ```html

```

Check out the metro theme demo or the original theme demo.

  1. Include jQuery

    ```html


4. **Include FooTable jQuery Plugin**

    ```html
<script src="path_to_your_js/footable.js" type="text/javascript"></script>
  1. Initialize FooTable!

    ```html

```

Extensible

Another goal of FooTable was to make it easily extensible. If you look at the code you will see that there is a plugin framework within the plugin, so extra mods can be attached just by including another javascript file.

We also didn't want to bloat FooTable, so you can only use what you need and leave out everything else.

Working add-ons:

  • sorting
  • filtering
  • pagination (thanks @awc737)
  • striping (thanks @OliverRC)

Other add-on ideas so far are:

  • conditional formatting
  • json loading
  • column picker

Thanks

We would not have created FooTable without inspiration from others. Thanks must be given to:

General

License
MIT
Typescript Types
None found
Tree-shakeable
No

Popularity

GitHub Stargazers
2,138
Community Interest
2,990
Number of Forks
663

Maintenance

Commits
10/219/2201
Last Commit
Jul 18, 2017
Open Issues
212
Closed Issues
580
Open Pull Requests
14
Closed Pull Requests
25

Versions

Versions Released
10/219/2201
Latest Version Released
Sep 25, 2017
Current Tags
latest2.0.6

Contributors

bradvin
bradvin
Commits: 264
steveush
steveush
Commits: 210
seriema
seriema
Commits: 35
chrislaskey
chrislaskey
Commits: 9
bucketpress
bucketpress
Commits: 8
akf
akf
Commits: 7
dboune
dboune
Commits: 7
OliverRC
OliverRC
Commits: 7
zongwei007
zongwei007
Commits: 5
jleider
jleider
Commits: 4
alonextou
alonextou
Commits: 4
mrdziuban
mrdziuban
Commits: 4
minroo
minroo
Commits: 4
LorenzKahl
LorenzKahl
Commits: 4
dropofwill
dropofwill
Commits: 3