-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathvirtual_scrolling.html
63 lines (51 loc) · 1.77 KB
/
virtual_scrolling.html
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Virtual Scrolling</title>
<link rel="stylesheet" href="demo.css">
<script src="./theme.js"></script>
</head>
<body>
<h1><a href="index.html">GridChen Index</a> / Performance Through Virtual Scrolling</h1>
<p>
gridchen only renders to the browser DOM the rows fitting into the view port.
This makes it fast.
</p>
<label>
Number of rows: <input id="rowCount" value="100"> <span style="margin-left:1em"></span>
</label>
<grid-chen style="margin-top: 1em;height: 400px"></grid-chen>
<script type="module">
import "./gridchen/webcomponent.js"
import {createView} from "./gridchen/matrixview.js"
import {createTransactionManager} from "./gridchen/utils.js";
const schema = {
title: 'Charting Demo',
type: 'object',
properties: {
index: {title: 'index', type: 'array', items: {type: 'integer', width: '50'}},
sin: {title: 'sin(t/7)', type: 'array', items: {type: 'number', width: '70'}},
cos: {title: 'cos(t/5)', type: 'array', items: {type: 'number', width: '70'}}
}
};
const rowCountElem = document.getElementById('rowCount');
const tm = createTransactionManager();
function render() {
const data = {
index: [], sin: [], cos: []
};
const rowCount = parseInt(rowCountElem.value.trim());
for (let index = 0; index < rowCount; index++) {
data.index.push(index);
data.sin.push(Math.sin(index / 7));
data.cos.push(Math.cos(index / 5));
}
document.querySelector('grid-chen')
.resetFromView(createView(schema, data), tm);
}
rowCountElem.onchange = render;
render();
</script>
</body>
</html>