Skip to content

Instantly share code, notes, and snippets.

@hrendoh

hrendoh/HeaderFixTable.html

Created July 11, 2016 09:55
Show Gist options
  • Save hrendoh/08790a99dd6db427c1b6d76b09955c1f to your computer and use it in GitHub Desktop.
Save hrendoh/08790a99dd6db427c1b6d76b09955c1f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HeaderFixTable.html
<head>
<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
</head>
<body>
<div id="example1" style="height: 200px; width: 300px; overflow: hidden;" data-originalstyle="height: 200px; width: 300px; overflow: hidden;" class="handsontable htRowHeaders htColumnHeaders">
<div class="ht_master handsontable" style="position: relative;">
<div style="position: relative; width: 300px; height: 200px;" class="wtHolder" id="content" >
<div class="wtHider" style="width: 350px; height: 464px;">
<div class="wtSpreader" style="position: relative; top: 0px; left: 0px;"><table class="htCore table"><colgroup><col class="rowHeader"><col style="width: 50px;"><col style="width: 50px;"><col style="width: 50px;"><col style="width: 50px;"><col style="width: 50px;"><col style="width: 50px;"></colgroup><thead><tr><th class="">
<div class="relative"><span class="colHeader cornerHeader">&nbsp;</span></div></th><th class="">
<div class="relative"><span class="colHeader">A</span></div></th><th class="">
<div class="relative"><span class="colHeader">B</span></div></th><th class="">
<div class="relative"><span class="colHeader">C</span></div></th><th class="">
<div class="relative"><span class="colHeader">D</span></div></th><th class="">
<div class="relative"><span class="colHeader">E</span></div></th><th class="">
<div class="relative"><span class="colHeader">F</span></div></th></tr></thead><tbody><tr><th class="">
<div class="relative"><span class="rowHeader">1</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr><tr><th class="">
<div class="relative"><span class="rowHeader">2</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr><tr><th class="">
<div class="relative"><span class="rowHeader">3</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr><tr><th class="">
<div class="relative"><span class="rowHeader">4</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr><tr><th class="">
<div class="relative"><span class="rowHeader">5</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr><tr><th class="">
<div class="relative"><span class="rowHeader">6</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr><tr><th class="">
<div class="relative"><span class="rowHeader">7</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr><tr><th class="">
<div class="relative"><span class="rowHeader">8</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr><tr><th class="">
<div class="relative"><span class="rowHeader">9</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr><tr><th class="">
<div class="relative"><span class="rowHeader">10</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr><tr><th class="">
<div class="relative"><span class="rowHeader">11</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr><tr><th class="">
<div class="relative"><span class="rowHeader">12</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr><tr><th class="">
<div class="relative"><span class="rowHeader">13</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr><tr><th class="">
<div class="relative"><span class="rowHeader">14</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr><tr><th class="">
<div class="relative"><span class="rowHeader">15</span></div></th><td class="">1</td><td class="">2</td><td class="">3</td><td class="">4</td><td class="">5</td><td class="">6</td></tr></tbody></table>
<div class="htBorders">
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill corner" style="background-color: red; height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none;"></div></div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area corner" style="background-color: rgb(137, 175, 249); height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none;"></div></div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current corner" style="background-color: rgb(82, 146, 247); height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none;"></div></div></div></div></div></div></div>
<div class="ht_clone_top handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden; width: 300px; height: 30px;">
<div id="ht_clone_top" style="position: relative; width: 300px; height: 60px;" class="wtHolder">
<div class="wtHider" style="width: 350px;">
<div class="wtSpreader" style="position: relative; left: 0px;"><table class="htCore"><colgroup><col class="rowHeader"><col style="width: 50px;"><col style="width: 50px;"><col style="width: 50px;"><col style="width: 50px;"><col style="width: 50px;"><col style="width: 50px;"></colgroup><thead><tr><th class="" style="height: 25px;">
<div class="relative"><span class="colHeader cornerHeader">&nbsp;</span></div></th><th class="">
<div class="relative"><span class="colHeader">A</span></div></th><th class="">
<div class="relative"><span class="colHeader">B</span></div></th><th class="">
<div class="relative"><span class="colHeader">C</span></div></th><th class="">
<div class="relative"><span class="colHeader">D</span></div></th><th class="">
<div class="relative"><span class="colHeader">E</span></div></th><th class="">
<div class="relative"><span class="colHeader">F</span></div></th></tr></thead><tbody></tbody></table>
<div class="htBorders">
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill corner" style="background-color: red; height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none;"></div></div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area corner" style="background-color: rgb(137, 175, 249); height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none;"></div></div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current corner" style="background-color: rgb(82, 146, 247); height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none;"></div></div></div></div></div></div></div>
<div class="ht_clone_left handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden; height: 200px; width: 54px;">
<div id="ht_clone_left" style="position: relative; height: 200px; width: 84px;" class="wtHolder">
<div class="wtHider" style="height: 464px;">
<div class="wtSpreader" style="position: relative; top: 0px;">
<table class="htCore">
<colgroup><col class="rowHeader"></colgroup>
<thead>
<tr>
<th class="" style="height: 25px;">
<div class="relative"><span class="colHeader cornerHeader">&nbsp;</span></div>
</th>
</tr>
</thead>
<tbody><tr><th class="">
<div class="relative"><span class="rowHeader">1</span></div></th></tr><tr><th class="">
<div class="relative"><span class="rowHeader">2</span></div></th></tr><tr><th class="">
<div class="relative"><span class="rowHeader">3</span></div></th></tr><tr><th class="">
<div class="relative"><span class="rowHeader">4</span></div></th></tr><tr><th class="">
<div class="relative"><span class="rowHeader">5</span></div></th></tr><tr><th class="">
<div class="relative"><span class="rowHeader">6</span></div></th></tr><tr><th class="">
<div class="relative"><span class="rowHeader">7</span></div></th></tr><tr><th class="">
<div class="relative"><span class="rowHeader">8</span></div></th></tr><tr><th class="">
<div class="relative"><span class="rowHeader">9</span></div></th></tr><tr><th class="">
<div class="relative"><span class="rowHeader">10</span></div></th></tr><tr><th class="">
<div class="relative"><span class="rowHeader">11</span></div></th></tr><tr><th class="">
<div class="relative"><span class="rowHeader">12</span></div></th></tr><tr><th class="">
<div class="relative"><span class="rowHeader">13</span></div></th></tr><tr><th class="">
<div class="relative"><span class="rowHeader">14</span></div></th></tr><tr><th class="">
<div class="relative"><span class="rowHeader">15</span></div></th></tr></tbody></table>
<div class="htBorders">
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill corner" style="background-color: red; height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none;"></div></div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area corner" style="background-color: rgb(137, 175, 249); height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none;"></div></div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current corner" style="background-color: rgb(82, 146, 247); height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none;"></div></div></div></div></div></div></div>
<div class="ht_clone_top_left_corner handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden; height: 30px; width: 54px;">
<div style="position: relative;" class="wtHolder">
<div class="wtHider">
<div class="wtSpreader" style="position: relative;">
<table class="htCore">
<colgroup><col class="rowHeader"></colgroup>
<thead>
<tr>
<th class="" style="height: 25px;">
<div class="relative"><span class="colHeader cornerHeader">&nbsp;</span></div>
</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="htBorders">
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill" style="background-color: red; height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder fill corner" style="background-color: red; height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none;"></div></div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area" style="background-color: rgb(137, 175, 249); height: 1px; width: 1px; display: none;"></div>
<div class="wtBorder area corner" style="background-color: rgb(137, 175, 249); height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none;"></div></div>
<div style="position: absolute; top: 0px; left: 0px;">
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current" style="background-color: rgb(82, 146, 247); height: 2px; width: 2px; display: none;"></div>
<div class="wtBorder current corner" style="background-color: rgb(82, 146, 247); height: 5px; width: 5px; border: 2px solid rgb(255, 255, 255); display: none;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
function getOnScrollFunction(oElement) {
return function (event) {
console.log("scroll", oElement, event.target.scrollTop);
if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
oElement.scrollLeft = event.target.scrollLeft;
if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
oElement.scrollTop = event.target.scrollTop;
};
}
// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction) {
removeScrollSynchronization(fromElement);
fromElement._syncScroll = getOnScrollFunction(fromElement);
fromElement._scrollSyncDirection = direction;
fromElement._syncTo = toElement;
toElement.addEventListener("scroll", fromElement._syncScroll);
}
// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement) {
if (fromElement._syncTo != null)
fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);
fromElement._syncTo = null;
fromElement._syncScroll = null;
fromElement._scrollSyncDirection = null;
}
var content = document.getElementById('content');
var ht_clone_left = document.getElementById('ht_clone_left');
var ht_clone_top = document.getElementById('ht_clone_top');
addScrollSynchronization(ht_clone_left, content, "vertical");
addScrollSynchronization(ht_clone_top, content, "horizontal");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment