Skip to content

Instantly share code, notes, and snippets.

@sebastianrothbucher

sebastianrothbucher/about.md

Last active April 10, 2018 18:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sebastianrothbucher/97444a9cae32e6fca8ef576f22cf4ec7 to your computer and use it in GitHub Desktop.
Save sebastianrothbucher/97444a9cae32e6fca8ef576f22cf4ec7 to your computer and use it in GitHub Desktop.
Download ZIP
IE11-compliant version of scrollable table
Raw
about.md
Raw
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script language="JavaScript" src="script.es5.js"></script>
</head>
<body>
<div style="display: inline-block; ">
<div>
<table id="tabhead" border>
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="tabscroll" style="max-height: 200px; overflow-y: scroll; ">
<table id="tabfull" border>
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
Raw
script.es5.js
"use strict";
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
window.onload = function () {
// next attempt to the age-old problem (other ideas c here: https://stackoverflow.com/questions/14834198/table-scroll-with-html-and-css)
// first of all, build a REALISTIC table w/ different-length headers and contents
var heads = ["text", "num", "short number" /*long head*/];
// just dice some contents
var alpha = [].concat(Object.keys(_toConsumableArray(Array(26)))).map(function (n, i) {
return String.fromCharCode(i + 65);
});
var content = [].concat(_toConsumableArray(Array(500))).map(function (i) {
return {
text: [].concat(_toConsumableArray(Array(Math.round(Math.random() * 50 + 20)))).map(function (i) {
return alpha[Math.round(Math.random() * 26)];
}).join(""),
num: Math.round(Math.random() * Math.pow(10, Math.round(Math.random() * 10 + 5))),
shortNum: Math.round(Math.random() * 2000) / 10
};
});
d3.select("#tabhead").select('thead').append('tr').selectAll('th').data(heads).enter().append('th').text(function (n) {
return n;
});
d3.select("#tabfull").select('thead').append('tr').selectAll('th').data(heads).enter().append('th').text(function (n) {
return n;
});
d3.select("#tabfull").select('tbody').selectAll('tr').data(content).enter().append('tr').each(function (n, i, nd) {
d3.select(nd[i]).selectAll('td').data(Object.keys(n)).enter().append('td').text(function (k) {
return n[k];
});
});
var reArrange = function () {
// pass one cycle
d3.select('#tabfull').style('margin-top', -1 * d3.select('#tabscroll').select('thead').node().getBoundingClientRect().height + 'px').select('thead').style('visibility', 'hidden');
var widths = []; // really rely on COMPUTED values
d3.select('#tabfull').select('thead').selectAll('th').each(function (n, i, nd) {
return widths.push(nd[i].clientWidth);
});
d3.select('#tabhead').select('thead').selectAll('th').each(function (n, i, nd) {
return d3.select(nd[i]).style('padding-right', 0).style('padding-left', 0).style('width', widths[i] + 'px');
});
};
var oldOnResize = window.onresize;
window.onresize = function() { // really function, we need arguments
reArrange();
if(oldOnResize) {
return oldOnResize.apply(window, arguments);
}
};
setTimeout(reArrange);
};
Raw
style.css
body, th, td {
font-family: sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment