folk-canvas/demo/html-spreadsheet.html

131 lines
5.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spreadsheet</title>
<style>
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
margin: 0;
}
</style>
</head>
<body>
<folk-shape x="50" y="50" width="500">
<folk-spreadsheet>
<folk-cell row="1" column="A" expression="1"></folk-cell>
<folk-cell row="1" column="B"></folk-cell>
<folk-cell row="1" column="C"></folk-cell>
<folk-cell row="1" column="D"></folk-cell>
<folk-cell row="1" column="E"></folk-cell>
<folk-cell row="1" column="F"></folk-cell>
<folk-cell row="1" column="G"></folk-cell>
<folk-cell row="1" column="H"></folk-cell>
<folk-cell row="1" column="I"></folk-cell>
<folk-cell row="1" column="J"></folk-cell>
<folk-cell row="2" column="A" expression="$A1 * 2"></folk-cell>
<folk-cell row="2" column="B"></folk-cell>
<folk-cell row="2" column="C"></folk-cell>
<folk-cell row="2" column="D"></folk-cell>
<folk-cell row="2" column="E"></folk-cell>
<folk-cell row="2" column="F"></folk-cell>
<folk-cell row="2" column="G"></folk-cell>
<folk-cell row="2" column="H"></folk-cell>
<folk-cell row="2" column="I"></folk-cell>
<folk-cell row="2" column="J"></folk-cell>
<folk-cell row="3" column="A"></folk-cell>
<folk-cell row="3" column="B"></folk-cell>
<folk-cell row="3" column="C"></folk-cell>
<folk-cell row="3" column="D"></folk-cell>
<folk-cell row="3" column="E"></folk-cell>
<folk-cell row="3" column="F"></folk-cell>
<folk-cell row="3" column="G"></folk-cell>
<folk-cell row="3" column="H"></folk-cell>
<folk-cell row="3" column="I"></folk-cell>
<folk-cell row="3" column="J"></folk-cell>
<folk-cell row="4" column="A"></folk-cell>
<folk-cell row="4" column="B"></folk-cell>
<folk-cell row="4" column="C"></folk-cell>
<folk-cell row="4" column="D"></folk-cell>
<folk-cell row="4" column="E"></folk-cell>
<folk-cell row="4" column="F"></folk-cell>
<folk-cell row="4" column="G"></folk-cell>
<folk-cell row="4" column="H"></folk-cell>
<folk-cell row="4" column="I"></folk-cell>
<folk-cell row="4" column="J"></folk-cell>
<folk-cell row="5" column="A"></folk-cell>
<folk-cell row="5" column="B"></folk-cell>
<folk-cell row="5" column="C"></folk-cell>
<folk-cell row="5" column="D"></folk-cell>
<folk-cell row="5" column="E"></folk-cell>
<folk-cell row="5" column="F"></folk-cell>
<folk-cell row="5" column="G"></folk-cell>
<folk-cell row="5" column="H"></folk-cell>
<folk-cell row="5" column="I"></folk-cell>
<folk-cell row="5" column="J"></folk-cell>
<folk-cell row="6" column="A"></folk-cell>
<folk-cell row="6" column="B"></folk-cell>
<folk-cell row="6" column="C"></folk-cell>
<folk-cell row="6" column="D"></folk-cell>
<folk-cell row="6" column="E"></folk-cell>
<folk-cell row="6" column="F"></folk-cell>
<folk-cell row="6" column="G"></folk-cell>
<folk-cell row="6" column="H"></folk-cell>
<folk-cell row="6" column="I"></folk-cell>
<folk-cell row="6" column="J"></folk-cell>
<folk-cell row="7" column="A"></folk-cell>
<folk-cell row="7" column="B"></folk-cell>
<folk-cell row="7" column="C"></folk-cell>
<folk-cell row="7" column="D"></folk-cell>
<folk-cell row="7" column="E"></folk-cell>
<folk-cell row="7" column="F"></folk-cell>
<folk-cell row="7" column="G"></folk-cell>
<folk-cell row="7" column="H"></folk-cell>
<folk-cell row="7" column="I"></folk-cell>
<folk-cell row="7" column="J"></folk-cell>
<folk-cell row="8" column="A"></folk-cell>
<folk-cell row="8" column="B"></folk-cell>
<folk-cell row="8" column="C"></folk-cell>
<folk-cell row="8" column="D"></folk-cell>
<folk-cell row="8" column="E"></folk-cell>
<folk-cell row="8" column="F"></folk-cell>
<folk-cell row="8" column="G"></folk-cell>
<folk-cell row="8" column="H"></folk-cell>
<folk-cell row="8" column="I"></folk-cell>
<folk-cell row="8" column="J"></folk-cell>
<folk-cell row="9" column="A"></folk-cell>
<folk-cell row="9" column="B"></folk-cell>
<folk-cell row="9" column="C"></folk-cell>
<folk-cell row="9" column="D"></folk-cell>
<folk-cell row="9" column="E"></folk-cell>
<folk-cell row="9" column="F"></folk-cell>
<folk-cell row="9" column="G"></folk-cell>
<folk-cell row="9" column="H"></folk-cell>
<folk-cell row="9" column="I"></folk-cell>
<folk-cell row="9" column="J"></folk-cell>
<folk-cell row="10" column="A"></folk-cell>
<folk-cell row="10" column="B"></folk-cell>
<folk-cell row="10" column="C"></folk-cell>
<folk-cell row="10" column="D"></folk-cell>
<folk-cell row="10" column="E"></folk-cell>
<folk-cell row="10" column="F"></folk-cell>
<folk-cell row="10" column="G"></folk-cell>
<folk-cell row="10" column="H"></folk-cell>
<folk-cell row="10" column="I"></folk-cell>
<folk-cell row="10" column="J"></folk-cell>
</folk-spreadsheet>
</folk-shape>
<script type="module">
import '../lib/standalone/folk-shape.ts';
import '../lib/standalone/folk-spreadsheet.ts';
</script>
</body>
</html>