Load react and hightable

hyparam · Jun 6, 2024 · 8841b24 · 8841b24
1 parent 9cb41cf
commit 8841b24
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -20,10 +20,15 @@
     "@rollup/plugin-replace": "5.0.7",
     "@rollup/plugin-terser": "0.4.4",
     "@types/node": "20.14.2",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "7.11.0",
     "eslint": "8.57.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsdoc": "48.2.7",
+    "hightable": "0.2.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "rollup": "4.18.0",
     "typescript": "5.4.5",
     "vitest": "1.6.0"

diff --git a/public/HighTable.css b/public/HighTable.css
@@ -0,0 +1,147 @@
+.table-container {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+.table-container * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.table-scroll {
+  flex: 1;
+  overflow: auto;
+}
+.table-scroll > div {
+  position: relative;
+}
+.table-scroll .table {
+  position: absolute;
+}
+
+.table {
+  border-collapse: separate;
+  border-spacing: 0;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  max-width: 100%;
+  overflow-x: auto;
+}
+.table:focus-visible {
+  outline: none;
+}
+
+/* header */
+.table thead th {
+  background-color: #eaeaeb;
+  border: none;
+  border-top: 4px solid #706fb1;
+  border-bottom: 2px solid #c9c9c9;
+  box-sizing: content-box;
+  color: #444;
+  height: 20px;
+  position: sticky;
+  top: -1px; /* fix 1px gap above thead */
+  user-select: none;
+  z-index: 10;
+}
+.table thead th:first-child {
+  border: none;
+}
+.table thead th:first-child span {
+  cursor: default;
+  width: 0;
+}
+
+.table tbody tr:first-child td {
+  border-top: 1px solid transparent;
+}
+
+/* column resize */
+.table thead span {
+  position: absolute;
+  border-right: 1px solid #ddd;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  transition: background-color 0.2s ease;
+}
+.table thead span:hover {
+  background-color: #aab;
+}
+
+/* row numbers */
+.table td:first-child {
+  background-color: #eaeaeb;
+  border-right: 1px solid #ddd;
+  color: #888;
+  font-size: 10px;
+  padding: 0 2px;
+  position: sticky;
+  left: 0;
+  text-align: center;
+  user-select: none;
+  min-width: 32px;
+  max-width: none;
+  width: 32px;
+}
+
+.table th,
+.table td {
+  border-bottom: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  height: 32px;
+  max-width: 2000px; /* prevent columns expanding */
+  padding: 4px 12px;
+  text-align: left;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* don't hover on mobile */
+@media (hover: hover) {
+  .table tbody tr:hover {
+    background-color: #dbdbe5;
+  }
+  .table tbody tr:hover td {
+    border-right-color: #bbb;
+  }
+  .table tbody tr:hover td:first-child {
+    background-color: #ccd;
+  }
+}
+
+/* row error */
+.table tr[title] {
+  color: #a11;
+}
+
+/* table corner */
+.table-corner {
+  background-color: #e4e4e6;
+  border-right: 1px solid #ccc;
+  position: absolute;
+  height: 33px;
+  width: 32px;
+  top: 0;
+  left: 0;
+  z-index: 15;
+  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
+}
+/* mock row numbers */
+.mock-row-label {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background: #eaeaeb;
+  z-index: -10;
+}
diff --git a/public/bundle.min.js b/public/bundle.min.js
diff --git a/public/bundle.min.js.map b/public/bundle.min.js.map
diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>hyperparam</title>
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="HighTable.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;600&display=swap"/>
   </head>
   <body>

diff --git a/src/render.js b/src/render.js
@@ -1,9 +1,34 @@
+import HighTable from 'hightable'
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const header = ['ID', 'Name', 'Age', 'UUID', 'JSON']
+const data = {
+  header,
+  numRows: 10000,
+  /**
+   * @param {number} start
+   * @param {number} end
+   * @returns {Promise<any[][]>}
+   */
+  async rows(start, end) {
+    const arr = []
+    for (let i = start; i < end; i++) {
+      const uuid = Math.random().toString(16).substring(2)
+      const row = [i + 1, 'Name' + i, 20 + i, uuid]
+      const object = Object.fromEntries(header.map((key, index) => [key, row[index]]))
+      arr.push([...row, object])
+    }
+    return arr
+  },
+}
+
 function render() {
   const app = document.getElementById('app')
   if (!app) throw new Error('missing app element')
-  app.innerHTML = `
-    <h1>Hello, World!</h1>
-    <p>Current time: ${new Date()}</p>
-  `
+
+  // @ts-expect-error TODO: fix react createRoot type
+  const root = ReactDOM.createRoot(app)
+  root.render(React.createElement(HighTable, { data }))
 }
 render()
diff --git a/src/serve.js b/src/serve.js
@@ -148,12 +148,13 @@ function gzip(req, content) {
 
 /**
  * @param {string} url
+ * @returns {void}
  */
 function openUrl(url) {
   switch (process.platform) {
-    case 'darwin': return exec(`open ${url}`)
-    case 'win32': return exec(`start ${url}`)
-    case 'linux': return exec(`xdg-open ${url}`)
-    default: throw new Error(`unsupported platform ${process.platform}`)
+  case 'darwin': exec(`open ${url}`); return
+  case 'win32': exec(`start ${url}`); return
+  case 'linux': exec(`xdg-open ${url}`); return
+  default: throw new Error(`unsupported platform ${process.platform}`)
   }
 }