-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
54 lines (48 loc) · 1.89 KB
/
example.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<title>CSV Editor example | Open Innovations</title>
<link rel="icon" href="resources/oi-square-black.svg" />
<link rel="StyleSheet" href="resources/style.css" type="text/css" />
<style>
code,pre {
background: #efefef;
padding-inline: 0.25em;
}
pre {
padding: 0.5rem;
overflow: auto;
}
</style>
<script src="dist/oi.csv.js"></script>
</head>
<body class="b1-bg">
<header>
<div class="b1-bg">
<div class="holder padded" style="text-align:center;">
<a href="https://open-innovations.org/"><svg width="80" height="80" overflow="auto" viewBox="-32 -32 64 64" xmlns="http://www.w3.org/2000/svg"><mask id="oi-person"><path d="m-32-32h64v64h-12v-24a4 4 0 0 0 -4 -4h-8a4 4 0 0 0 -4 4v24h-36zm44 27m-8 0a8 8 0 1 0 16 0 8 8 0 1 0-16 0" fill="#fff"></path></mask><g id="oi-logo" fill="#1DD3A7"><circle r="32" mask="url(#oi-person)"></circle></g></svg></a>
<h1><a href="/">CSV Editor example</a></h1>
</div>
</div>
</header>
<div class="b6-bg">
<div class="holder doublepadded">
<p>This example automatically loads a separate CSV file and displays it as an editable table within the browser.</p>
<p><a href="test-data.csv" data-oi-csv data-oi-csv-collapse="Hide the editor" data-oi-csv-target="output">Edit the CSV file (43kB)</a></p>
<div id="output"></div>
</div>
</div>
<footer class="b1-bg">
<div class="holder doublepadded">
<h2>Credits</h2>
<p>© 2024-2025 Stuart Lowe, <a href="https://open-innovations.org/">Open Innovations</a> (<a href="/~https://github.com/open-innovations/oi.csv.js/">MIT licence</a>).</p>
</div>
</footer>
<script src="https://open-innovations.org/resources/oi.log.js"></script>
<script>
OI.log.setup({'id':'odileeds','target':['open-innovations.github.io']}).add('action=view');
</script>
</body>
</html>