tui-grid
Version:
TOAST UI Grid : Powerful data grid control supported by TOAST UI
43 lines (39 loc) • 1.35 kB
HTML
<html lang="ko">
<head>
<meta charset="utf-8">
<title>1. rendering performance</title>
<link rel="stylesheet" type="text/css" href="../dist/tui-grid.css" />
</head>
<body>
<div class="code-html">
<button id="add">add</button>
<div id="test"></div>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nhnent/tui.code-snippet/v1.3.0/dist/tui-code-snippet.js"></script>
<script type="text/javascript" src="./data/model-formatter.js"></script>
<script type="text/javascript" src="./data/data.js"></script>
<script src="../dist/tui-grid.js"></script>
<script type="text/javascript" class="code-js">
var grid = new tui.Grid({
el: $('#test'),
rowHeight: 40,
bodyHeight: 860,
columnOptions: {
minWidth: 90
},
data: [],
columns: columns,
virtualScrolling: true
});
$('#add').on('click', function() {
console.time('set data');
grid.setData(data);
console.timeEnd('set data');
});
</script>
</html>