├── .gitignore ├── .npmignore ├── .prettierrc ├── LICENSE ├── README.md ├── css ├── responsive-tables.css └── responsive-tables.min.css ├── index.html ├── js ├── app.js ├── jquery.responsive-tables.js └── jquery.responsive-tables.min.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Compiled source # 2 | ################### 3 | *.com 4 | *.class 5 | *.dll 6 | *.exe 7 | *.o 8 | *.so 9 | 10 | # Directories # 11 | ############ 12 | node_modules/ 13 | 14 | # Packages # 15 | ############ 16 | # it's better to unpack these files and commit the raw source 17 | # git has its own built in compression methods 18 | *.7z 19 | *.dmg 20 | *.gz 21 | *.iso 22 | *.jar 23 | *.rar 24 | *.tar 25 | *.zip 26 | 27 | # files # 28 | ###################### 29 | settings.json 30 | .npmrc 31 | .vscode 32 | screenshot.png 33 | 34 | # Logs and databases # 35 | ###################### 36 | *.log 37 | *.sql 38 | *.sqlite 39 | 40 | # OS generated files # 41 | ###################### 42 | .DS_Store 43 | .DS_Store? 44 | ._* 45 | .Spotlight-V100 46 | .Trashes 47 | ehthumbs.db 48 | Thumbs.db 49 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Compiled source # 2 | ################### 3 | *.com 4 | *.class 5 | *.dll 6 | *.exe 7 | *.o 8 | *.so 9 | 10 | # Directories # 11 | ############ 12 | node_modules/ 13 | 14 | # Packages # 15 | ############ 16 | # it's better to unpack these files and commit the raw source 17 | # git has its own built in compression methods 18 | *.7z 19 | *.dmg 20 | *.gz 21 | *.iso 22 | *.jar 23 | *.rar 24 | *.tar 25 | *.zip 26 | 27 | # files # 28 | ###################### 29 | demo.html 30 | app.js 31 | !package.json 32 | .vscode 33 | .prettierrc 34 | screenshot.png 35 | 36 | # Logs and databases # 37 | ###################### 38 | *.log 39 | *.sql 40 | *.sqlite 41 | 42 | # OS generated files # 43 | ###################### 44 | .DS_Store 45 | .DS_Store? 46 | ._* 47 | .Spotlight-V100 48 | .Trashes 49 | ehthumbs.db 50 | Thumbs.db 51 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 4, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": true, 7 | "trailingComma": "none", 8 | "bracketSpacing": true, 9 | "jsxBracketSameLine": true, 10 | "fluid": false 11 | } 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 ryanwellsdotcom 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## jquery-responsive-tables 2 | 3 | [![npm version](https://badge.fury.io/js/jquery-responsive-tables.svg)](https://badge.fury.io/js/jquery-responsive-tables) 4 | 5 | A lightweight jQuery plugin that enables HTML table markup to become responsive. It provides a clean list view via devices with small screens, then returns to the traditional view for larger screens. It can work for multiple tables on a single page, as well as with tables that contain various combinations of merged cells. It uses CSS for the rendering and is easily customized. 6 | 7 | 8 | 9 | ### Demo 10 | 11 | ### Usage 12 | 13 | ``` 14 | npm install jquery-responsive-tables --save 15 | ``` 16 | 17 | - The plugin requires jQuery 1.11 or above. 18 | - Include the jquery.responsive-tables.js and the responsive-tables.css in your project. The CSS properties can be overridden to meet your needs. 19 | - Invoke the plugin within your custom scripts file: 20 | 21 | ```javascript 22 | $(document).ready(function() { 23 | $.responsiveTables(); 24 | }); 25 | ``` 26 | 27 | - Ensure that tables are marked up semantically using the <thead> (optional) and <tbody> (required) tags: 28 | 29 | ```html 30 | 31 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | ... 44 | 45 | 46 |
32 | Example 33 |
Heading
Sample
47 | ``` 48 | 49 | ### Customizations 50 | 51 | Within the responsive-tables.css style sheet, change the media query breakpoint as needed: 52 | 53 | ```css 54 | @media only screen and (max-width: 768px); 55 | ``` 56 | 57 | When changing the media query breakpoint within the responsive-tables.css style sheet, as described above, ensure that a matching value is passed from the plugin invocation: 58 | 59 | ```javascript 60 | $.responsiveTables('768px'); 61 | ``` 62 | 63 | ### Author 64 | 65 | Ryan Wells: [ryanwells.com][twitter] 66 | 67 | ### License 68 | 69 | Licensed under [MIT][mit]. Enjoy. 70 | 71 | [twitter]: http://ryanwells.com 72 | [mit]: http://www.opensource.org/licenses/mit-license.php 73 | [jquery]: http://jquery.com/ 74 | -------------------------------------------------------------------------------- /css/responsive-tables.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Responsive Tables plugin 2.2.1 3 | * Ryan Wells 4 | * Copyright 2019, Ryan Wells (https://ryanwells.com) 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | */ 8 | 9 | /* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */ 10 | @media only screen and (max-width: 800px) { 11 | /* change media query width to suit needs */ 12 | /* force table markup to behave like divs */ 13 | .jrt table, 14 | .jrt thead, 15 | .jrt tbody, 16 | .jrt th, 17 | .jrt td, 18 | .jrt tr { 19 | display: block; 20 | text-align: left; 21 | } 22 | /* hide table headers (but not display: none;, for accessibility) */ 23 | .jrt thead tr { 24 | position: absolute; 25 | top: -9999px; 26 | left: -9999px; 27 | } 28 | .jrt tr { 29 | border: 1px solid #ccc; 30 | } 31 | .jrt td { 32 | /* behave like a "row" */ 33 | display: -webkit-box; 34 | display: -ms-flexbox; 35 | display: flex; 36 | border: none; 37 | border-bottom: 1px solid #eee; 38 | font-weight: normal; 39 | } 40 | .jrt td:before { 41 | display: -webkit-box; 42 | display: -ms-flexbox; 43 | display: flex; 44 | width: 100%; 45 | max-width: 45%; 46 | padding-right: 6px; 47 | font-weight: bold; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /css/responsive-tables.min.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Responsive Tables plugin 2.2.1 3 | * Ryan Wells 4 | * Copyright 2019, Ryan Wells (https://ryanwells.com) 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | */ 8 | @media only screen and (max-width:800px){.jrt table,.jrt tbody,.jrt td,.jrt th,.jrt thead,.jrt tr{display:block;text-align:left}.jrt thead tr{position:absolute;top:-9999px;left:-9999px}.jrt tr{border:1px solid #ccc}.jrt td{display:-webkit-box;display:-ms-flexbox;display:flex;border:none;border-bottom:1px solid #eee;font-weight:400}.jrt td:before{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;max-width:45%;padding-right:6px;font-weight:700}} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jquery-responsive-tables 7 | 11 | 47 | 52 | 53 | 54 | 55 | 56 | 59 | 60 | 61 | 62 | 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 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 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 |
57 | jquery.responsive-tables.js 58 |
Name 63 | Position (or a potentially long column heading) 64 | OfficeAgeStart dateSalary
Airi SatouAccountantTokyo332008/11/28$162,700
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Cara StevensSales AssistantNew York462011/12/06$145,600
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
154 | 155 | 160 | 161 | 162 | 163 | 164 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | $.responsiveTables(); 3 | }); 4 | -------------------------------------------------------------------------------- /js/jquery.responsive-tables.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Responsive Tables plugin 2.2.1 3 | * Ryan Wells 4 | * Copyright 2019, Ryan Wells (https://ryanwells.com) 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | */ 8 | $.extend({ 9 | responsiveTables: function(breakpoint) { 10 | breakpoint = breakpoint || '800px'; 11 | if ($('table').length > 0) { 12 | $('table').each(function(i) { 13 | i++; 14 | var className = 'jrt-instance-' + i; 15 | var $this = $(this); 16 | $this.addClass('jrt'); 17 | $this.addClass(className); 18 | var respondHtml = ''; 67 | $this.before(respondHtml); 68 | } 69 | }); 70 | } 71 | } 72 | }); 73 | -------------------------------------------------------------------------------- /js/jquery.responsive-tables.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Responsive Tables plugin 2.2.1 3 | * Ryan Wells 4 | * Copyright 2019, Ryan Wells (https://ryanwells.com) 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | */ 8 | $.extend({responsiveTables:function(t){t=t||"800px",$("table").length>0&&$("table").each(function(e){var n="jrt-instance-"+ ++e,a=$(this);a.addClass("jrt"),a.addClass(n);var s='",a.before(s))})}}); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-responsive-tables", 3 | "version": "2.2.1", 4 | "description": "Plugin for mobile-friendly data tables", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "ssh://git@github.com:ryanwellsdotcom/jquery-responsive-tables.git" 12 | }, 13 | "keywords": [ 14 | "jquery", 15 | "responsive", 16 | "tables" 17 | ], 18 | "author": "Ryan Wells (https://ryanwells.com)", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/ryanwellsdotcom/jquery-responsive-tables/issues" 22 | }, 23 | "homepage": "https://github.com/ryanwellsdotcom/jquery-responsive-tables#readme", 24 | "dependencies": { 25 | "jquery": ">=2.11" 26 | } 27 | } 28 | --------------------------------------------------------------------------------