Last active
August 15, 2018 19:19
-
-
Save attebury/d0beb26f5674ac3450d4 to your computer and use it in GitHub Desktop.
Collapsible table example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| * | |
| * The table container expands to fill the width of its parent column. | |
| * | |
| * Uses progressive enhancement so hidden rows are visible without javascript. | |
| * Requires the absence of a .no-js class on the <html> node. | |
| * | |
| * Place this in the document head for progressive enhancement | |
| * <script type="text/javascript"> | |
| * document.documentElement.classList.remove('no-js'); | |
| * </script> | |
| * | |
| * Place .is-invisible on each row you want to initially hide. | |
| * | |
| * Depends on boCollapsibleTable jQuery plugin for interactivity. | |
| * You must manually reference this jQuery plugin. | |
| * It is not included in the default BO library. | |
| * <script src="/assets/v1/src/js/bo/jquery-collapsibletable-1.0.0.js"></script> | |
| * | |
| * Instatiate the plugin like any other | |
| * $('.js-bo-table__data--collapsible').boCollapsibleTable(); | |
| * | |
| * If you need custom styling or functionality, add custom classes as appropriate | |
| --> | |
| <div class="bo-table__container--collapsible"> | |
| <table class="bo-table bo-table__data bo-table__data--collapsible is-collapsed js-bo-table__data--collapsible"> | |
| <caption>Reserves</caption> | |
| <thead> | |
| <tr> | |
| <th scope="column" class="bo-table__data--collapsible__heading">Reserves</th> | |
| <th class="bo-table__currency" scope="column">Paid</th> | |
| <th class="bo-table__currency" scope="column">Outstanding</th> | |
| </tr> | |
| </thead> | |
| <tfoot> | |
| <tr> | |
| <td colspan="4"> | |
| <button class="btn btn-link btn-small bo-btn__icon bo-table__data--collapsible__toggle-button js-bo-table__data--collapsible__toggle-button"><i class="icon icon-toggle-down"></i></button> | |
| </td> | |
| </tr> | |
| </tfoot> | |
| <tbody> | |
| <tr> | |
| <th scope="row">Medical</th> | |
| <td class="bo-table__currency">$8,000.80</td> | |
| <td class="bo-table__currency">$10,000.00</td> | |
| </tr> | |
| <tr> | |
| <th scope="row">Time Loss</th> | |
| <td class="bo-table__currency">$8.41</td> | |
| <td class="bo-table__currency">$0.00</td> | |
| </tr> | |
| <tr> | |
| <th scope="row">PPD</th> | |
| <td class="bo-table__currency">$1.00</td> | |
| <td class="bo-table__currency">$9.00</td> | |
| </tr> | |
| <tr class="is-invisible"> | |
| <th scope="row">PTD</th> | |
| <td class="bo-table__currency">$8.00</td> | |
| <td class="bo-table__currency">$9.00</td> | |
| </tr> | |
| <tr class="is-invisible"> | |
| <th scope="row">Fatal</th> | |
| <td class="bo-table__currency">$2.00</td> | |
| <td class="bo-table__currency">$9.00</td> | |
| </tr> | |
| <tr class="is-invisible"> | |
| <th scope="row">Legal Fees</th> | |
| <td class="bo-table__currency">$4.00</td> | |
| <td class="bo-table__currency">$9.00</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! | |
| * Collapsible Table jQuery Plugin | |
| * John Attebury | |
| * 2014-6-25 | |
| * | |
| * UMD plugin can be used as an AMD module or a browser global | |
| * | |
| * Collapsible Table hides rows which don't need to be viewed very often. | |
| * Clicking the table toggles those hidden rows. | |
| * | |
| * | |
| */ | |
| (function (factory) { | |
| if (typeof define === 'function' && define.amd) { | |
| // AMD. Register as an anonymous module. | |
| define(['jquery'], factory); | |
| } else { | |
| // Browser globals | |
| factory(jQuery); | |
| } | |
| }(function ($) { | |
| // Create the defaults once | |
| var pluginName = "boCollapsibleTable", | |
| defaults = { | |
| }; | |
| // The actual plugin constructor | |
| function Plugin(element, options) { | |
| this.element = element; | |
| this.options = $.extend({}, defaults, options); | |
| this._defaults = defaults; | |
| this._name = pluginName; | |
| this.init(); | |
| } | |
| Plugin.prototype = { | |
| init: function () { | |
| $(this.element).on("click", this.toggle); | |
| /* need a better way to handle this | |
| * maybe do queries here and pass to functions | |
| */ | |
| $('.js-bo-table__data--collapsible__toggle-button').on('click', function (e) { | |
| e.preventDefault(); | |
| }); | |
| }, | |
| toggle: function (e) { | |
| e.preventDefault(); | |
| var $table, | |
| buttonState, | |
| buttonText, | |
| $toggleButton; | |
| $table = $(this); | |
| $table.toggleClass('is-collapsed'); | |
| buttonState = $table.hasClass('is-collapsed') ? 'down' : 'up'; | |
| buttonText = '<i class="icon icon-toggle-' + buttonState + '"></i>'; | |
| $toggleButton = $table.find('.js-bo-table__data--collapsible__toggle-button'); | |
| $toggleButton.html(buttonText); | |
| } | |
| }; | |
| // A really lightweight plugin wrapper around the constructor, | |
| // preventing against multiple instantiations | |
| $.fn[pluginName] = function (options) { | |
| return this.each(function () { | |
| if (!$.data(this, "plugin_" + pluginName)) { | |
| $.data(this, "plugin_" + pluginName, | |
| new Plugin(this, options)); | |
| } | |
| }); | |
| }; | |
| })); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment