D3.js Sortable & Responsive Table.
Demo: http://bl.ocks.org/prusswan/cdc289db753810a3c537f8eb2603bda8 (fixed sorting issue in http://bl.ocks.org/AMDS/4a61497182b8fcb05906)
D3.js Sortable & Responsive Table.
Demo: http://bl.ocks.org/prusswan/cdc289db753810a3c537f8eb2603bda8 (fixed sorting issue in http://bl.ocks.org/AMDS/4a61497182b8fcb05906)
| First Name | Last Name | Job Title | Favorite Color | Wars or Trek? | Porn Name | Date of Birth | Dream Vacation City | GPA | Arbitrary Data | |
|---|---|---|---|---|---|---|---|---|---|---|
| James | Matman | Chief Sandwich Eater | Lettuce Green | Trek | Digby Green | January 13, 1979 | Gotham City | 3.1 | RBX-12 | |
| The | Tick | Crimefighter Sorta | Blue | Wars | John Smith | July 19, 1968 | Athens | N/A | Edlund, Ben (July 1996). | |
| Jokey | Smurf | Giving Exploding Presents | Smurflow | Smurf | Smurflane Smurfmutt | Smurfuary Smurfteenth, 1945 | New Smurf City | 4.Smurf | One | |
| Cindy | Beyler | Sales Representative | Red | Wars | Lori Quivey | July 5, 1956 | Paris | 3.4 | 3451 | |
| Captain | Cool | Tree Crusher | Blue | Wars | Steve 42nd | December 13, 1982 | Las Vegas | 1.9 | Under the couch |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='UTF-8'> | |
| <title>D3.js Sortable & Responsive Table</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!--[if !IE]><!--> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font: 14px/1.4 Georgia, Serif; | |
| } | |
| #page-wrap { | |
| margin: 50px; | |
| } | |
| p { | |
| margin: 20px 0; | |
| } | |
| /* | |
| Generic Styling, for Desktops/Laptops | |
| */ | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| /* Zebra striping */ | |
| tr:nth-of-type(odd) { | |
| background: #eee; | |
| } | |
| th { | |
| background: #333; | |
| color: white; | |
| font-weight: bold; | |
| cursor: s-resize; | |
| background-repeat: no-repeat; | |
| background-position: 3% center; | |
| } | |
| td, th { | |
| padding: 6px; | |
| border: 1px solid #ccc; | |
| text-align: left; | |
| } | |
| th.des:after { | |
| content: "\21E9"; | |
| } | |
| th.aes:after { | |
| content: "\21E7"; | |
| } | |
| /* | |
| Max width before this PARTICULAR table gets nasty | |
| This query will take effect for any screen smaller than 760px | |
| and also iPads specifically. | |
| */ | |
| @media | |
| only screen and (max-width: 760px), | |
| (min-device-width: 768px) and (max-device-width: 1024px) { | |
| /* Force table to not be like tables anymore */ | |
| table, thead, tbody, th, td, tr { | |
| display: block; | |
| } | |
| /* Hide table headers (but not display: none;, for accessibility) */ | |
| thead tr { | |
| position: absolute; | |
| top: -9999px; | |
| left: -9999px; | |
| } | |
| tr { border: 1px solid #ccc; } | |
| td { | |
| /* Behave like a "row" */ | |
| border: none; | |
| border-bottom: 1px solid #eee; | |
| position: relative; | |
| padding-left: 50%; | |
| } | |
| td:before { | |
| /* Now like a table header */ | |
| position: absolute; | |
| /* Top/left values mimic padding */ | |
| top: 6px; | |
| left: 6px; | |
| width: 45%; | |
| padding-right: 10px; | |
| white-space: nowrap; | |
| } | |
| /* | |
| Label the data | |
| */ | |
| td:before { | |
| content: attr(data-th) ": "; | |
| font-weight: bold; | |
| width: 6.5em; | |
| display: inline-block; | |
| } | |
| } | |
| /* Smartphones (portrait and landscape) ----------- */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 480px) { | |
| body { | |
| padding: 0; | |
| margin: 0; | |
| width: 320px; } | |
| } | |
| /* iPads (portrait and landscape) ----------- */ | |
| @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { | |
| body { | |
| width: 495px; | |
| } | |
| } | |
| </style> | |
| <!--<![endif]--> | |
| </head> | |
| <body> | |
| <div id="page-wrap"> | |
| <h1>D3.js Sortable & Responsive Table</h1> | |
| <p>Click the table header to sort data according to that column</p> | |
| </div> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> | |
| <script type="text/javascript"> | |
| d3.csv("data.csv", function(error, data) { | |
| if (error) throw error; | |
| var sortAscending = true; | |
| var table = d3.select('#page-wrap').append('table'); | |
| var titles = d3.keys(data[0]); | |
| var headers = table.append('thead').append('tr') | |
| .selectAll('th') | |
| .data(titles).enter() | |
| .append('th') | |
| .text(function (d) { | |
| return d; | |
| }) | |
| .on('click', function (d) { | |
| headers.attr('class', 'header'); | |
| if (sortAscending) { | |
| rows.sort(function(a, b) { | |
| // return b[d] < a[d]; | |
| return b[d] < a[d] ? 1 : b[d] == a[d] ? 0 : -1; | |
| }); | |
| sortAscending = false; | |
| this.className = 'aes'; | |
| } else { | |
| rows.sort(function(a, b) { | |
| // return b[d] > a[d]; | |
| return b[d] > a[d] ? 1 : b[d] == a[d] ? 0 : -1; | |
| }); | |
| sortAscending = true; | |
| this.className = 'des'; | |
| } | |
| }); | |
| var rows = table.append('tbody').selectAll('tr') | |
| .data(data).enter() | |
| .append('tr'); | |
| rows.selectAll('td') | |
| .data(function (d) { | |
| return titles.map(function (k) { | |
| return { 'value': d[k], 'name': k}; | |
| }); | |
| }).enter() | |
| .append('td') | |
| .attr('data-th', function (d) { | |
| return d.name; | |
| }) | |
| .text(function (d) { | |
| return d.value; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
| Apache License | |
| Version 2.0, January 2004 | |
| http://www.apache.org/licenses/ | |
| TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION | |
| 1. Definitions. | |
| "License" shall mean the terms and conditions for use, reproduction, | |
| and distribution as defined by Sections 1 through 9 of this document. | |
| "Licensor" shall mean the copyright owner or entity authorized by | |
| the copyright owner that is granting the License. | |
| "Legal Entity" shall mean the union of the acting entity and all | |
| other entities that control, are controlled by, or are under common | |
| control with that entity. For the purposes of this definition, | |
| "control" means (i) the power, direct or indirect, to cause the | |
| direction or management of such entity, whether by contract or | |
| otherwise, or (ii) ownership of fifty percent (50%) or more of the | |
| outstanding shares, or (iii) beneficial ownership of such entity. | |
| "You" (or "Your") shall mean an individual or Legal Entity | |
| exercising permissions granted by this License. | |
| "Source" form shall mean the preferred form for making modifications, | |
| including but not limited to software source code, documentation | |
| source, and configuration files. | |
| "Object" form shall mean any form resulting from mechanical | |
| transformation or translation of a Source form, including but | |
| not limited to compiled object code, generated documentation, | |
| and conversions to other media types. | |
| "Work" shall mean the work of authorship, whether in Source or | |
| Object form, made available under the License, as indicated by a | |
| copyright notice that is included in or attached to the work | |
| (an example is provided in the Appendix below). | |
| "Derivative Works" shall mean any work, whether in Source or Object | |
| form, that is based on (or derived from) the Work and for which the | |
| editorial revisions, annotations, elaborations, or other modifications | |
| represent, as a whole, an original work of authorship. For the purposes | |
| of this License, Derivative Works shall not include works that remain | |
| separable from, or merely link (or bind by name) to the interfaces of, | |
| the Work and Derivative Works thereof. | |
| "Contribution" shall mean any work of authorship, including | |
| the original version of the Work and any modifications or additions | |
| to that Work or Derivative Works thereof, that is intentionally | |
| submitted to Licensor for inclusion in the Work by the copyright owner | |
| or by an individual or Legal Entity authorized to submit on behalf of | |
| the copyright owner. For the purposes of this definition, "submitted" | |
| means any form of electronic, verbal, or written communication sent | |
| to the Licensor or its representatives, including but not limited to | |
| communication on electronic mailing lists, source code control systems, | |
| and issue tracking systems that are managed by, or on behalf of, the | |
| Licensor for the purpose of discussing and improving the Work, but | |
| excluding communication that is conspicuously marked or otherwise | |
| designated in writing by the copyright owner as "Not a Contribution." | |
| "Contributor" shall mean Licensor and any individual or Legal Entity | |
| on behalf of whom a Contribution has been received by Licensor and | |
| subsequently incorporated within the Work. | |
| 2. Grant of Copyright License. Subject to the terms and conditions of | |
| this License, each Contributor hereby grants to You a perpetual, | |
| worldwide, non-exclusive, no-charge, royalty-free, irrevocable | |
| copyright license to reproduce, prepare Derivative Works of, | |
| publicly display, publicly perform, sublicense, and distribute the | |
| Work and such Derivative Works in Source or Object form. | |
| 3. Grant of Patent License. Subject to the terms and conditions of | |
| this License, each Contributor hereby grants to You a perpetual, | |
| worldwide, non-exclusive, no-charge, royalty-free, irrevocable | |
| (except as stated in this section) patent license to make, have made, | |
| use, offer to sell, sell, import, and otherwise transfer the Work, | |
| where such license applies only to those patent claims licensable | |
| by such Contributor that are necessarily infringed by their | |
| Contribution(s) alone or by combination of their Contribution(s) | |
| with the Work to which such Contribution(s) was submitted. If You | |
| institute patent litigation against any entity (including a | |
| cross-claim or counterclaim in a lawsuit) alleging that the Work | |
| or a Contribution incorporated within the Work constitutes direct | |
| or contributory patent infringement, then any patent licenses | |
| granted to You under this License for that Work shall terminate | |
| as of the date such litigation is filed. | |
| 4. Redistribution. You may reproduce and distribute copies of the | |
| Work or Derivative Works thereof in any medium, with or without | |
| modifications, and in Source or Object form, provided that You | |
| meet the following conditions: | |
| (a) You must give any other recipients of the Work or | |
| Derivative Works a copy of this License; and | |
| (b) You must cause any modified files to carry prominent notices | |
| stating that You changed the files; and | |
| (c) You must retain, in the Source form of any Derivative Works | |
| that You distribute, all copyright, patent, trademark, and | |
| attribution notices from the Source form of the Work, | |
| excluding those notices that do not pertain to any part of | |
| the Derivative Works; and | |
| (d) If the Work includes a "NOTICE" text file as part of its | |
| distribution, then any Derivative Works that You distribute must | |
| include a readable copy of the attribution notices contained | |
| within such NOTICE file, excluding those notices that do not | |
| pertain to any part of the Derivative Works, in at least one | |
| of the following places: within a NOTICE text file distributed | |
| as part of the Derivative Works; within the Source form or | |
| documentation, if provided along with the Derivative Works; or, | |
| within a display generated by the Derivative Works, if and | |
| wherever such third-party notices normally appear. The contents | |
| of the NOTICE file are for informational purposes only and | |
| do not modify the License. You may add Your own attribution | |
| notices within Derivative Works that You distribute, alongside | |
| or as an addendum to the NOTICE text from the Work, provided | |
| that such additional attribution notices cannot be construed | |
| as modifying the License. | |
| You may add Your own copyright statement to Your modifications and | |
| may provide additional or different license terms and conditions | |
| for use, reproduction, or distribution of Your modifications, or | |
| for any such Derivative Works as a whole, provided Your use, | |
| reproduction, and distribution of the Work otherwise complies with | |
| the conditions stated in this License. | |
| 5. Submission of Contributions. Unless You explicitly state otherwise, | |
| any Contribution intentionally submitted for inclusion in the Work | |
| by You to the Licensor shall be under the terms and conditions of | |
| this License, without any additional terms or conditions. | |
| Notwithstanding the above, nothing herein shall supersede or modify | |
| the terms of any separate license agreement you may have executed | |
| with Licensor regarding such Contributions. | |
| 6. Trademarks. This License does not grant permission to use the trade | |
| names, trademarks, service marks, or product names of the Licensor, | |
| except as required for reasonable and customary use in describing the | |
| origin of the Work and reproducing the content of the NOTICE file. | |
| 7. Disclaimer of Warranty. Unless required by applicable law or | |
| agreed to in writing, Licensor provides the Work (and each | |
| Contributor provides its Contributions) on an "AS IS" BASIS, | |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or | |
| implied, including, without limitation, any warranties or conditions | |
| of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A | |
| PARTICULAR PURPOSE. You are solely responsible for determining the | |
| appropriateness of using or redistributing the Work and assume any | |
| risks associated with Your exercise of permissions under this License. | |
| 8. Limitation of Liability. In no event and under no legal theory, | |
| whether in tort (including negligence), contract, or otherwise, | |
| unless required by applicable law (such as deliberate and grossly | |
| negligent acts) or agreed to in writing, shall any Contributor be | |
| liable to You for damages, including any direct, indirect, special, | |
| incidental, or consequential damages of any character arising as a | |
| result of this License or out of the use or inability to use the | |
| Work (including but not limited to damages for loss of goodwill, | |
| work stoppage, computer failure or malfunction, or any and all | |
| other commercial damages or losses), even if such Contributor | |
| has been advised of the possibility of such damages. | |
| 9. Accepting Warranty or Additional Liability. While redistributing | |
| the Work or Derivative Works thereof, You may choose to offer, | |
| and charge a fee for, acceptance of support, warranty, indemnity, | |
| or other liability obligations and/or rights consistent with this | |
| License. However, in accepting such obligations, You may act only | |
| on Your own behalf and on Your sole responsibility, not on behalf | |
| of any other Contributor, and only if You agree to indemnify, | |
| defend, and hold each Contributor harmless for any liability | |
| incurred by, or claims asserted against, such Contributor by reason | |
| of your accepting any such warranty or additional liability. | |
| END OF TERMS AND CONDITIONS | |
| APPENDIX: How to apply the Apache License to your work. | |
| To apply the Apache License to your work, attach the following | |
| boilerplate notice, with the fields enclosed by brackets "[]" | |
| replaced with your own identifying information. (Don't include | |
| the brackets!) The text should be enclosed in the appropriate | |
| comment syntax for the file format. We also recommend that a | |
| file or class name and description of purpose be included on the | |
| same "printed page" as the copyright notice for easier | |
| identification within third-party archives. | |
| Copyright [yyyy] [name of copyright owner] | |
| Licensed under the Apache License, Version 2.0 (the "License"); | |
| you may not use this file except in compliance with the License. | |
| You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, software | |
| distributed under the License is distributed on an "AS IS" BASIS, | |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| See the License for the specific language governing permissions and | |
| limitations under the License. |