diff --git a/apps/hightable-demo/package.json b/apps/hightable-demo/package.json
index a4294e3..9d05bf7 100644
--- a/apps/hightable-demo/package.json
+++ b/apps/hightable-demo/package.json
@@ -14,7 +14,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "hightable": "0.8.1",
+    "hightable": "0.9.0",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   }
diff --git a/apps/hightable-demo/src/HighTable.css b/apps/hightable-demo/src/HighTable.css
deleted file mode 100644
index fe02831..0000000
--- a/apps/hightable-demo/src/HighTable.css
+++ /dev/null
@@ -1,216 +0,0 @@
-.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: 8px;
-  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);
-  background: url('https://hyperparam.app/assets/table/hightable.svg') #e4e4e6 no-repeat center 6px;
-}
-/* mock row numbers */
-.mock-row-label {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  background: #eaeaeb;
-  z-index: -10;
-}
diff --git a/apps/hightable-demo/src/index.css b/apps/hightable-demo/src/index.css
index 1353df2..ba9c82e 100644
--- a/apps/hightable-demo/src/index.css
+++ b/apps/hightable-demo/src/index.css
@@ -50,3 +50,7 @@ nav {
   display: flex;
   flex: 1;
 }
+
+.table-corner {
+  background: url('https://hyperparam.app/assets/table/hightable.svg') #e4e4e6 no-repeat center 6px;
+}
\ No newline at end of file
diff --git a/apps/hightable-demo/src/main.tsx b/apps/hightable-demo/src/main.tsx
index e90e4d7..b0a5f95 100644
--- a/apps/hightable-demo/src/main.tsx
+++ b/apps/hightable-demo/src/main.tsx
@@ -1,8 +1,8 @@
 import { HighTable } from 'hightable'
+import 'hightable/src/HighTable.css'
 import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 import { data } from './data'
-import './HighTable.css'
 import './index.css'
 
 const app = document.getElementById('app')
diff --git a/apps/hyparquet-demo/package.json b/apps/hyparquet-demo/package.json
index 838fec0..5da3707 100644
--- a/apps/hyparquet-demo/package.json
+++ b/apps/hyparquet-demo/package.json
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@hyparam/components": "0.1.13",
-    "hightable": "0.8.1",
+    "hightable": "0.9.0",
     "hyparquet": "1.8.0",
     "hyparquet-compressors": "1.0.0",
     "react": "18.3.1",
diff --git a/apps/hyparquet-demo/src/index.css b/apps/hyparquet-demo/src/index.css
index 475b856..42ae24a 100644
--- a/apps/hyparquet-demo/src/index.css
+++ b/apps/hyparquet-demo/src/index.css
@@ -390,195 +390,6 @@ input[type="file"] {
   display: flex;
 }
 
-/* table */
-.table-container {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1;
-  position: relative;
-}
-.table-scroll {
-  flex: 1;
-  overflow: auto;
-}
-.table-scroll > div {
-  position: relative;
-}
-.table-scroll .table {
-  position: absolute;
-}
-
-table {
-  border-collapse: separate;
-  border-spacing: 0;
-}
-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: 8px;
-  padding-left: 2px;
-  background-color: #eaeaeb;
-  content: "▾";
-}
-
-/* cells */
-.table th,
-.table td {
-  border-bottom: 1px solid #ddd;
-  border-right: 1px solid #ddd;
-  height: 32px;
-  max-width: 1000px; /* 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; }
-}
-
-/* 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 */
-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 corner */
-.table-corner {
-  background-color: #e4e4e6;
-  border-right: 1px solid #ccc;
-  position: absolute;
-  height: 34px;
-  width: 32px;
-  top: 0;
-  left: 0;
-  z-index: 15;
-  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
-  background: url('https://hyperparam.app/assets/table/hyparquet.svg') #e4e4e6 no-repeat center 6px;
-}
-
-/* mock row numbers */
-.mock-row-label {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  background: #eaeaeb;
-  z-index: -10;
-}
 
 #filename {
   font-size: 10pt;
@@ -635,3 +446,7 @@ td:first-child {
   padding: 2px 4px;
   text-align: right;
 }
+
+.table-corner {
+  background: url('https://hyperparam.app/assets/table/hyparquet.svg') #e4e4e6 no-repeat center 6px;
+}
\ No newline at end of file
diff --git a/apps/hyparquet-demo/src/main.tsx b/apps/hyparquet-demo/src/main.tsx
index 7299e3c..4171c84 100644
--- a/apps/hyparquet-demo/src/main.tsx
+++ b/apps/hyparquet-demo/src/main.tsx
@@ -1,3 +1,4 @@
+import 'hightable/src/HighTable.css'
 import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.js'
diff --git a/package.json b/package.json
index 5b8f1ff..2866265 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   },
   "overrides": {
     "highlight.js": "11.11.1",
-    "hightable": "0.8.1",
+    "hightable": "0.9.0",
     "hyparquet": "1.8.0",
     "hyparquet-compressors": "1.0.0",
     "react": "18.3.1",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 4735390..9685fd3 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "highlight.js": "11.11.1",
+    "hightable": "0.9.0",
     "@hyparam/components": "0.1.13",
     "react": "18.3.1",
     "react-dom": "18.3.1"
diff --git a/packages/cli/public/HighTable.css b/packages/cli/public/HighTable.css
deleted file mode 100644
index 797087f..0000000
--- a/packages/cli/public/HighTable.css
+++ /dev/null
@@ -1,215 +0,0 @@
-.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;
-}
diff --git a/packages/cli/public/index.html b/packages/cli/public/index.html
index f6cb189..0201371 100644
--- a/packages/cli/public/index.html
+++ b/packages/cli/public/index.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>hyperparam</title>
     <link rel="stylesheet" href="./public/styles.css">
