upgrade hightable to 0.13.0 + adapt style. Note that more is needed (orderBy in particular)

Author: severo

package.json

@@ -47,7 +47,7 @@
     "watch:url": "NODE_ENV=development nodemon bin/cli.js https://hyperparam.blob.core.windows.net/hyperparam/starcoderdata-js-00000-of-00065.parquet"
   },
   "dependencies": {
-    "hightable": "0.12.1",
+    "hightable": "0.13.0",
     "hyparquet": "1.9.1",
     "hyparquet-compressors": "1.0.0",
     "icebird": "0.1.8",

src/app.tsx

@@ -1,4 +1,3 @@
-import 'hightable/src/HighTable.css'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './components/App.js'

src/components/viewers/ParquetView.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { RoutesConfig, appendSearchParams } from '../../lib/routes.js'
 import { FileSource } from '../../lib/sources/types.js'
 import { parquetDataFrame } from '../../lib/tableProvider.js'
+import classes from '../../styles/ParquetView.module.css'
 import { Spinner } from '../Layout.js'
 import CellPanel from './CellPanel.js'
 import ContentHeader, { ContentSize } from './ContentHeader.js'
@@ -100,7 +101,9 @@ export default function ParquetView({ source, setProgress, setError, config }: V
       data={content.dataframe}
       onDoubleClickCell={onDoubleClickCell}
       onMouseDownCell={onMouseDownCell}
-      onError={setError} />}
+      onError={setError}
+      className={classes.hightable}
+    />}
 
     {isLoading && <div className='center'><Spinner /></div>}
   </ContentHeader>

src/styles/ParquetView.module.css

@@ -0,0 +1,17 @@
+/* table overrides */
+.hightable {
+  /* table corner */
+  thead td:first-child {
+    background: url("https://hyperparam.app/assets/table/hyperparam.svg")
+      #f9f4ff no-repeat center 6px;
+  }
+  /* cells */
+  tbody td {
+    cursor: pointer;
+  }
+  /* row numbers */
+  tbody tr:hover [role="rowheader"] {
+    background-color: #ccd;
+    border-right: 1px solid #ccc;
+  }
+}

src/styles/app.css

@@ -56,21 +56,6 @@ li {
   height: 100vh;
 }
 
-/* table overrides */
-.table-container .table-corner {
-  background: url('https://hyperparam.app/assets/table/hyperparam.svg') #f9f4ff no-repeat center 6px;
-}
-main .table-container .table th {
-  background-color: #f1f1f3;
-}
-main .table td {
-  cursor: pointer;
-}
-main .table tbody tr:hover th:first-child {
-  background-color: #ccd;
-  border-right: 1px solid #ccc;
-}
-
 /* brand logo */
 .brand {
   align-items: center;