add a demo, to test changes with npm run dev

packages/components/demo/HighTable.css

@@ -0,0 +1,215 @@
+.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-bottom: 2px solid #c9c9c9;
+  box-sizing: content-box;
+  color: #444;
+  height: 20px;
+  padding-top: 8px;
+  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;
+}
+
+/* sortable */
+.table.sortable thead th {
+  cursor: pointer;
+}
+.table thead th.orderby ::after {
+  position: absolute;
+  right: 8px;
+  top: 6px;
+  padding-left: 2px;
+  background-color: #eaeaeb;
+  content: "▾";
+}
+
+/* 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;
+}
+
+/* cells */
+.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;
+}
+
+/* pending cell state */
+.table td.pending {
+  position: relative;
+}
+.table td.pending::after {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  right: 8px;
+  bottom: 8px;
+  border-radius: 4px;
+  background: linear-gradient(
+    60deg,
+    rgba(0, 0, 0, 0.05) 25%,
+    rgba(0, 0, 0, 0.08) 50%,
+    rgba(0, 0, 0, 0.05) 75%
+  );
+  background-size: 120px 100%;
+  animation: textshimmer 3s infinite linear;
+}
+/* stagger row shimmering */
+.table tr:nth-child(2n) td.pending::after { animation-delay: -1s; }
+.table tr:nth-child(2n+1) td.pending::after { animation-delay: -3s; }
+.table tr:nth-child(3n) td.pending::after { animation-delay: -2s; }
+.table tr:nth-child(5n) td.pending::after { animation-delay: -4s; }
+.table tr:nth-child(7n) td.pending::after { animation-delay: -1.5s; }
+@keyframes textshimmer {
+  0% {
+    background-position: -120px 0;
+  }
+  100% {
+    background-position: 120px 0;
+  }
+}
+
+/* pending table state */
+.table th::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: #706fb1;
+  z-index: 100;
+}
+.pending .table th::before {
+  animation: shimmer 2s infinite linear;
+}
+@keyframes shimmer {
+  0%, 100% { background-color: #6fb176; }
+  50% { background-color: #adc6b0; }
+}
+
+/* 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;
+}

packages/components/demo/demo.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { App } from '../src/index.ts'
+
+const url = new URL(location.href)
+if (!url.searchParams.has('key')) {
+  location.href = 'http://localhost:5173/?key=https://huggingface.co/datasets/severo/test-parquet/resolve/main/parquet/csv-train-00000-of-00001.parquet'
+}
+
+const app = document.getElementById('app')
+if (!app) throw new Error('missing app element')
+
+const root = ReactDOM.createRoot(app)
+root.render(React.createElement(App, { apiBaseUrl: location.origin }))

packages/components/demo/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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"/>
+    <meta name="description" content="demo for the Hyparam components" />
+    <meta name="theme-color" content="#6b00ff">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./demo.tsx"></script>
+  </body>
+</html>