Twitter Bootstrap integration

This page demonstrate example of using Handsontable with Twitter Bootstrap.

Please note that you should reset some of Bootstrap styles. You can use file plugins/bootstrap/handsontable.bootstrap.css for that purpose.

 
A
B
C
D
E
F
1
123456
2
123456
3
123456
4
123456
5
123456
6
123456
7
123456
8
123456
9
123456
10
123456
11
123456
12
123456
13
123456
14
123456
15
123456
16
123456
17
123456
18
123456
19
 
A
B
C
D
E
F
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 

var data = [
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6],
    [1, 2, 3, 4, 5, 6]
  ],
  container = document.getElementById('example1'),
  options = document.querySelectorAll('.options input'),
  table,
  hot;

hot = new Handsontable(container, {
  data: data,
  colHeaders: true,
  rowHeaders: true,
  minSpareRows: 1
});
table = document.querySelector('table');

Handsontable.Dom.addClass(table, 'table');

for (var i = 0, len = options.length; i < len; i++) {
  Handsontable.Dom.addEvent(options[i], 'click', function () {
    if (this.checked) {
      Handsontable.Dom.addClass(table, this.getAttribute('data-type'))
    }
    else {
      Handsontable.Dom.removeClass(table, this.getAttribute('data-type'))
    }
  });
}
 
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
AA
AB
AC
AD
AE
AF
AG
AH
AI
1
1234567891011121314151617181920212223242526272829303132333435
2
1234567891011121314151617181920212223242526272829303132333435
3
1234567891011121314151617181920212223242526272829303132333435
4
1234567891011121314151617181920212223242526272829303132333435
5
1234567891011121314151617181920212223242526272829303132333435
6
1234567891011121314151617181920212223242526272829303132333435
7
1234567891011121314151617181920212223242526272829303132333435
8
1234567891011121314151617181920212223242526272829303132333435
9
1234567891011121314151617181920212223242526272829303132333435
10
1234567891011121314151617181920212223242526272829303132333435
 
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
AA
AB
AC
AD
AE
AF
AG
AH
AI
1
1234567891011121314151617181920212223242526272829303132333435
2
1234567891011121314151617181920212223242526272829303132333435
3
1234567891011121314151617181920212223242526272829303132333435
 
A
B
C
1
123
2
123
3
123
4
123
5
123
6
123
7
123
8
123
9
123
10
123
 
A
B
C
1
123
2
123
3
123

var cols = 100,
  rows = 10,
  i, j, len,
  data2 = [];

for (i = 0; i < rows; i++) {
  data2[i] = [];
  for (j = 0; j < cols; j++) {
    data2[i].push(j + 1);
  }
}

var container2 = document.getElementById('example2'),
  table2,
  hot2;

hot2 = new Handsontable(container2, {
  data: data2,
  colHeaders: true,
  rowHeaders: true,
  fixedColumnsLeft: 3,
  fixedRowsTop: 3,
  contextMenu: true
});

var ex = document.getElementById('example2');
table2 = ex.querySelectorAll('table');

function findAncestor(el, cls) {
  while ((el = el.parentElement) && !el.classList.contains(cls)){
    return el;
  }

}

for (i = 0, len = table2.length; i < len; i++) {
  var tableInstance = table2[i];
  var isMaster = !!findAncestor(tableInstance, 'ht_master');
  Handsontable.Dom.addClass(tableInstance, 'table');
  Handsontable.Dom.addClass(tableInstance, 'table-hover');
  Handsontable.Dom.addClass(tableInstance, 'table-striped');
  if (isMaster) {
    Handsontable.Dom.addClass(tableInstance, 'table-bordered');
  }
}
Handsontable © 2012-2025 Nextgen. Contact us at hello@handsontable.com.
Code and documentation licensed under the The MIT License.