-    <link rel="stylesheet" href="./public/HighTable.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;600&display=swap"/>
     <link href="./public/favicon.png" rel="icon" />
     <meta name="description" content="hyperparam is the missing UI for machine learning" />
diff --git a/packages/cli/src/AppComponent.js b/packages/cli/src/AppComponent.js
index 5cca723..8296c83 100644
--- a/packages/cli/src/AppComponent.js
+++ b/packages/cli/src/AppComponent.js
@@ -1,4 +1,5 @@
 import { Page, getHttpSource, getHyperparamSource } from '@hyparam/components'
+import 'hightable/src/HighTable.css'
 import React from 'react'
 
 export default function App() {
diff --git a/packages/components/demo/App.tsx b/packages/components/demo/App.tsx
index e0ea49d..b32800c 100644
--- a/packages/components/demo/App.tsx
+++ b/packages/components/demo/App.tsx
@@ -1,3 +1,4 @@
+import 'hightable/src/HighTable.css'
 import React from 'react'
 import { Page } from '../src/index.js'
 
diff --git a/packages/components/demo/HighTable.css b/packages/components/demo/HighTable.css
deleted file mode 100644
index 797087f..0000000
--- a/packages/components/demo/HighTable.css
+++ /dev/null
@@ -1,215 +0,0 @@
-.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;
-}
diff --git a/packages/components/demo/index.html b/packages/components/demo/index.html
index c408df4..9f890c7 100644
--- a/packages/components/demo/index.html
+++ b/packages/components/demo/index.html
@@ -4,7 +4,6 @@
     <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"/>
     <link href="favicon.png" rel="icon" />
     <meta name="description" content="demo for the Hyperparam components" />
diff --git a/packages/components/package.json b/packages/components/package.json
index c2496b1..929eb12 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -40,7 +40,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "hightable": "0.8.1",
+    "hightable": "0.9.0",
     "hyparquet": "1.8.0",
     "hyparquet-compressors": "1.0.0"
   },
diff --git a/packages/components/src/lib/tableProvider.ts b/packages/components/src/lib/tableProvider.ts
index 73a6b8f..bf14bec 100644
--- a/packages/components/src/lib/tableProvider.ts
+++ b/packages/components/src/lib/tableProvider.ts
@@ -1,4 +1,4 @@
-import { DataFrame, ResolvablePromise, resolvablePromise } from 'hightable/src/dataframe.js'
+import { DataFrame, ResolvablePromise, resolvablePromise } from 'hightable'
 import { FileMetaData, parquetSchema } from 'hyparquet'
 import { parquetQueryWorker, parquetSortIndexWorker } from './workers/parquetWorkerClient.js'
 import type { AsyncBufferFrom } from './workers/types.d.ts'
@@ -73,8 +73,12 @@ export function parquetDataFrame(from: AsyncBufferFrom, metadata: FileMetaData):
 
           // Re-assemble data in sorted order into wrapped
           for (let i = rowStart; i < rowEnd; i++) {
+            const row = data[indices[i]]
+            // Add index to wrapped row
+            const indexPromise = resolvablePromise()
+            indexPromise.resolve(indices[i])
+            wrapped[i - rowStart].__index__ = indexPromise
             for (const key of header) {
-              const row = data[indices[i]]
               if (key in row) {
                 const cell = row[key]
                 cell