├── bower.json ├── LICENSE ├── basictable.css ├── jquery.basictable.min.js ├── README.md ├── jquery.basictable.js └── demo ├── css └── style.css └── index.html /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "basictable", 3 | "version": "1.0.5", 4 | "license": "MIT", 5 | "main": [ 6 | "jquery.basictable.js", 7 | "basictable.css" 8 | ], 9 | "ignore": [ 10 | "**/.*", 11 | "**/*.md", 12 | "**/*.json", 13 | "node_modules", 14 | "bower_components", 15 | "test", 16 | "tests" 17 | ], 18 | "homepage": "https://github.com/jerrylow/basictable", 19 | "authors": [ 20 | "jerrylow " 21 | ], 22 | "description": "Basic Table jQuery plugin for simple responsive tables.", 23 | "moduleType": [ 24 | "globals" 25 | ], 26 | "keywords": [ 27 | "responsive", 28 | "table", 29 | "jquery" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Jerry 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /basictable.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Basic Table 3 | * Author: Jerry Low 4 | */ 5 | 6 | table.bt thead, 7 | table.bt tbody th { 8 | display: none; 9 | } 10 | 11 | table.bt tfoot th, 12 | table.bt tfoot td, 13 | table.bt tbody td { 14 | border: none; 15 | display: block; 16 | display: -webkit-box; 17 | display: -webkit-flex; 18 | display: -ms-flexbox; 19 | display: flex; 20 | vertical-align: top; 21 | 22 | /* IE 9 */ 23 | float: left\9; 24 | width: 100%\9; 25 | } 26 | 27 | table.bt tfoot th::before, 28 | table.bt tfoot td::before, 29 | table.bt tbody td::before { 30 | content: attr(data-th) ": "; 31 | display: inline-block; 32 | -webkit-flex-shrink: 0; 33 | -ms-flex-shrink: 0; 34 | flex-shrink: 0; 35 | font-weight: bold; 36 | width: 6.5em; 37 | } 38 | 39 | table.bt tfoot th.bt-hide, 40 | table.bt tfoot td.bt-hide, 41 | table.bt tbody td.bt-hide { 42 | display: none; 43 | } 44 | 45 | table.bt tfoot th .bt-content, 46 | table.bt tfoot td .bt-content, 47 | table.bt tbody td .bt-content { 48 | vertical-align: top; 49 | } 50 | 51 | .bt-wrapper.active { 52 | max-height: 310px; 53 | overflow: auto; 54 | -webkit-overflow-scrolling: touch; 55 | } 56 | -------------------------------------------------------------------------------- /jquery.basictable.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Basic Table 3 | * Author: Jerry Low 4 | */(function(e){e.fn.basictable=function(t){var n=function(t,n){var i=[];n.tableWrap&&t.wrap('
');var s="";t.find("thead tr th").length?s="thead th":t.find("tbody tr th").length?s="tbody tr th":t.find("th").length?s="tr:first th":s="tr:first td",e.each(t.find(s),function(){var t=e(this),n=parseInt(t.attr("colspan"),10)||1,r=t.closest("tr").index();i[r]||(i[r]=[]);for(var s=0;s')}else t.addClass("bt-hide")})},i=function(t){e.each(t.find("td"),function(){var t=e(this),n=t.children(".bt-content").html();t.html(n)})},s=function(t,n){n.forceResponsive?e(window).width()<=n.breakpoint?o(t,n):u(t,n):t.removeClass("bt").outerWidth()>t.parent().width()?o(t,n):u(t,n)},o=function(e,t){e.addClass("bt"),t.tableWrap&&e.parent(".bt-wrapper").addClass("active")},u=function(e,t){e.removeClass("bt"),t.tableWrap&&e.parent(".bt-wrapper").removeClass("active")},a=function(e,t){e.find("td").removeAttr("data-th"),t.tableWrap&&e.unwrap(),t.contentWrap&&i(e),e.removeData("basictable")},f=function(e){e.data("basictable")&&s(e,e.data("basictable"))};this.each(function(){var r=e(this);if(r.length===0||r.data("basictable"))return r.data("basictable")&&(t=="destroy"?a(r,r.data("basictable")):t==="start"?o(r,r.data("basictable")):t==="stop"?u(r,r.data("basictable")):s(r,r.data("basictable"))),!1;var i=e.extend({},e.fn.basictable.defaults,t),l={breakpoint:i.breakpoint,contentWrap:i.contentWrap,forceResponsive:i.forceResponsive,noResize:i.noResize,tableWrap:i.tableWrap,showEmptyCells:i.showEmptyCells};r.data("basictable",l),n(r,r.data("basictable")),l.noResize||(s(r,r.data("basictable")),e(window).bind("resize.basictable",function(){f(r)}))})},e.fn.basictable.defaults={breakpoint:568,contentWrap:!0,forceResponsive:!0,noResize:!1,tableWrap:!1,showEmptyCells:!1}})(jQuery); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Basic Table 2 | 3 | A simple lightweight jQuery responsive table library. A library to setup tables for a basic responsive table stucture. Utilizing the techniques of http://css-tricks.com/responsive-data-tables/. This is to assists in those situations where the users don't necessarily have access or capacity to modify HTML such as input from a WYSIWYG. 4 | 5 | **[View Demo](http://www.jerrylow.com/basictable/demo/)** 6 | 7 | ## Options 8 | 9 | ### breakpoint 10 | 11 | `integer` `default: 568` 12 | 13 | Define the breakpoint (viewport's width) when the table will engage in responsive mode. 14 | 15 | ### contentWrap 16 | 17 | `boolean` `default: true` 18 | 19 | Wraps the original content within the cell in a span with class .bt-content, to help with CSS selection. 20 | 21 | ### forceResponsive 22 | 23 | `boolean` `default: true` 24 | 25 | The library will always force the table into responsive mode once the breakpoint is met. If this is set to false the table will only change mode when the table itself is larger than its immediate parent's inner width. 26 | 27 | ### noResize 28 | 29 | `boolean` `default: false` 30 | 31 | Disable Basic Table's JS resize. The table won't engage in responsive mode unless media query or another resize bind outside of Basic Table is defined. 32 | 33 | ### tableWrap 34 | 35 | `boolean` `default: false` 36 | 37 | When the library is initialize create a div wrapper around the table with class .bt-wrapper. This wrapper will toggle an active class when the table mode changes. 38 | 39 | ### showEmptyCells 40 | 41 | `boolean` `default: false` 42 | 43 | When true, empty cells will be shown. 44 | 45 | ## Methods 46 | 47 | ### start 48 | 49 | Engage the table in responsive mode. This method can only run after the table has been initialized. 50 | 51 | ```js 52 | $('table').basictable('start'); 53 | ``` 54 | 55 | ### stop 56 | 57 | Toggle the table back to normal mode, removing the responsive look. This does not destory the Basic Table data and wrappers. The table will still work once the breakpoint is met. 58 | 59 | ```js 60 | $('table').basictable('stop'); 61 | ``` 62 | 63 | ### destroy 64 | 65 | Destroy the the responsive bind on the table. This will remove all data and generated wrappers from the table, returning it to its initial state. 66 | 67 | ```js 68 | $('table').basictable('destroy'); 69 | ``` 70 | -------------------------------------------------------------------------------- /jquery.basictable.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Basic Table 3 | * Author: Jerry Low 4 | */ 5 | 6 | (function($) { 7 | $.fn.basictable = function(options) { 8 | 9 | var setup = function(table, data) { 10 | var headings = []; 11 | 12 | if (data.tableWrap) { 13 | table.wrap('
'); 14 | } 15 | 16 | var format = ''; 17 | 18 | if (table.find('thead tr th').length) { 19 | format = 'thead th'; 20 | } 21 | else if (table.find('tbody tr th').length) { 22 | format = 'tbody tr th'; 23 | } 24 | else if (table.find('th').length) { 25 | format = 'tr:first th'; 26 | } 27 | else { 28 | format = 'tr:first td'; 29 | } 30 | 31 | $.each(table.find(format), function() { 32 | var $heading = $(this); 33 | var colspan = parseInt($heading.attr('colspan'), 10) || 1; 34 | var row = $heading.closest('tr').index(); 35 | 36 | if (!headings[row]) { 37 | headings[row] = []; 38 | } 39 | 40 | for (var i = 0; i < colspan; i++) { 41 | headings[row].push($heading); 42 | } 43 | }); 44 | 45 | // Table Body 46 | $.each(table.find('tbody tr'), function() { 47 | setupRow($(this), headings, data); 48 | }); 49 | 50 | // Table Footer 51 | $.each(table.find('tfoot tr'), function() { 52 | setupRow($(this), headings, data); 53 | }); 54 | }; 55 | 56 | var setupRow = function($row, headings, data) { 57 | $row.children().each(function() { 58 | var $cell = $(this); 59 | 60 | if (($cell.html() === '' || $cell.html() === ' ') && (!data.showEmptyCells)) { 61 | $cell.addClass('bt-hide'); 62 | } 63 | else { 64 | var cellIndex = $cell.index(); 65 | var headingText = ''; 66 | 67 | for (var j = 0; j < headings.length; j++) { 68 | if (j != 0) { 69 | headingText += ': '; 70 | } 71 | 72 | var $heading = headings[j][cellIndex]; 73 | headingText += $heading.text(); 74 | } 75 | 76 | $cell.attr('data-th', headingText); 77 | 78 | if (data.contentWrap && !$cell.children().hasClass('bt-content')) { 79 | $cell.wrapInner(''); 80 | } 81 | } 82 | }); 83 | }; 84 | 85 | var unwrap = function(table) { 86 | $.each(table.find('td'), function() { 87 | var $cell = $(this); 88 | var content = $cell.children('.bt-content').html(); 89 | $cell.html(content); 90 | }); 91 | }; 92 | 93 | var check = function(table, data) { 94 | // Only change when table is larger than parent if force 95 | // responsive is turned off. 96 | if (!data.forceResponsive) { 97 | if (table.removeClass('bt').outerWidth() > table.parent().width()) { 98 | start(table, data); 99 | } 100 | else { 101 | end(table, data); 102 | } 103 | } 104 | else { 105 | if ($(window).width() <= data.breakpoint) { 106 | start(table, data); 107 | } 108 | else { 109 | end(table, data); 110 | } 111 | } 112 | }; 113 | 114 | var start = function(table, data) { 115 | table.addClass('bt'); 116 | 117 | if (data.tableWrap) { 118 | table.parent('.bt-wrapper').addClass('active'); 119 | } 120 | }; 121 | 122 | var end = function(table, data) { 123 | table.removeClass('bt'); 124 | 125 | if (data.tableWrap) { 126 | table.parent('.bt-wrapper').removeClass('active'); 127 | } 128 | }; 129 | 130 | var destroy = function(table, data) { 131 | table.find('td').removeAttr('data-th'); 132 | 133 | if (data.tableWrap) { 134 | table.unwrap(); 135 | } 136 | 137 | if (data.contentWrap) { 138 | unwrap(table); 139 | } 140 | 141 | table.removeData('basictable'); 142 | }; 143 | 144 | var resize = function(table) { 145 | if (table.data('basictable')) { 146 | check(table, table.data('basictable')); 147 | } 148 | }; 149 | 150 | // Get table. 151 | this.each(function() { 152 | var table = $(this); 153 | 154 | // If table has already executed. 155 | if (table.length === 0 || table.data('basictable')) { 156 | if (table.data('basictable')) { 157 | // Destroy basic table. 158 | if (options == 'destroy') { 159 | destroy(table, table.data('basictable')); 160 | } 161 | // Start responsive mode. 162 | else if (options === 'start') { 163 | start(table, table.data('basictable')); 164 | } 165 | else if (options === 'stop') { 166 | end(table, table.data('basictable')); 167 | } 168 | else { 169 | check(table, table.data('basictable')); 170 | } 171 | } 172 | return false; 173 | } 174 | 175 | // Extend Settings. 176 | var settings = $.extend({}, $.fn.basictable.defaults, options); 177 | 178 | var vars = { 179 | breakpoint: settings.breakpoint, 180 | contentWrap: settings.contentWrap, 181 | forceResponsive: settings.forceResponsive, 182 | noResize: settings.noResize, 183 | tableWrap: settings.tableWrap, 184 | showEmptyCells: settings.showEmptyCells 185 | }; 186 | 187 | // Initiate 188 | table.data('basictable', vars); 189 | 190 | setup(table, table.data('basictable')); 191 | 192 | if (!vars.noResize) { 193 | check(table, table.data('basictable')); 194 | 195 | $(window).bind('resize.basictable', function() { 196 | resize(table); 197 | }); 198 | } 199 | }); 200 | }; 201 | 202 | $.fn.basictable.defaults = { 203 | breakpoint: 568, 204 | contentWrap: true, 205 | forceResponsive: true, 206 | noResize: false, 207 | tableWrap: false, 208 | showEmptyCells: false 209 | }; 210 | })(jQuery); 211 | -------------------------------------------------------------------------------- /demo/css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Basic Table Demo CSS. 3 | */ 4 | 5 | @import url(http://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:400,700); 6 | 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | body { 13 | background: #e4ebeb; 14 | color: #636363; 15 | font-family: 'Lato', sans-serif; 16 | line-height: 1.5; 17 | } 18 | 19 | #page { 20 | padding: 50px 100px; 21 | } 22 | 23 | @media only screen and (max-width: 568px) { 24 | #page { 25 | padding: 50px 30px; 26 | } 27 | } 28 | 29 | h1, 30 | h2, 31 | h3, 32 | h4, 33 | h5 { 34 | line-height: 1.2; 35 | font-family: 'Montserrat', sans-serif; 36 | font-weight: normal; 37 | } 38 | 39 | h1 { 40 | color: #5b8e8d; 41 | font-size: 3rem; 42 | font-weight: 700; 43 | letter-spacing: -0.01em; 44 | margin-bottom: 0.75em; 45 | text-transform: uppercase; 46 | } 47 | 48 | @media only screen and (max-width: 568px) { 49 | h1 { 50 | font-size: 2.25rem; 51 | } 52 | } 53 | 54 | h2 { 55 | color: #82bcba; 56 | font-size: 1.75rem; 57 | margin-bottom: 0.75em; 58 | margin-top: 2em; 59 | } 60 | 61 | h3 { 62 | color: #82bcba; 63 | font-size: 1.25rem; 64 | margin-bottom: 0.75em; 65 | margin-top: 2em; 66 | } 67 | 68 | a, 69 | a:visited, 70 | a:active { 71 | color: #5b8e8d; 72 | text-decoration: none; 73 | } 74 | 75 | a:hover { 76 | color: #53bcba; 77 | } 78 | 79 | p { 80 | font-size: 1.125rem; 81 | word-break: break-word; 82 | } 83 | 84 | p.credits { 85 | font-size: .8125rem; 86 | margin-top: 6em; 87 | } 88 | 89 | @media only screen and (max-width: 568px) { 90 | .phone-block { 91 | display: block; 92 | } 93 | 94 | .phone-hide { 95 | display: none; 96 | } 97 | } 98 | 99 | code { 100 | background: #c6d8d8; 101 | border-radius: 5px; 102 | color: #3d6969; 103 | display: block; 104 | margin: 2em 0; 105 | padding: 15px; 106 | position: relative; 107 | } 108 | 109 | code:after { 110 | bottom: 5px; 111 | color: #e4ebeb; 112 | font-family: 'Lato', sans-serif; 113 | font-size: 1rem; 114 | position: absolute; 115 | right: 10px; 116 | text-transform: uppercase; 117 | } 118 | 119 | code.css:after { 120 | content: 'css'; 121 | } 122 | 123 | code.js:after { 124 | content: 'js'; 125 | } 126 | 127 | table { 128 | background: white; 129 | border-collapse: collapse; 130 | margin: 1.25em 0 0; 131 | width: 100%; 132 | } 133 | 134 | table tr, 135 | table th, 136 | table td { 137 | border: none; 138 | border-bottom: 1px solid #e4ebeb; 139 | font-family: 'Lato', sans-serif; 140 | font-size: .875rem; 141 | } 142 | 143 | table th, 144 | table td { 145 | padding: 10px 12px; 146 | text-align: left; 147 | } 148 | 149 | table th { 150 | background: #56a2cf; 151 | color: #ffffff; 152 | text-transform: uppercase; 153 | } 154 | 155 | table tr td { 156 | background: #eaf3f5; 157 | color: #999999; 158 | } 159 | 160 | table tr:nth-of-type(2n+2) td { 161 | background: #ffffff; 162 | } 163 | 164 | table.bt tfoot th, 165 | table.bt tfoot td, 166 | table.bt tbody td { 167 | font-size: .8125rem; 168 | padding: 0; 169 | } 170 | 171 | table.bt tfoot th:before, 172 | table.bt tfoot td:before, 173 | table.bt tbody td:before { 174 | background: #56a2cf; 175 | color: white; 176 | margin-right: 10px; 177 | padding: 2px 10px; 178 | } 179 | 180 | table.bt tfoot th .bt-content, 181 | table.bt tfoot td .bt-content, 182 | table.bt tbody td .bt-content { 183 | display: inline-block; 184 | padding: 2px 5px; 185 | } 186 | 187 | table.bt tfoot th:first-of-type:before, 188 | table.bt tfoot th:first-of-type .bt-content, 189 | table.bt tfoot td:first-of-type:before, 190 | table.bt tfoot td:first-of-type .bt-content, 191 | table.bt tbody td:first-of-type:before, 192 | table.bt tbody td:first-of-type .bt-content { 193 | padding-top: 10px; 194 | } 195 | 196 | table.bt tfoot th:last-of-type:before, 197 | table.bt tfoot th:last-of-type .bt-content, 198 | table.bt tfoot td:last-of-type:before, 199 | table.bt tfoot td:last-of-type .bt-content, 200 | table.bt tbody td:last-of-type:before, 201 | table.bt tbody td:last-of-type .bt-content { 202 | padding-bottom: 10px; 203 | } 204 | 205 | /* 206 | * Example 4: 207 | * Media query over js resize 208 | */ 209 | @media only screen and (max-width: 568px) { 210 | #table-no-resize thead { 211 | display: none; 212 | } 213 | 214 | #table-no-resize tbody td { 215 | border: none !important; 216 | display: block; 217 | font-size: .8125rem; 218 | padding: 0; 219 | vertical-align: top; 220 | 221 | /* IE 9 */ 222 | float: left\9; 223 | width: 100%\9; 224 | } 225 | 226 | #table-no-resize tbody td:before { 227 | background: #56a2cf; 228 | content: attr(data-th) ": "; 229 | color: white; 230 | display: inline-block; 231 | font-weight: bold; 232 | margin-right: 10px; 233 | padding: 2px 10px; 234 | width: 6.5em; 235 | } 236 | 237 | #table-no-resize tbody td .bt-content { 238 | display: inline-block; 239 | padding: 2px 5px; 240 | } 241 | 242 | #table-no-resize tbody td:first-of-type:before, 243 | #table-no-resize tbody td:first-of-type .bt-content { 244 | padding-top: 10px; 245 | } 246 | 247 | #table-no-resize tbody td:last-of-type:before, 248 | #table-no-resize tbody td:last-of-type .bt-content { 249 | padding-bottom: 10px; 250 | } 251 | } 252 | 253 | /* 254 | * Example 5: 255 | * Two axis styling 256 | */ 257 | table.two-axis tr td:first-of-type { 258 | background: #cadde1; 259 | } 260 | 261 | @media only screen and (max-width: 568px) { 262 | table.two-axis tr td:first-of-type, 263 | table.two-axis tr:nth-of-type(2n+2) td:first-of-type, 264 | table.two-axis tr td:first-of-type:before { 265 | background: #3584b3; 266 | color: #ffffff; 267 | } 268 | 269 | table.two-axis tr td:first-of-type { 270 | border-bottom: 1px solid #e4ebeb; 271 | } 272 | 273 | table.two-axis tr td:first-of-type:before { 274 | padding-bottom: 10px; 275 | } 276 | } 277 | 278 | /* 279 | * Example 6: 280 | * Max height 281 | */ 282 | .bt-wrapper.active { 283 | margin-top: 1.5em; 284 | } 285 | .bt-wrapper.active table { 286 | margin: 0; 287 | } 288 | 289 | 290 | table { 291 | width: 100%; 292 | } 293 | .table { 294 | margin: 30px 0; 295 | border-collapse: collapse; 296 | border-spacing: 0; 297 | empty-cells: show; 298 | border: 1px solid #e0e0e0; 299 | } 300 | .table caption { 301 | color: #333; 302 | font-style: italic; 303 | font-size: 85%; 304 | line-height: 1; 305 | padding: 1em 0; 306 | text-align: center; 307 | } 308 | .table td, 309 | .table th { 310 | border-left: 1px solid #e0e0e0; 311 | border-width: 0 0 0 1px; 312 | font-size: inherit; 313 | margin: 0; 314 | overflow: visible; 315 | padding: 0.5em 1em; 316 | font-weight: normal; 317 | } 318 | .table td:first-child, 319 | .table th:first-child { 320 | border-left-width: 0; 321 | } 322 | .table thead, 323 | .table tfoot { 324 | background-color: #f05050; 325 | color: #fff; 326 | text-align: left; 327 | vertical-align: bottom; 328 | } 329 | .table thead td, 330 | .table tfoot td, 331 | .table thead th, 332 | .table tfoot th { 333 | border-color: #fff; 334 | } 335 | .table td { 336 | background-color: transparent; 337 | } 338 | .table_striped tr:nth-child(2n-1) td { 339 | background-color: #ececec; 340 | } 341 | .table_bordered td { 342 | border-bottom: 1px solid #e0e0e0; 343 | } 344 | .table_bordered tbody > tr:last-child > td, 345 | .table_bordered thead > tr:last-child > td { 346 | border-bottom-width: 0; 347 | } 348 | .table_horizontal td, 349 | .table_horizontal th { 350 | border-width: 0 0 1px 0; 351 | border-bottom: 1px solid #e0e0e0; 352 | } 353 | .table_horizontal tbody > tr:last-child > td, 354 | .table_horizontal thead > tr:last-child > td { 355 | border-bottom-width: 0; 356 | } 357 | 358 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Basic Table Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 40 | 41 | 42 | 43 |
44 |

