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 | 1 | 2 | 3 | 4 | 5 | 6 |
2 | 1 | 2 | 3 | 4 | 5 | 6 |
3 | 1 | 2 | 3 | 4 | 5 | 6 |
4 | 1 | 2 | 3 | 4 | 5 | 6 |
5 | 1 | 2 | 3 | 4 | 5 | 6 |
6 | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 1 | 2 | 3 | 4 | 5 | 6 |
8 | 1 | 2 | 3 | 4 | 5 | 6 |
9 | 1 | 2 | 3 | 4 | 5 | 6 |
10 | 1 | 2 | 3 | 4 | 5 | 6 |
11 | 1 | 2 | 3 | 4 | 5 | 6 |
12 | 1 | 2 | 3 | 4 | 5 | 6 |
13 | 1 | 2 | 3 | 4 | 5 | 6 |
14 | 1 | 2 | 3 | 4 | 5 | 6 |
15 | 1 | 2 | 3 | 4 | 5 | 6 |
16 | 1 | 2 | 3 | 4 | 5 | 6 |
17 | 1 | 2 | 3 | 4 | 5 | 6 |
18 | 1 | 2 | 3 | 4 | 5 | 6 |
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 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
2 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
3 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
4 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
5 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
6 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
7 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
8 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
9 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
10 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
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');
}
}