scroll.js revision 2c1aecfb4cdd2e568233ee3d9f51592d7f9b501c
dafcb997e390efa4423883dafd100c975c4095d6Mark Andrews// TODO: split this into a plugin and a class extension to add the ATTRS (ala
a7038d1a0513c8e804937ebc95fc9cb3a46c04f5Mark Andrews// Plugin.addHostAttr()
59563a18b7d83c3de5bb4b57f41fb4c0f9162cd0Andreas GustafssonAdds the ability to make the table rows scrollable while preserving the header
dafcb997e390efa4423883dafd100c975c4095d6Mark AndrewsThere are two types of scrolling, horizontal (x) and vertical (y). Horizontal
dafcb997e390efa4423883dafd100c975c4095d6Mark Andrewsscrolling is achieved by wrapping the entire table in a scrollable container.
dafcb997e390efa4423883dafd100c975c4095d6Mark AndrewsVertical scrolling is achieved by splitting the table headers and data into two
dafcb997e390efa4423883dafd100c975c4095d6Mark Andrewsseparate tables, the latter of which is wrapped in a vertically scrolling
dafcb997e390efa4423883dafd100c975c4095d6Mark Andrewscontainer. In this case, column widths of header cells and data cells are kept
dafcb997e390efa4423883dafd100c975c4095d6Mark Andrewsin sync programmatically.
59563a18b7d83c3de5bb4b57f41fb4c0f9162cd0Andreas GustafssonSince the split table synchronization can be costly at runtime, the split is only done if the data in the table stretches beyond the configured `height` value.
59563a18b7d83c3de5bb4b57f41fb4c0f9162cd0Andreas GustafssonTo activate or deactivate scrolling, set the `scrollable` attribute to one of
59563a18b7d83c3de5bb4b57f41fb4c0f9162cd0Andreas Gustafssonthe following values:
59563a18b7d83c3de5bb4b57f41fb4c0f9162cd0Andreas Gustafsson * `false` - (default) Scrolling is disabled.
59563a18b7d83c3de5bb4b57f41fb4c0f9162cd0Andreas Gustafsson * `true` or 'xy' - If `height` is set, vertical scrolling will be activated, if
59563a18b7d83c3de5bb4b57f41fb4c0f9162cd0Andreas Gustafsson `width` is set, horizontal scrolling will be activated.
59563a18b7d83c3de5bb4b57f41fb4c0f9162cd0Andreas Gustafsson * 'x' - Activate horizontal scrolling only. Requires the `width` attribute is
b8cfb6c6c8d24b79d6063b358bdf9a33a4b4f3d6Andreas Gustafsson * 'y' - Activate vertical scrolling only. Requires the `height` attribute is
ca5f363de560056f1878871e8731ae5fc1c8b459Bob Halley @module @datatable-scroll
4f1b59f0b9c81f88105a7bb3fcdb9d01eb20d99dMark Andrews @class DataTable.Scrollable
b8cfb6c6c8d24b79d6063b358bdf9a33a4b4f3d6Andreas Gustafsson @for DataTable
b8cfb6c6c8d24b79d6063b358bdf9a33a4b4f3d6Andreas GustafssonY.DataTable.Scrollable = Scrollable = function () {};
b8cfb6c6c8d24b79d6063b358bdf9a33a4b4f3d6Andreas Gustafsson Activates or deactivates scrolling in the table. Acceptable values are:
9ae5c33fe47b307db08ff0c437dc6a0deed7b46aAndreas Gustafsson * `false` - (default) Scrolling is disabled.
9ae5c33fe47b307db08ff0c437dc6a0deed7b46aAndreas Gustafsson * `true` or 'xy' - If `height` is set, vertical scrolling will be activated, if
9ae5c33fe47b307db08ff0c437dc6a0deed7b46aAndreas Gustafsson `width` is set, horizontal scrolling will be activated.
9ae5c33fe47b307db08ff0c437dc6a0deed7b46aAndreas Gustafsson * 'x' - Activate horizontal scrolling only. Requires the `width` attribute is
9ae5c33fe47b307db08ff0c437dc6a0deed7b46aAndreas Gustafsson * 'y' - Activate vertical scrolling only. Requires the `height` attribute is
f9f9c47053364ba915d3ef0dbb4f55bd202487daAndreas Gustafsson @attribute scrollable
b8cfb6c6c8d24b79d6063b358bdf9a33a4b4f3d6Andreas Gustafsson @type {String|Boolean}
f9f9c47053364ba915d3ef0dbb4f55bd202487daAndreas Gustafsson Template for the `<div>` that is used to contain the rows when the table is
f9f9c47053364ba915d3ef0dbb4f55bd202487daAndreas Gustafsson vertically scrolling.
f9f9c47053364ba915d3ef0dbb4f55bd202487daAndreas Gustafsson @property SCROLLING_CONTAINER_TEMPLATE
var target;
_afterContentChange: function (e) {
this._mergeYScrollContent();
this._syncScrollUI();
_afterScrollableChange: function (e) {
this._uiSetScrollable();
this._syncScrollUI();
_afterScrollHeightChange: function (e) {
_bindScrollUI: function () {
this.after([
_calcScrollHeight: function () {
_createYScrollNode: function () {
if (!this._yScrollNode) {
_fixColumnWidths: function () {
if (cells) {
this._setColumnWidth(i,
initializer: function () {
this._setScrollProperties();
this._setScrollProperties);
_mergeYScrollContent: function () {
if (this._yScrollNode) {
this._yScrollNode = null;
this._removeHeaderScrollPadding();
this._setARIARoles();
this._uiSetColumns();
_removeHeaderScrollPadding: function () {
_setARIARoles: function () {
if (this._yScrollNode) {
_setHeaderScrollPadding: function () {
if (val === true) {
val :
_setScrollProperties: function () {
_setYScrollColWidths: function () {
if (table) {
_splitYScrollContent: function () {
if (!scrollNode) {
this._fixColumnWidths();
this._setHeaderScrollPadding();
this._createYScrollNode();
this._setARIARoles();
this._setYScrollColWidths();
_syncScrollUI: function () {
this._uiSetScrollable();
if (scrollable) {
if (overflowing) {
this._splitYScrollContent();
this._mergeYScrollContent();
this._mergeYScrollContent();
if (this._yScrollNode) {
this._mergeYScrollContent();
this._syncScrollUI();
_uiSetScrollable: function () {