Basic Table Demo

45 |

Demonstration of different settings for Basic Table. For full documentation of settings and method visit http://www.jerrylow.com/basictable or https://github.com/jerrylow/basictable.

46 | 47 |

Basic Implementation

48 |

The basic implementation using all default settigs. The table will use responsive mode when the viewport is less or equal to 568px in width.

49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 |
NameAgeGenderHeightProvinceSport
Jill Smith25Female5'4British ColumbiaVolleyball
John Stone30Male5'9OntarioBadminton
Jane Strip29Female5'6ManitobaHockey
Gary Mountain21Mail5'8AlbertaCurling
James Camera31Male6'1British ColumbiaHiking
104 | 105 | 106 | $('#table').basictable(); 107 | 108 | 109 |

Modifying Breakpoint

110 |

Manually set the breakpoint per table. Setting the breakpoint to 768px so responsive styles will be applied on a typically tablet, portrait mode.

111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 |
NameAgeGenderHeightProvinceSport
Jill Smith25Female5'4British ColumbiaVolleyball
John Stone30Male5'9OntarioBadminton
Jane Strip29Female5'6ManitobaHockey
Gary Mountain21Mail5'8AlbertaCurling
James Camera31Male6'1British ColumbiaHiking
166 | 167 | 168 | $('#table-breakpoint').basictable({
169 |     breakpoint: 768,
170 | }); 171 | 172 | 173 |

