demo: sortable hightable! ↕️

demo/App.tsx

@@ -1,8 +1,8 @@
-import HighTable, { DataFrame } from 'hightable'
+import HighTable, { DataFrame, sortableDataFrame } from 'hightable'
 import { compressors } from 'hyparquet-compressors'
 import React, { useState } from 'react'
-import { FileMetaData, parquetMetadata, parquetMetadataAsync, parquetSchema } from '../src/metadata.js'
-import { parquetRead } from '../src/read.js'
+import { parquetReadObjects } from '../src/hyparquet.js'
+import { FileMetaData, parquetMetadataAsync, parquetSchema } from '../src/metadata.js'
 import type { AsyncBuffer } from '../src/types.js'
 import { asyncBufferFromUrl } from '../src/utils.js'
 import Dropdown from './Dropdown.js'
@@ -27,21 +27,21 @@ export default function App() {
   const [byteLength, setByteLength] = useState<number>()
 
   async function onFileDrop(file: File) {
-    const arrayBuffer = await file.arrayBuffer()
-    const metadata = parquetMetadata(arrayBuffer)
-    setMetadata(metadata)
-    setName(file.name)
-    setByteLength(file.size)
-    setDf(parquetDataFrame(arrayBuffer, metadata))
-    document.getElementById('welcome')?.remove()
+    setAsyncBuffer(file.name, await file.arrayBuffer())
   }
   async function onUrlDrop(url: string) {
-    const asyncBuffer = await asyncBufferFromUrl(url)
+    setAsyncBuffer(url, await asyncBufferFromUrl(url))
+  }
+  async function setAsyncBuffer(name: string, asyncBuffer: AsyncBuffer) {
     const metadata = await parquetMetadataAsync(asyncBuffer)
     setMetadata(metadata)
-    setName(url)
+    setName(name)
     setByteLength(asyncBuffer.byteLength)
-    setDf(parquetDataFrame(asyncBuffer, metadata))
+    let df = parquetDataFrame(asyncBuffer, metadata)
+    if (df.numRows <= 10000) {
+      df = sortableDataFrame(df)
+    }
+    setDf(df)
     document.getElementById('welcome')?.remove()
   }
 
@@ -88,10 +88,7 @@ function parquetDataFrame(file: AsyncBuffer, metadata: FileMetaData): DataFrame
      */
     rows(rowStart, rowEnd) {
       console.log(`reading rows ${rowStart}-${rowEnd}`)
-      return new Promise((resolve, reject) => {
-        parquetRead({ file, compressors, rowStart, rowEnd, onComplete: resolve })
-          .catch(reject)
-      })
+      return parquetReadObjects({ file, compressors, rowStart, rowEnd })
     },
   }
 }

demo/demo.css

@@ -314,22 +314,49 @@ table {
 table:focus-visible {
   outline: none;
 }
-th {
-  background-color: #f8f8f8;
-  border: 1px solid #ddd;
-  padding: 8px;
-  text-align: left;
+
+/* 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;
+  padding-top: 4px;
   position: sticky;
   top: -1px; /* fix 1px gap above thead */
   user-select: none;
+  z-index: 10;
 }
-th, td {
+.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: 4px;
+  padding-left: 2px;
+  background-color: #eaeaeb;
+  content: "▾";
+}
+
+/* cells */
+.table th,
+.table td {
   border-bottom: 1px solid #ddd;
   border-right: 1px solid #ddd;
   height: 32px;
@@ -377,7 +404,7 @@ td:first-child {
   background-color: #e4e4e6;
   border-right: 1px solid #ccc;
   position: absolute;
-  height: 44px;
+  height: 34px;
   width: 32px;
   top: 0;
   left: 0;

package.json

@@ -32,21 +32,21 @@
     "@rollup/plugin-replace": "5.0.7",
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "11.1.6",
-    "@types/node": "22.5.4",
+    "@types/node": "22.5.5",
     "@types/react": "18.3.5",
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "8.5.0",
-    "@vitest/coverage-v8": "2.1.0",
+    "@vitest/coverage-v8": "2.1.1",
     "eslint": "8.57.0",
     "eslint-plugin-import": "2.30.0",
-    "eslint-plugin-jsdoc": "50.2.2",
-    "hightable": "0.2.3",
+    "eslint-plugin-jsdoc": "50.2.3",
+    "hightable": "0.4.0",
     "http-server": "14.1.1",
     "hyparquet-compressors": "0.1.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rollup": "4.21.3",
     "typescript": "5.6.2",
-    "vitest": "2.1.0"
+    "vitest": "2.1.1"
   }
 }