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. |