Force Responsive Off

174 | 175 |

The script will not force the table to be responsive. The table will only go into responsive mode when the table is actually larger than its parent container. In this demo the parent of table is the div with id page.

176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 |
NameAgeGenderHeightProvinceSport
Jill Smith25Female5'4British ColumbiaVolleyball
John Stone30Male5'9OntarioBadminton
Jane Strip29Female5'6ManitobaHockey
Gary Mountain21Mail5'8AlbertaCurling
James Camera31Male6'1British ColumbiaHiking
231 | 232 | 233 | $('#table-force-off').basictable({
234 |     forceResponsive: false,
235 | }); 236 | 237 | 238 |

Max Height

239 |

Some tables could get very long in responsive. You could set a max-height in mobile where scrolling within the table would happen. Turn on tableWrapper to get a container around the table that toggles an active class. You could also just create your own wrapper and match the breakpoint to do this.

240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 |
NameAgeGenderHeightProvinceSport
Jill Smith25Female5'4British ColumbiaVolleyball
John Stone30Male5'9OntarioBadminton
Jane Strip29Female5'6ManitobaHockey
Gary Mountain21Mail5'8AlbertaCurling
James Camera31Male6'1British ColumbiaHiking
295 | 296 | 297 | $('#table-max-height').basictable({
298 |     tableWrapper: true
299 | }); 300 | 301 | 302 |

