A Responsive Design Approach for Complex, Multicolumn Data Tables by filament group, moved to coffeescript.

rwdTables.coffee

rwdTables = ->
    container = $('<div class="table-menu table-menu-hidden"><ul /></div>')
    $( "thead th" ).each (i) ->
        th = $(this)
        id = th.attr("id")
        classes = th.attr("class");  # essential, optional (or other content identifiers)

       # assign an ID to each header, if none is in the markup
        if id is undefined
            id = ( "col-" ) + i;
            th.attr("id", id);

        # loop through each row to assign a "headers" attribute and any classes (essential, optional) to the matching cell
        # the "headers" attribute value = the header's ID
        $( "tbody tr" ).each ->
            cell = $(this).find("th, td").eq(i);
            cell.attr("headers", id);
            cell.addClass(classes) if classes

        # create the menu hide/show toggles
        unless th.is(".persist")

            # note that each input's value matches the header's ID;
            # later we'll use this value to control the visibility of that header and it's associated cells
            toggle = $("<li><input type=\"checkbox\" name=\"toggle-cols\" id=\"toggle-col-" + i + "\" value=\"" + id + "\" /> <label for=\"toggle-col-" + i + "\">" + th.data("text") + "</label></li>")

            # append each toggle to the container
            container.find("ul").append toggle

            # assign behavior

            # when the checkbox is toggled
            # this equals the header's ID, i.e. "company"
            # so we can easily find the matching header (id="company") and cells (headers="company")

            # custom event that sets the checked state for each toggle based on column visibility, which is controlled by @media rules in the CSS
            # called whenever the window is resized or reoriented (mobile)

            # call the custom event on load
            toggle.find("input").on 'change', ->
                input = $(this)
                val = input.val()
                cols = $("#" + val + ", [headers=" + val + "]")
                if input.is(":checked")
                    cols.show()
                else
                    cols.hide()
            .on "updateCheck", ->
                if th.css("display") is "table-cell"
                    $(this).prop "checked", true
                else
                    $(this).attr "checked", false
            .trigger "updateCheck"
        undefined
    # update the inputs' checked status
    $(window).on "orientationchange resize", ->
        container.find("input").trigger "updateCheck"

    menuWrapper = $("<div class=\"table-menu-wrapper\" />")
    menuBtn = $("<a href=\"#\" class=\"table-menu-btn\">Display</a>")
    menuBtn.on "click", ->
        container.toggleClass "table-menu-hidden"
        false

    menuWrapper.append(menuBtn).append container
    $('.table').before menuWrapper # append the menu immediately before the table

    # assign click-away-to-close event
    $(document).on "click", (e) ->
        container.addClass "table-menu-hidden"  if not $(e.target).is(container) and not $(e.target).is(container.find("*"))
    undefined