Skip to content

Commit 874cb94

Browse files
righrigh
committed
feat: demo.html
1 parent 4c891b6 commit 874cb94

8 files changed

Lines changed: 158 additions & 3 deletions

File tree

‎demo.html‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>GridSheet Preact Demo</title>
7+
<style>
8+
body {
9+
margin: 0;
10+
padding: 24px;
11+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
12+
background: #1a1a2e;
13+
color: #eee;
14+
}
15+
h1 { margin: 0 0 16px; font-size: 1.4rem; }
16+
.sheet-section { margin-bottom: 24px; }
17+
.sheet-section h2 { font-size: 1rem; margin: 0 0 8px; color: #aaa; }
18+
</style>
19+
</head>
20+
<body>
21+
<div id="app"></div>
22+
23+
<script type="module">
24+
import { h, render } from "https://cdn.jsdelivr.net/npm/preact@10.29.0/+esm";
25+
import htm from "https://cdn.jsdelivr.net/npm/htm@3/+esm";
26+
import { GridSheet, useBook } from "https://cdn.jsdelivr.net/npm/@gridsheet/preact-core@3.0.1/+esm";
27+
import { allFunctions } from "https://cdn.jsdelivr.net/npm/@gridsheet/functions@3.0.1/+esm";
28+
29+
const html = htm.bind(h);
30+
31+
function App() {
32+
const book = useBook({ additionalFunctions: allFunctions });
33+
34+
return html`
35+
<div>
36+
<h1>GridSheet Demo</h1>
37+
<p style="margin: 0 0 16px; color: #888; font-size: 0.85rem;">
38+
A fully functional spreadsheet in a single HTML file — no build tools required.
39+
Just load <code>@gridsheet/preact-core</code> and <code>@gridsheet/functions</code> from CDN via ESM imports.
40+
</p>
41+
42+
<div class="sheet-section">
43+
<h2>Sheet1 — Basic Operations & Formulas</h2>
44+
<${GridSheet}
45+
book=${book}
46+
sheetName="Sheet1"
47+
initialCells=${{
48+
A0: { label: "Name" },
49+
B0: { label: "Score" },
50+
C0: { label: "Grade" },
51+
A1: { value: "Alice" },
52+
B1: { value: 92 },
53+
C1: { value: '=IF(B1>=90,"A",IF(B1>=80,"B","C"))' },
54+
A2: { value: "Bob" },
55+
B2: { value: 75 },
56+
C2: { value: '=IF(B2>=90,"A",IF(B2>=80,"B","C"))' },
57+
A3: { value: "Carol" },
58+
B3: { value: 88 },
59+
C3: { value: '=IF(B3>=90,"A",IF(B3>=80,"B","C"))' },
60+
"06": { sortFixed: true },
61+
"07": { sortFixed: true },
62+
"08": { sortFixed: true },
63+
"09": { sortFixed: true },
64+
A6: { value: "AVG", style: { fontWeight: "bold", backgroundColor: "#2a2a4a" } },
65+
B6: { value: "=AVERAGE(B1:B3)", style: { backgroundColor: "#2a2a4a" } },
66+
C6: { value: "", style: { backgroundColor: "#2a2a4a" } },
67+
A7: { value: "SUM", style: { fontWeight: "bold", backgroundColor: "#2a2a4a" } },
68+
B7: { value: "=SUM(B1:B3)", style: { backgroundColor: "#2a2a4a" } },
69+
C7: { value: "", style: { backgroundColor: "#2a2a4a" } },
70+
A8: { value: "MAX", style: { fontWeight: "bold", backgroundColor: "#2a2a4a" } },
71+
B8: { value: "=MAX(B1:B3)", style: { backgroundColor: "#2a2a4a" } },
72+
C8: { value: "", style: { backgroundColor: "#2a2a4a" } },
73+
A9: { value: "MIN", style: { fontWeight: "bold", backgroundColor: "#2a2a4a" } },
74+
B9: { value: "=MIN(B1:B3)", style: { backgroundColor: "#2a2a4a" } },
75+
C9: { value: "", style: { backgroundColor: "#2a2a4a" } },
76+
}}
77+
options=${{
78+
mode: "dark",
79+
sheetHeight: 300,
80+
}}
81+
/>
82+
</div>
83+
84+
<div class="sheet-section">
85+
<h2>Sheet2 — Cross-sheet References</h2>
86+
<${GridSheet}
87+
book=${book}
88+
sheetName="Sheet2"
89+
initialCells=${{
90+
A1: { value: "SUM from Sheet1", style: { fontWeight: "bold" } },
91+
A2: { value: "=Sheet1!B7" },
92+
B1: { value: "TODAY()", style: { fontWeight: "bold" } },
93+
B2: { value: "=TODAY()" },
94+
}}
95+
options=${{
96+
mode: "dark",
97+
sheetHeight: 200,
98+
}}
99+
/>
100+
</div>
101+
</div>
102+
`;
103+
}
104+
105+
render(html`<${App} />`, document.getElementById("app"));
106+
</script>
107+
</body>
108+
</html>

‎packages/core/package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,11 @@
2424
"keywords": [
2525
"spreadsheet",
2626
"spread-sheet",
27-
"excel"
27+
"excel",
28+
"gridsheet",
29+
"formula",
30+
"cell",
31+
"grid"
2832
],
2933
"author": "righ",
3034
"license": "Apache-2.0",

‎packages/functions/package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,11 @@
5454
"keywords": [
5555
"spreadsheet",
5656
"formula",
57-
"functions"
57+
"functions",
58+
"gridsheet",
59+
"excel",
60+
"math",
61+
"statistics"
5862
],
5963
"author": "righ",
6064
"license": "Apache-2.0",

‎packages/preact-core/package.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,15 @@
5050
"files": [
5151
"dist"
5252
],
53+
"keywords": [
54+
"spreadsheet",
55+
"spread-sheet",
56+
"excel",
57+
"gridsheet",
58+
"preact",
59+
"formula",
60+
"grid"
61+
],
5362
"author": "righ",
5463
"license": "Apache-2.0"
5564
}

