FooTable - jQuery plugin for responsive HTML tables

A demo showing how to replace the expand/collapse icons with markup of your choosing. Do this if you want to have your toggler inline (not as a background) or you need to insert some markup you can't include via CSS.

First Name | Last Name | Job Title | DOB | Status
--- | --- | --- | --- | ---
Isidra | Boudreaux | Traffic Court Referee | 22 Jun 1972 | Active
Shona | Woldt | Airline Transport Pilot | 3 Oct 1981 | Disabled
Granville | Leonardo | Business Services Sales Representative | 19 Apr 1969 | Suspended
Easer | Dragoo | Drywall Stripper | 13 Dec 1977 | Active
Maple | Halladay | Aviation Tactical Readiness Officer | 30 Dec 1991 | Suspended
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Disabled
Lorraine | Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Disabled
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended
Judi | Badgett | Electrical Lineworker | 23 Jun 1981 | Active
Lauri | Hyland | Blackjack Supervisor | 15 Nov 1985 | Suspended

Note that only the second and last steps differ from the default setup.

1. #### Include FooTable Core CSS

   (Same as in Getting Started).

       <link href="path_to_your_css/footable.core.css" rel="stylesheet" type="text/css" />

2. #### Add CSS for Your Custom Toggler

       <link href="path_to_your_css/your_additional_footable.css" rel="stylesheet" type="text/css" />

In this demo, we add classes "footable-expand" and "footable-contract" on elements that should appear for the expand and contract controls, respectively, and add display rules for those in css/arbitrary_toggle_markup.css:

    .footable > tbody > tr > td > .footable-toggle > .footable-contract {
      display: none;
    }
    .footable > tbody > tr > td > .footable-toggle > .footable-expand {
      display: none;
    }
    .footable.breakpoint > tbody > tr > td > .footable-toggle > .footable-expand {
      display: inline;
    }
    .footable.breakpoint > tbody > tr.footable-detail-show > td > .footable-toggle > .footable-expand {
      display: none;
    }
    .footable.breakpoint > tbody > tr.footable-detail-show > td > .footable-toggle > .footable-contract {
      display: inline;
    }

    /** Override icons from footable.core.css:  **/
    .footable.breakpoint > tbody > tr.footable-detail-show > td > span.footable-toggle:before {
      content: "";
    }
    .footable.breakpoint > tbody > tr >  td > span.footable-toggle:before {
      content: "";
    }

Note that the last two rules override rules from footable.core.css that would add icons to a span with the footable-toggle.class. In practice, you might more likely replace footable.core.css with your own version.

3. #### Include jQuery

   (Same as in Getting Started).

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

4. #### Include FooTable jQuery Plugin

   (Same as in Getting Started).

       <script src="path_to_your_js/footable.js" type="text/javascript"></script>

5. #### Initialize FooTable, Overriding toggleHTMLElement

   Your markup must include an enclosing span. FooTable keys off this element, adding and removing the span as needed based on the width of the viewport and the defined breakpoints. If other elements are nested within the span and are to be clickable controls, they should have the footable-toggle class as shown here.

       <script type="text/javascript">
               $(function () {
                       $('.footable').footable({
                                                 toggleHTMLElement: '<span><img src="img/plus.png" class="footable-toggle footable-expand" border="0" alt="Expand"><img src="img/minus.png" class="footable-toggle footable-contract" border="0" alt="Contract"></span>'
                                                 });
               });
       </script>

#### Using Arbitrary Markup for the Toggler

By default, FooTable adds an empty <span> with the class "footable-toggle" to the cell that will show the expand/contract toggler, and adds the visual elements (usually icons) with CSS styles. You can override this by telling FooTable to insert some other HTML markup.

This approach was inspired by an accessibility review on one site that recommended using an inline image (not a background element) with appropriate ALT text so that the ALT text would be available to screen readers.

See the Setup tab for details.