CSS Controls

303 |

Use Media Query Over JS Resize

304 |

If you don't want to use the js bind on resize you can use css to control the breakpoint itself. Using basic table to setup the structure itself and copying basictable.css styles into your own media query.

305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 |
NameAgeGenderHeightProvinceSport
Jill Smith25Female5'4British ColumbiaVolleyball
John Stone30Male5'9OntarioBadminton
Jane Strip29Female5'6ManitobaHockey
Gary Mountain21Mail5'8AlbertaCurling
James Camera31Male6'1British ColumbiaHiking
360 | 361 | 362 | @media only screen and (max-width: 568px) {
363 |   #table-no-resize thead {
364 |       display: none;
365 |   }

366 | 367 |   #table-no-resize tbody td {
368 |       border: none !important;
369 |       display: block;
370 |       vertical-align: top;
371 |   }

372 | 373 |   #table-no-resize tbody td:before {
374 |       content: attr(data-th) ": ";
375 |       display: inline-block;
376 |       font-weight: bold;
377 |       width: 6.5em;
378 |   }

379 | 380 |   #table-no-resize tbody td.bt-hide {
381 |       display: none;
382 |   }
383 | } 384 | 385 | 386 | 387 | $('#table-no-resize').basictable({
388 |     noResize: true,
389 | }); 390 | 391 | 392 |

