canvas-datagrid
Version:
Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.
30 lines (29 loc) • 1.02 kB
HTML
<html>
<head>
<script src="../dist/canvas-datagrid.debug.js"></script>
<meta name="viewport" content="width=device-width">
<style>
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.grid {
--cdg-height: 50%;
--cdg-cell-color: red;
--cdg-cell-background-color: lightyellow;
--cdg-active-cell-background-color: burlywood;
--cdg-grid-background-color: lightblue;
}
</style>
</head>
<body>
<canvas-datagrid class="grid" selectionmode="row" style="--cdg-cell-color: darkblue;">[
{"col1": "row 1 column 1", "col2": "row 1 column 2", "col3": "row 1 column 3"},
{"col1": "row 2 column 1", "col2": "row 2 column 2", "col3": "row 2 column 3"}
]</canvas-datagrid>
</body>
</html>