PHPackages filsh/footable - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. filsh/footable ActiveLibrary filsh/footable ============== 2.0.1(12y ago)010.8k↓50%MITJavaScript Since Aug 23Pushed 12y ago1 watchersCompare [ Source](https://github.com/Filsh/FooTable)[ Packagist](https://packagist.org/packages/filsh/footable)[ Docs](http://fooplugins.com)[ RSS](/packages/filsh-footable/feed)WikiDiscussions V2 Synced 1mo ago READMEChangelogDependencies (2)Versions (4)Used By (0) FooTable ======== [](#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](http://fooplugins.com/plugins/footable-jquery "Visit the FooTable Homepage") | [WordPress Plugin (free)](http://fooplugins.com/plugins/footable-lite/) | [Demos](http://fooplugins.com/footable-demos/) [![FooTable](https://camo.githubusercontent.com/08d042ccdc954c53bbac1f3e577000970ccbd07f9b2e9763d8670770488c8aa6/68747470733a2f2f7261772e6769746875622e636f6d2f6272616476696e2f466f6f5461626c652f56322f73637265656e73686f742e6a7067 "FooTable")](https://camo.githubusercontent.com/08d042ccdc954c53bbac1f3e577000970ccbd07f9b2e9763d8670770488c8aa6/68747470733a2f2f7261772e6769746875622e636f6d2f6272616476696e2f466f6f5461626c652f56322f73637265656e73686f742e6a7067) Features -------- [](#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? ----------------- [](#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 ----- [](#demos) Check out the growing number of [FooTable demos](http://fooplugins.com/footable-demos/) (with built-in documentation!) Documentation ------------- [](#documentation) The docs are built into the [demos](http://fooplugins.com/footable-demos/)! On every demo page, there is a docs tab that outlines how to use the specific feature. Data Attribute Configuration ---------------------------- [](#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: ``` First Name Last Name Job Title DOB Status ``` All available data attributes are listed in the [data attributes demo](http://fooplugins.com/footable-demos/?url=http://fooplugins.com/footable/demos/data-attributes.htm) Breakpoints ----------- [](#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 ----- [](#usage) Create a simple table (don't forget to set the data attributes for each column in your thead!): ``` Name Phone Email Bob Builder 555-12345 bob@home.com Bridget Jones 544-776655 bjones@mysite.com Tom Cruise 555-99911 cruise1@crazy.com ``` 1. **Include FooTable Core CSS** ``` ``` ``` 2. **\[optional\] Include FooTable Theme CSS** > FooTable is now built to work with [Twitter Bootstrap](http://twitter.github.io/bootstrap) out of the box - WOOT! You can use one of our built-in themes if you want: ``` ``` ``` Check out the [metro theme demo](http://fooplugins.com/footable-demos/?url=http://fooplugins.com/footable/demos/metro-theme.htm) or the [original theme demo](http://fooplugins.com/footable-demos/?url=http://fooplugins.com/footable/demos/old-theme.htm). 3. **Include jQuery** ``` ``` <script src="" type="text/javascript"></script> ``` 4. **Include FooTable jQuery Plugin** ```html ``` 5. **Initialize FooTable!** ``` ``` <script type="text/javascript"> $(function () { $('.footable').footable(); }); </script> ``` 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: * Catalin for his [original table CSS](http://www.red-team-design.com/practical-css3-tables-with-rounded-corners) * [@awc737](https://github.com/awc737) for creating the pagination add-on * [@OliverRC](https://github.com/OliverRC) for creating the striping add-on * [Chris Coyier](http://css-tricks.com/responsive-data-tables/) (also check out Chris' [responsive table roundup post](http://css-tricks.com/responsive-data-table-roundup/)) * [Zurb](http://www.zurb.com/playground/responsive-tables) * [Dave Bushell](http://dbushell.com/2012/01/05/responsive-tables-2/) * [Filament Group](http://filamentgroup.com/examples/rwd-table-patterns/) * [Stewart Curry](http://www.irishstu.com/stublog/2011/12/13/tables-responsive-design-part-2-nchilds/) ``` ### Health Score 34 — LowBetter than 77% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity22 Limited adoption so far Community18 Small or concentrated contributor base Maturity65 Established project with proven stability Bus Factor1 Top contributor holds 74.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~7 days Total 2 Last Release 4644d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/7fafc0b472b8b8cf1097a6fb094b7c5c10293e2f976e9eacb1ea1a34031b6e15?d=identicon)[Filsh](/maintainers/Filsh) --- Top Contributors [![bradvin](https://avatars.githubusercontent.com/u/1409490?v=4)](https://github.com/bradvin "bradvin (272 commits)")[![seriema](https://avatars.githubusercontent.com/u/693684?v=4)](https://github.com/seriema "seriema (36 commits)")[![steveush](https://avatars.githubusercontent.com/u/1692151?v=4)](https://github.com/steveush "steveush (17 commits)")[![dboune](https://avatars.githubusercontent.com/u/68863?v=4)](https://github.com/dboune "dboune (7 commits)")[![OliverRC](https://avatars.githubusercontent.com/u/1888486?v=4)](https://github.com/OliverRC "OliverRC (7 commits)")[![akf](https://avatars.githubusercontent.com/u/35591?v=4)](https://github.com/akf "akf (5 commits)")[![LorenzKahl](https://avatars.githubusercontent.com/u/301135?v=4)](https://github.com/LorenzKahl "LorenzKahl (4 commits)")[![alonextou](https://avatars.githubusercontent.com/u/2092199?v=4)](https://github.com/alonextou "alonextou (4 commits)")[![filsh](https://avatars.githubusercontent.com/u/6173680?v=4)](https://github.com/filsh "filsh (2 commits)")[![mvance](https://avatars.githubusercontent.com/u/82473?v=4)](https://github.com/mvance "mvance (2 commits)")[![davidduda](https://avatars.githubusercontent.com/u/3480592?v=4)](https://github.com/davidduda "davidduda (1 commits)")[![darms69](https://avatars.githubusercontent.com/u/4134970?v=4)](https://github.com/darms69 "darms69 (1 commits)")[![pattan](https://avatars.githubusercontent.com/u/1073964?v=4)](https://github.com/pattan "pattan (1 commits)")[![pcassis](https://avatars.githubusercontent.com/u/1944826?v=4)](https://github.com/pcassis "pcassis (1 commits)")[![polof](https://avatars.githubusercontent.com/u/419275?v=4)](https://github.com/polof "polof (1 commits)")[![barchard](https://avatars.githubusercontent.com/u/17622?v=4)](https://github.com/barchard "barchard (1 commits)")[![nicmart](https://avatars.githubusercontent.com/u/443063?v=4)](https://github.com/nicmart "nicmart (1 commits)")[![josephdpurcell](https://avatars.githubusercontent.com/u/778111?v=4)](https://github.com/josephdpurcell "josephdpurcell (1 commits)")[![kenzik](https://avatars.githubusercontent.com/u/423503?v=4)](https://github.com/kenzik "kenzik (1 commits)")[![kurtaschliman](https://avatars.githubusercontent.com/u/1709286?v=4)](https://github.com/kurtaschliman "kurtaschliman (1 commits)") --- Tags responsivetable ### Embed Badge ![Health badge](/badges/filsh-footable/health.svg) ``` [![Health](https://phpackages.com/badges/filsh-footable/health.svg)](https://phpackages.com/packages/filsh-footable) ``` ### Alternatives [nicolaskruchten/pivottable Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with drag'n'drop. 4.4k202.9k1](/packages/nicolaskruchten-pivottable)[mottie/tablesorter tablesorter (FORK) is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. 2.6k223.5k](/packages/mottie-tablesorter)[components/bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. 932.8M63](/packages/components-bootstrap)[datatables.net/datatables.net DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. This is jQuery DataTables 56156.5k25](/packages/datatablesnet-datatablesnet) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)