Two Axis Styling

393 |

Two axis could be styled differently. This does not need to be done through the library itself. The example code will show how to target the first column in desktop and first row in responsive mode.

394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 |
NameAgeGenderHeightProvinceSport
Jill Smith25Female5'4British ColumbiaVolleyball
John Stone30Male5'9OntarioBadminton
Jane Strip29Female5'6ManitobaHockey
Gary Mountain21Mail5'8AlbertaCurling
James Camera31Male6'1British ColumbiaHiking
449 | 450 | 451 | table.two-axis tr td:first-of-type {
452 |     background: #dff1f7;
453 | }

454 | 455 | @media only screen and (max-width: 568px) {
456 |     table.two-axis tr td:first-of-type,
457 |     table.two-axis tr:nth-of-type(2n+2) td:first-of-type,
458 |     table.two-axis tr td:first-of-type:before 459 | {
460 |         background: #dff1f7;
461 |         color: #ffffff;
462 |     }

463 | 464 |     table.two-axis tr td:first-of-type {
465 |         border-bottom: 1px solid #e4ebeb;
466 |     }
467 | } 468 | 469 | 470 |

Author: Jerry Low (@jerrylowm)  |  Palette Design: Amit Jakhu (@amitjakhu) 471 |

472 | 473 | --------------------------------------------------------------------------------