‎packages/react-core/package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,11 @@
3434
"keywords": [
3535
"spreadsheet",
3636
"spread-sheet",
37-
"excel"
37+
"excel",
38+
"gridsheet",
39+
"react",
40+
"formula",
41+
"grid"
3842
],
3943
"author": "righ",
4044
"license": "Apache-2.0",

‎packages/react-dev/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@
1616
"build": "rm -rf ./dist || true && vite build",
1717
"typecheck": "pnpm tsc --noEmit"
1818
},
19+
"keywords": [
20+
"spreadsheet",
21+
"gridsheet",
22+
"react",
23+
"devtools"
24+
],
1925
"author": "righ",
2026
"license": "Apache-2.0",
2127
"files": [

‎packages/svelte-core/package.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,16 @@
4444
"vite": "^6.3.5",
4545
"vite-plugin-dts": "^4.5.3"
4646
},
47+
"keywords": [
48+
"spreadsheet",
49+
"spread-sheet",
50+
"excel",
51+
"gridsheet",
52+
"svelte",
53+
"svelte5",
54+
"formula",
55+
"grid"
56+
],
4757
"author": "righ",
4858
"license": "Apache-2.0"
4959
}

‎packages/vue-core/package.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,16 @@
4242
"vite": "^6.3.5",
4343
"vite-plugin-dts": "^4.5.3"
4444
},
45+
"keywords": [
46+
"spreadsheet",
47+
"spread-sheet",
48+
"excel",
49+
"gridsheet",
50+
"vue",
51+
"vue3",
52+
"formula",
53+
"grid"
54+
],
4555
"author": "righ",
4656
"license": "Apache-2.0"
4757
}

0 commit comments

Comments
 (0)