<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/storkjs/data-grid/master/dist/data-grid.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/storkjs/data-grid/master/dist/simple-theme.min.css">
<script src="https://rawgit.com/storkjs/shims/master/dist/shims.min.js"></script>
<script src="https://rawgit.com/storkjs/data-grid/master/dist/data-grid.min.js"></script>
<style type="text/css">
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#parentDiv {
height: 100%;
width: 100%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#grid {
width: 600px;
height: 90%;
}
.opButtons {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 440px;
padding-bottom: 10px;
}
span.color1, span.color2, span.color3, span.color4, span.color5, span.color6 { font-weight: bold; }
span.color1 { color: #00aa00; }
span.color2 { color: #aa0000; }
span.color3 { color: #0000aa; }
span.color4 { color: #aaaa00; }
span.color5 { color: #00aaaa; }
span.color6 { color: #aa00aa; }
</style>
<script src="data.js"></script>
<script>
loadBulk(1000);
var testGrid;
var sortColumn = function sortColumn(column, state) {
return function(a, b) {
if(state === null && a.id) {
column = 'id';
state = 'ascending';
}
if (a[column] < b[column])
return (state === 'ascending' ? 1 : -1);
if (a[column] > b[column])
return (state === 'ascending' ? -1 : 1);
return 0;
}
};
document.addEventListener("DOMContentLoaded", function(e) {
document.getElementById('grid').addEventListener('grid-loaded', function(e) {
e.detail.gridObj.scrollY += 500;
}, { capture: false });
testGrid = new StorkGrid({
element: document.getElementById('grid'),
data: window.bigData,
rowHeight: 30,
headerHeight: 50,
sortable: true,
selection: {
multi: true,
type: 'row'
},
columns: [
{ field: 'id', label: 'ID', width: 70, fixed: true },
{ field: 'country', label: 'Country', width: 110, minWidth: 70 },
{ field: 'city', label: 'City', width: 115, minWidth: 75, fixed: true },
{ field: 'animal', label: 'Animal', width: 110 },
{ field: 'plant', label: 'Plant', width: 120, render: function(tdDiv, value) {
if(value.toLowerCase() === 'tulip') {
tdDiv.innerHTML = '<span class="color'+Math.floor(Math.random() * 6 + 1)+'">' + value + '</span>';
} else {
tdDiv.innerHTML = value;
}
} },
{ field: 'inanimate', label: 'Inanimate', width: 125 },
{ field: 'boy', label: 'Boy' },
{ field: 'girl', label: 'Girl' },
{ field: 'random_float', label: 'Big Num', width: 150 },
{ field: 'random_integer', label: 'Small Num', width: 150 }
],
minColumnWidth: 65,
resizableColumns: true,
trackBy: 'random_integer',
onload: function(e) { // another way to add onLoad listener
e.detail.gridObj.scrollY += 2000;
}
});
testGrid.addEventListener('select', function(e) {
console.log('select: ', e.detail);
}, false);
testGrid.addEventListener('dblselect', function(e) {
console.log('double select: ', e.detail);
}, false);
testGrid.addScrollEvent('almostHitBottom', 100); // when to emit
testGrid.addEventListener('almostHitBottom', function(e) {
var dataLength = testGrid.data.length;
loadBulk(1000);
if(testGrid.data.length > dataLength) {
testGrid.refresh();
}
}, false);
var forceRefresh = false;
var loadedDataTO;
testGrid.addScrollEvent('almostHitTop', 100, false); // when to emit
testGrid.addEventListener('almostHitTop', function(e) {
var dataLength = testGrid.data.length;
loadBulk(900, true);
if(testGrid.data.length > dataLength) {
testGrid.scrollY += 1200;
forceRefresh = true;
clearTimeout(loadedDataTO);
loadedDataTO = setTimeout(function() { forceRefresh = false; }, 500);
}
// will keep refreshing the view on each scroll up, for 500ms since last successful 'loadBulk'.
// this solves a bug when user drags the scrollbar up and the browser keeps emitting 'scrollTop=0'
if(forceRefresh) {
testGrid.refresh();
}
}, false);
testGrid.addEventListener('sort', function(e) {
testGrid.data.sort(sortColumn(e.detail.column, e.detail.state));
testGrid.refresh();
}, false);
testGrid.addEventListener('resize-column', function(e) {
console.log(e.detail);
}, false);
});
var destroyGrid = function destroyGrid() {
if(testGrid) {
testGrid.destroy();
}
};
var rearrange = function rearrange() {
if(testGrid && testGrid.grid) {
testGrid.setColumns([
{field: 'country', label: 'Country', width: 110, minWidth: 70, fixed: true},
{field: 'random_integer', label: 'Integer', width: 110, fixed: true},
{field: 'random_float', label: 'Float', width: 110},
{field: 'city', label: 'City', width: 115, minWidth: 75},
{field: 'id', label: 'ID', width: 70}
]);
}
};
</script>
</head>
<body>
<div id="parentDiv">
<div class="opButtons">
<button class="destroy-grid" onclick="destroyGrid();">Destroy grid</button>
<button class="rearrange-cols" onclick="rearrange();">Rearrange columns</button>
<button class="remove-scroll-event" onclick="removeInfiniteTopScroll();">Disable infinite top scroll</button>
</div>
<div id="grid"></div>
</div>
</body>
</html>
window.bigData = [];
window.columnNames = ['id', 'country','city','animal','plant','inanimate','boy','girl','random_float','random_integer'];
var i,
countries = ['this country takes like three lines','Israel','USA','Germany','France','Pitcairn'],
cities = ['Tel Aviv','Jerusalem','New York','London'],
animals = ['Monkey','Ape','Dog','Cat','Mouse','Rat','Pangolin'],
plants = ['Rose','Daisy','Tulip'],
inanimates = ['stone','pen','table','sand','roof','metal','can','thread','board','dust'],
boy = ['Noam','Michael'],
girl = ['Naama','Mikaela','Judy'],
allData = [],
tmp;
for(i=0; i < 10000; i++) {
tmp = {};
tmp[ window.columnNames[0] ] = (i+1);
tmp[ window.columnNames[1] ] = countries[ i % countries.length ];
tmp[ window.columnNames[2] ] = cities[ i % cities.length ];
tmp[ window.columnNames[3] ] = animals[ i % animals.length ];
tmp[ window.columnNames[4] ] = plants[ i % plants.length ];
tmp[ window.columnNames[5] ] = inanimates[ i % inanimates.length ];
tmp[ window.columnNames[6] ] = boy[ i % boy.length ];
tmp[ window.columnNames[7] ] = girl[ i % girl.length ];
tmp[ window.columnNames[8] ] = Math.ceil(Math.random() * 999999) / 100;
tmp[ window.columnNames[9] ] = Math.ceil(Math.random() * 99);
allData.push(tmp);
}
var loadBulk = (function() {
var amountFetched = 0;
return function(amount, prepend) {
amount = amount || 40;
prepend = prepend || false;
var bulkData = allData.slice(amountFetched, amountFetched + amount);
amountFetched += amount;
var i, spliceCounter=0;
for(i=0; i < bulkData.length; i++) {
if (prepend) {
window.bigData.splice(spliceCounter++, 0, bulkData[i]);
} else {
window.bigData.push(bulkData[i]);
}
}
};
})();