@genspectrum/dashboard-components 0.17.0 → 0.17.1

package/dist/components.js

@@ -11,6 +11,7 @@ import { v as views, s as sequenceTypeSchema, n as namedLapisFilterSchema, l as
 import { autoUpdate, computePosition, offset, shift, flip } from "@floating-ui/dom";
 import { ReactiveElement } from "@lit/reactive-element";
 import { BarWithErrorBarsController, BarWithErrorBar } from "chartjs-chart-error-bars";
+import { createTable, createColumnHelper, getPaginationRowModel, getCoreRowModel } from "@tanstack/table-core";
 import { map, geoJson } from "leaflet";
 import * as topojson from "topojson-client";
 import flatpickr from "flatpickr";
@@ -3100,11 +3101,23 @@ html {
     --tw-text-opacity: 1;
   }
 
+  .\\!table tr.hover:hover,
+  .\\!table tr.hover:nth-child(even):hover {
+    --tw-bg-opacity: 1 !important;
+    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
+  }
+
   .table tr.hover:hover,
   .table tr.hover:nth-child(even):hover {
     --tw-bg-opacity: 1;
     background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
   }
+
+  .\\!table tr.hover:hover,
+  .\\!table tr.hover:nth-child(even):hover {
+    --tw-bg-opacity: 1 !important;
+    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
+  }
 }
 .btn {
   display: inline-flex;
@@ -3304,6 +3317,106 @@ html {
     }
   }
 
+  .btn-outline:hover {
+    --tw-border-opacity: 1;
+    border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+    --tw-bg-opacity: 1;
+    background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
+    --tw-text-opacity: 1;
+    color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)));
+  }
+
+  .btn-outline.btn-primary:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+
+    .btn-outline.btn-primary:hover {
+      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
+    }
+  }
+
+  .btn-outline.btn-secondary:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+
+    .btn-outline.btn-secondary:hover {
+      background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
+    }
+  }
+
+  .btn-outline.btn-accent:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+
+    .btn-outline.btn-accent:hover {
+      background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
+    }
+  }
+
+  .btn-outline.btn-success:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+
+    .btn-outline.btn-success:hover {
+      background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
+    }
+  }
+
+  .btn-outline.btn-info:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+
+    .btn-outline.btn-info:hover {
+      background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
+    }
+  }
+
+  .btn-outline.btn-warning:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+
+    .btn-outline.btn-warning:hover {
+      background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
+    }
+  }
+
+  .btn-outline.btn-error:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+
+    .btn-outline.btn-error:hover {
+      background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
+    }
+  }
+
   .btn-disabled:hover,
     .btn[disabled]:hover,
     .btn:disabled:hover {
@@ -3750,6 +3863,14 @@ input.tab:checked + .tab-content,
 :is(.tab-active, [aria-selected="true"]) + .tab-content {
   display: block;
 }
+.\\!table {
+  position: relative !important;
+  width: 100% !important;
+  border-radius: var(--rounded-box, 1rem) !important;
+  text-align: left !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+}
 .table {
   position: relative;
   width: 100%;
@@ -3758,6 +3879,13 @@ input.tab:checked + .tab-content,
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+.\\!table :where(.table-pin-rows thead tr) {
+  position: sticky !important;
+  top: 0px !important;
+  z-index: 1 !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important;
+}
 .table :where(.table-pin-rows thead tr) {
   position: sticky;
   top: 0px;
@@ -3765,6 +3893,13 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.\\!table :where(.table-pin-rows tfoot tr) {
+  position: sticky !important;
+  bottom: 0px !important;
+  z-index: 1 !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important;
+}
 .table :where(.table-pin-rows tfoot tr) {
   position: sticky;
   bottom: 0px;
@@ -3772,6 +3907,13 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.\\!table :where(.table-pin-cols tr th) {
+  position: sticky !important;
+  left: 0px !important;
+  right: 0px !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important;
+}
 .table :where(.table-pin-cols tr th) {
   position: sticky;
   left: 0px;
@@ -3845,6 +3987,43 @@ input.tab:checked + .tab-content,
     border-color: var(--btn-color, var(--fallback-b2));
   }
 }
+@supports (color: color-mix(in oklab, black, black)) {
+
+  .btn-outline.btn-primary.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
+  }
+
+  .btn-outline.btn-secondary.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
+  }
+
+  .btn-outline.btn-accent.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
+  }
+
+  .btn-outline.btn-success.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
+  }
+
+  .btn-outline.btn-info.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
+  }
+
+  .btn-outline.btn-warning.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
+  }
+
+  .btn-outline.btn-error.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
+  }
+}
 .btn:focus-visible {
   outline-style: solid;
   outline-width: 2px;
@@ -3874,6 +4053,79 @@ input.tab:checked + .tab-content,
   border-color: transparent;
   background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
 }
+.btn-outline {
+  border-color: currentColor;
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.btn-outline.btn-active {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-primary {
+  --tw-text-opacity: 1;
+  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-primary.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-secondary {
+  --tw-text-opacity: 1;
+  color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-secondary.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-accent {
+  --tw-text-opacity: 1;
+  color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-accent.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-success {
+  --tw-text-opacity: 1;
+  color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-success.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-info {
+  --tw-text-opacity: 1;
+  color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-info.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-warning {
+  --tw-text-opacity: 1;
+  color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-warning.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-error {
+  --tw-text-opacity: 1;
+  color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-error.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
+}
 .btn.btn-disabled,
   .btn[disabled],
   .btn:disabled {
@@ -4046,6 +4298,9 @@ input.tab:checked + .tab-content,
 .join > :where(*:not(:first-child)):is(.btn) {
   margin-inline-start: calc(var(--border-btn) * -1);
 }
+.join-item:focus {
+  isolation: isolate;
+}
 .link:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -4609,9 +4864,19 @@ input.tab:checked + .tab-content,
 .tabs-boxed .tab {
   border-radius: var(--rounded-btn, 0.5rem);
 }
+.\\!table:where([dir="rtl"], [dir="rtl"] *) {
+  text-align: right !important;
+}
 .table:where([dir="rtl"], [dir="rtl"] *) {
   text-align: right;
 }
+.\\!table :where(th, td) {
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+  padding-top: 0.75rem !important;
+  padding-bottom: 0.75rem !important;
+  vertical-align: middle !important;
+}
 .table :where(th, td) {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -4619,23 +4884,45 @@ input.tab:checked + .tab-content,
   padding-bottom: 0.75rem;
   vertical-align: middle;
 }
+.\\!table tr.active,
+  .\\!table tr.active:nth-child(even) {
+  --tw-bg-opacity: 1 !important;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
+}
 .table tr.active,
   .table tr.active:nth-child(even),
   .table-zebra tbody tr:nth-child(even) {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
+.\\!table tr.active,
+  .\\!table tr.active:nth-child(even) {
+  --tw-bg-opacity: 1 !important;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
+}
 .table-zebra tr.active,
     .table-zebra tr.active:nth-child(even),
     .table-zebra-zebra tbody tr:nth-child(even) {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
 }
+.\\!table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
+  border-bottom-width: 1px !important;
+  --tw-border-opacity: 1 !important;
+  border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))) !important;
+}
 .table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
   border-bottom-width: 1px;
   --tw-border-opacity: 1;
   border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
 }
+.\\!table :where(thead, tfoot) {
+  white-space: nowrap !important;
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
+  font-weight: 700 !important;
+  color: var(--fallback-bc,oklch(var(--bc)/0.6)) !important;
+}
 .table :where(thead, tfoot) {
   white-space: nowrap;
   font-size: 0.75rem;
@@ -4643,6 +4930,11 @@ input.tab:checked + .tab-content,
   font-weight: 700;
   color: var(--fallback-bc,oklch(var(--bc)/0.6));
 }
+.\\!table :where(tfoot) {
+  border-top-width: 1px !important;
+  --tw-border-opacity: 1 !important;
+  border-top-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))) !important;
+}
 .table :where(tfoot) {
   border-top-width: 1px;
   --tw-border-opacity: 1;
@@ -5219,6 +5511,9 @@ input.tab:checked + .tab-content,
 .mt-1 {
   margin-top: 0.25rem;
 }
+.mt-2 {
+  margin-top: 0.5rem;
+}
 .mt-4 {
   margin-top: 1rem;
 }
@@ -5234,6 +5529,9 @@ input.tab:checked + .tab-content,
 .inline-flex {
   display: inline-flex;
 }
+.\\!table {
+  display: table !important;
+}
 .table {
   display: table;
 }
@@ -5289,6 +5587,9 @@ input.tab:checked + .tab-content,
 .min-w-32 {
   min-width: 8rem;
 }
+.min-w-\\[0\\.05rem\\] {
+  min-width: 0.05rem;
+}
 .min-w-\\[180px\\] {
   min-width: 180px;
 }
@@ -5354,6 +5655,9 @@ input.tab:checked + .tab-content,
 .items-center {
   align-items: center;
 }
+.justify-end {
+  justify-content: flex-end;
+}
 .justify-center {
   justify-content: center;
 }
@@ -5369,6 +5673,9 @@ input.tab:checked + .tab-content,
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-4 {
+  gap: 1rem;
+}
 .gap-y-1 {
   row-gap: 0.25rem;
 }
@@ -5518,9 +5825,6 @@ input.tab:checked + .tab-content,
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.pl-2 {
-  padding-left: 0.5rem;
-}
 .pr-14 {
   padding-right: 3.5rem;
 }
@@ -5563,9 +5867,6 @@ input.tab:checked + .tab-content,
 .font-normal {
   font-weight: 400;
 }
-.font-semibold {
-  font-weight: 600;
-}
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -5642,6 +5943,12 @@ input.tab:checked + .tab-content,
 .\\@container {
   container-type: inline-size;
 }
+.mdi--chevron-left {
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z'/%3E%3C/svg%3E");
+}
+.mdi--chevron-right {
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E");
+}
 .mdi--fullscreen {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5 5h5v2H7v3H5zm9 0h5v5h-2V7h-3zm3 9h2v5h-5v-2h3zm-7 3v2H5v-5h2v3z'/%3E%3C/svg%3E");
 }
@@ -5651,6 +5958,12 @@ input.tab:checked + .tab-content,
 .mdi--reload {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 12a9 9 0 0 0 9 9c2.39 0 4.68-.94 6.4-2.6l-1.5-1.5A6.7 6.7 0 0 1 11 19c-6.24 0-9.36-7.54-4.95-11.95S18 5.77 18 12h-3l4 4h.1l3.9-4h-3a9 9 0 0 0-18 0'/%3E%3C/svg%3E");
 }
+.mdi--chevron-left-first {
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6l6 6zM6 6h2v12H6z'/%3E%3C/svg%3E");
+}
+.mdi--chevron-right-last {
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6l-6-6zM16 6h2v12h-2z'/%3E%3C/svg%3E");
+}
 @media (min-width: 640px) {
 
   .sm\\:modal-middle {
@@ -9865,96 +10178,236 @@ const Tooltip = ({ children, content, position = "bottom" }) => {
     )
   ] });
 };
-const MAX_NUMBER_OF_GRID_ROWS = 100;
-const MUTATION_CELL_WIDTH_REM = 8;
+const pageSizesSchema = z$2.union([z$2.array(z$2.number()), z$2.number()]);
+function Pagination({
+  table,
+  pageSizes
+}) {
+  return /* @__PURE__ */ u$1("div", { className: "flex items-center gap-4 justify-end flex-wrap", children: [
+    /* @__PURE__ */ u$1(PageSizeSelector, { table, pageSizes }),
+    /* @__PURE__ */ u$1(PageIndicator, { table }),
+    /* @__PURE__ */ u$1(GotoPageSelector, { table }),
+    /* @__PURE__ */ u$1(SelectPageButtons, { table })
+  ] });
+}
+function PageIndicator({ table }) {
+  if (table.getRowModel().rows.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ u$1("span", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ u$1("div", { children: "Page" }),
+    /* @__PURE__ */ u$1("strong", { children: [
+      table.getState().pagination.pageIndex + 1,
+      " of ",
+      table.getPageCount().toLocaleString()
+    ] })
+  ] });
+}
+function PageSizeSelector({
+  table,
+  pageSizes
+}) {
+  if (typeof pageSizes === "number" || pageSizes.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ u$1("label", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ u$1("div", { className: "text-nowrap", children: "Rows per page:" }),
+    /* @__PURE__ */ u$1(
+      "select",
+      {
+        className: "select",
+        value: table.getState().pagination.pageSize,
+        onChange: (e2) => {
+          var _a;
+          table.setPageSize(Number((_a = e2.currentTarget) == null ? void 0 : _a.value));
+        },
+        "aria-label": "Select number of rows per page",
+        children: pageSizes.map((pageSize) => /* @__PURE__ */ u$1("option", { value: pageSize, children: pageSize }, pageSize))
+      }
+    )
+  ] });
+}
+function GotoPageSelector({ table }) {
+  if (table.getRowModel().rows.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ u$1("label", { className: "flex items-center", children: [
+    "Go to page:",
+    /* @__PURE__ */ u$1(
+      "input",
+      {
+        type: "number",
+        min: "1",
+        max: table.getPageCount(),
+        defaultValue: table.getState().pagination.pageIndex + 1,
+        onChange: (e2) => {
+          const page = e2.currentTarget.value ? Number(e2.currentTarget.value) - 1 : 0;
+          table.setPageIndex(page);
+        },
+        className: "input",
+        "aria-label": "Enter page number to go to"
+      }
+    )
+  ] });
+}
+function SelectPageButtons({ table }) {
+  return /* @__PURE__ */ u$1("div", { className: "join", role: "group", "aria-label": "Pagination controls", children: [
+    /* @__PURE__ */ u$1(
+      "button",
+      {
+        className: "btn btn-outline join-item btn-sm",
+        onClick: () => table.firstPage(),
+        disabled: !table.getCanPreviousPage(),
+        "aria-label": "First page",
+        children: /* @__PURE__ */ u$1("div", { className: "iconify mdi--chevron-left-first" })
+      }
+    ),
+    /* @__PURE__ */ u$1(
+      "button",
+      {
+        className: "btn btn-outline join-item btn-sm",
+        onClick: () => table.previousPage(),
+        disabled: !table.getCanPreviousPage(),
+        "aria-label": "Previous page",
+        children: /* @__PURE__ */ u$1("div", { className: "iconify mdi--chevron-left" })
+      }
+    ),
+    /* @__PURE__ */ u$1(
+      "button",
+      {
+        className: "btn btn-outline join-item btn-sm",
+        onClick: () => table.nextPage(),
+        disabled: !table.getCanNextPage(),
+        "aria-label": "Next page",
+        children: /* @__PURE__ */ u$1("div", { className: "iconify mdi--chevron-right" })
+      }
+    ),
+    /* @__PURE__ */ u$1(
+      "button",
+      {
+        className: "btn btn-outline join-item btn-sm",
+        onClick: () => table.lastPage(),
+        disabled: !table.getCanNextPage(),
+        "aria-label": "Last page",
+        children: /* @__PURE__ */ u$1("div", { className: "iconify mdi--chevron-right-last" })
+      }
+    )
+  ] });
+}
+function flexRender(Comp, props) {
+  return !Comp ? null : typeof Comp === "function" ? /* @__PURE__ */ u$1(Comp, { ...props }) : Comp;
+}
+function usePreactTable(options2) {
+  const resolvedOptions = {
+    state: {},
+    onStateChange: () => {
+    },
+    renderFallbackValue: null,
+    ...options2
+  };
+  const [tableRef] = d(() => ({
+    current: createTable(resolvedOptions)
+  }));
+  const [state, setState] = d(() => tableRef.current.initialState);
+  tableRef.current.setOptions((prev) => ({
+    ...prev,
+    ...options2,
+    state: {
+      ...state,
+      ...options2.state
+    },
+    onStateChange: (updater) => {
+      var _a;
+      setState(updater);
+      (_a = options2.onStateChange) == null ? void 0 : _a.call(options2, updater);
+    }
+  }));
+  return tableRef.current;
+}
 const MutationsOverTimeGrid = ({
   data,
   colorScale,
-  maxNumberOfGridRows,
-  sequenceType
+  sequenceType,
+  pageSizes
 }) => {
-  const currentMaxNumberOfGridRows = maxNumberOfGridRows ?? MAX_NUMBER_OF_GRID_ROWS;
-  const allMutations = data.getFirstAxisKeys();
-  const shownMutations = allMutations.slice(0, currentMaxNumberOfGridRows);
-  const dates = data.getSecondAxisKeys();
-  const gridRef = A$1(null);
-  return /* @__PURE__ */ u$1(Fragment, { children: [
-    allMutations.length > currentMaxNumberOfGridRows && /* @__PURE__ */ u$1("div", { className: "pl-2", children: [
-      "Showing ",
-      currentMaxNumberOfGridRows,
-      " of ",
-      allMutations.length,
-      " mutations. You can narrow the filter to reduce the number of mutations."
-    ] }),
-    allMutations.length === 0 ? /* @__PURE__ */ u$1("div", { className: "flex justify-center", children: "No data available for your filters." }) : /* @__PURE__ */ u$1(
-      "div",
-      {
-        ref: gridRef,
-        style: {
-          display: "grid",
-          gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
-          gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`
-        },
-        className: "text-center",
-        children: [
-          dates.map((date, columnIndex) => /* @__PURE__ */ u$1(
-            "div",
+  const tableData = T$1(() => {
+    const allMutations = data.getFirstAxisKeys();
+    return data.getAsArray().map((row, index) => {
+      return { mutation: allMutations[index], values: [...row] };
+    });
+  }, [data]);
+  const [pagination, setPagination] = d({
+    pageIndex: 0,
+    pageSize: typeof pageSizes === "number" ? pageSizes : pageSizes.at(0) ?? 10
+  });
+  const columns = T$1(() => {
+    const columnHelper = createColumnHelper();
+    const dates = data.getSecondAxisKeys();
+    const mutationHeader = columnHelper.accessor((row) => row.mutation, {
+      id: "mutation",
+      header: () => /* @__PURE__ */ u$1("span", { children: "Mutation" }),
+      cell: ({ getValue }) => {
+        const value = getValue();
+        return /* @__PURE__ */ u$1("div", { className: "text-center", children: /* @__PURE__ */ u$1(AnnotatedMutation, { mutation: value, sequenceType }) });
+      }
+    });
+    const dateHeaders = dates.map((date, index) => {
+      return columnHelper.accessor((row) => row.values[index], {
+        id: `date-${index}`,
+        header: () => /* @__PURE__ */ u$1("div", { className: "@container min-w-[0.05rem]", children: /* @__PURE__ */ u$1("p", { ...styleGridHeader(index, dates.length), children: date.dateString }) }),
+        cell: ({ getValue, row, column, table: table2 }) => {
+          const value = getValue();
+          const rowIndex = row.index;
+          const columnIndex = column.getIndex();
+          const numberOfRows = table2.getRowModel().rows.length;
+          const numberOfColumns = table2.getAllColumns().length;
+          return /* @__PURE__ */ u$1("div", { className: "text-center", children: /* @__PURE__ */ u$1(
+            ProportionCell,
             {
-              className: "@container font-semibold",
-              style: { gridRowStart: 1, gridColumnStart: columnIndex + 2 },
-              children: /* @__PURE__ */ u$1("p", { ...styleGridHeader(columnIndex, dates), children: date.dateString })
-            },
-            date.dateString
-          )),
-          shownMutations.map((mutation, rowIndex) => {
-            return /* @__PURE__ */ u$1(Fragment, { children: [
-              /* @__PURE__ */ u$1(
-                "div",
-                {
-                  style: { gridRowStart: rowIndex + 2, gridColumnStart: 1 },
-                  className: "flex items-center justify-center",
-                  children: /* @__PURE__ */ u$1(AnnotatedMutation, { mutation, sequenceType })
-                },
-                `mutation-${mutation.code}`
+              value: value ?? null,
+              date,
+              mutation: row.original.mutation,
+              tooltipPosition: getTooltipPosition(
+                rowIndex - table2.getState().pagination.pageIndex * table2.getState().pagination.pageSize,
+                numberOfRows,
+                columnIndex,
+                numberOfColumns
               ),
-              dates.map((date, columnIndex) => {
-                const value = data.get(mutation, date) ?? null;
-                const tooltipPosition = getTooltipPosition(
-                  rowIndex,
-                  shownMutations.length,
-                  columnIndex,
-                  dates.length
-                );
-                return /* @__PURE__ */ u$1(
-                  "div",
-                  {
-                    style: { gridRowStart: rowIndex + 2, gridColumnStart: columnIndex + 2 },
-                    children: /* @__PURE__ */ u$1(
-                      ProportionCell,
-                      {
-                        value,
-                        date,
-                        mutation,
-                        tooltipPosition,
-                        colorScale
-                      }
-                    )
-                  },
-                  `${mutation.code}-${date.dateString}`
-                );
-              })
-            ] }, `fragment-${mutation.code}`);
-          })
-        ]
-      }
-    )
+              colorScale
+            }
+          ) });
+        }
+      });
+    });
+    return [mutationHeader, ...dateHeaders];
+  }, [colorScale, data, sequenceType]);
+  const table = usePreactTable({
+    data: tableData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    debugTable: true,
+    onPaginationChange: setPagination,
+    state: {
+      pagination
+    }
+  });
+  return /* @__PURE__ */ u$1("div", { className: "w-full", children: [
+    /* @__PURE__ */ u$1("table", { className: "w-full", children: [
+      /* @__PURE__ */ u$1("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ u$1("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ u$1("th", { colSpan: header.colSpan, style: { width: `${header.getSize()}px` }, children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }),
+      /* @__PURE__ */ u$1("tbody", { children: [
+        table.getRowModel().rows.map((row) => /* @__PURE__ */ u$1("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ u$1("td", { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)),
+        table.getRowModel().rows.length === 0 && /* @__PURE__ */ u$1("td", { colSpan: table.getFlatHeaders().length, children: /* @__PURE__ */ u$1("div", { className: "text-center", children: "No data available for your filters." }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ u$1("div", { className: "mt-2", children: /* @__PURE__ */ u$1(Pagination, { table, pageSizes }) })
   ] });
 };
-function styleGridHeader(columnIndex, dates) {
+function styleGridHeader(columnIndex, numDateColumns) {
   if (columnIndex === 0) {
     return { className: "overflow-visible text-nowrap" };
   }
-  if (columnIndex === dates.length - 1) {
+  if (columnIndex === numDateColumns - 1) {
     return { className: "overflow-visible text-nowrap", style: { direction: "rtl" } };
   }
   return { className: "invisible @[6rem]:visible" };
@@ -10001,7 +10454,7 @@ const ProportionCell = ({ value, mutation, date, tooltipPosition, colorScale })
         color: getTextColorForScale(value == null ? void 0 : value.proportion, colorScale)
       },
       className: `w-full h-full hover:font-bold text-xs group @container`,
-      children: /* @__PURE__ */ u$1("span", { className: "invisible @[2rem]:visible", children: value === null ? "" : formatProportion(value.proportion, 0) })
+      children: value === null ? /* @__PURE__ */ u$1("span", { className: "invisible", children: "No data" }) : /* @__PURE__ */ u$1("span", { className: "invisible @[2rem]:visible", children: formatProportion(value.proportion, 0) })
     }
   ) }) });
 };
@@ -10075,7 +10528,8 @@ const mutationOverTimeSchema = z$2.object({
     max: z$2.number().min(0).max(1)
   }),
   width: z$2.string(),
-  height: z$2.string().optional()
+  height: z$2.string().optional(),
+  pageSizes: pageSizesSchema
 });
 const MutationsOverTime = (componentProps) => {
   const { width, height } = componentProps;
@@ -10165,7 +10619,8 @@ const MutationsOverTimeTabs$1 = ({
             {
               data: filteredData,
               colorScale,
-              sequenceType: originalComponentProps.sequenceType
+              sequenceType: originalComponentProps.sequenceType,
+              pageSizes: originalComponentProps.pageSizes
             }
           )
         };
@@ -10288,6 +10743,7 @@ let MutationsOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     this.lapisDateField = "date";
     this.displayMutations = void 0;
     this.initialMeanProportionInterval = { min: 0.05, max: 0.9 };
+    this.pageSizes = [10, 20, 30, 40, 50];
     this.mutationAnnotations = [];
   }
   render() {
@@ -10302,7 +10758,8 @@ let MutationsOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         granularity: this.granularity,
         lapisDateField: this.lapisDateField,
         displayMutations: this.displayMutations,
-        initialMeanProportionInterval: this.initialMeanProportionInterval
+        initialMeanProportionInterval: this.initialMeanProportionInterval,
+        pageSizes: this.pageSizes
       }
     ) });
   }
@@ -10334,6 +10791,9 @@ __decorateClass$8([
 __decorateClass$8([
   n$1({ type: Object })
 ], MutationsOverTimeComponent.prototype, "initialMeanProportionInterval", 2);
+__decorateClass$8([
+  n$1({ type: Array })
+], MutationsOverTimeComponent.prototype, "pageSizes", 2);
 __decorateClass$8([
   consume({ context: mutationAnnotationsContext, subscribe: true })
 ], MutationsOverTimeComponent.prototype, "mutationAnnotations", 2);
@@ -11672,7 +12132,7 @@ const wastewaterMutationOverTimeSchema = z$2.object({
   sequenceType: sequenceTypeSchema,
   width: z$2.string(),
   height: z$2.string().optional(),
-  maxNumberOfGridRows: z$2.number()
+  pageSizes: pageSizesSchema
 });
 const WastewaterMutationsOverTime = (componentProps) => {
   const { width, height } = componentProps;
@@ -11706,15 +12166,13 @@ const WastewaterMutationsOverTimeInner = (componentProps) => {
     MutationsOverTimeTabs,
     {
       mutationOverTimeDataPerLocation,
-      originalComponentProps: componentProps,
-      maxNumberOfGridRows: componentProps.maxNumberOfGridRows
+      originalComponentProps: componentProps
     }
   );
 };
 const MutationsOverTimeTabs = ({
   mutationOverTimeDataPerLocation,
-  originalComponentProps,
-  maxNumberOfGridRows
+  originalComponentProps
 }) => {
   const [colorScale, setColorScale] = d({ min: 0, max: 1, color: "indigo" });
   const tabs = mutationOverTimeDataPerLocation.map(({ location, data }) => ({
@@ -11724,7 +12182,7 @@ const MutationsOverTimeTabs = ({
       {
         data,
         colorScale,
-        maxNumberOfGridRows,
+        pageSizes: originalComponentProps.pageSizes,
         sequenceType: originalComponentProps.sequenceType
       }
     )
@@ -11781,7 +12239,7 @@ let WastewaterMutationsOverTimeComponent = class extends PreactLitAdapterWithGri
     this.sequenceType = "nucleotide";
     this.width = "100%";
     this.height = void 0;
-    this.maxNumberOfGridRows = 100;
+    this.pageSizes = [10, 20, 30, 40, 50];
     this.mutationAnnotations = [];
   }
   render() {
@@ -11792,7 +12250,7 @@ let WastewaterMutationsOverTimeComponent = class extends PreactLitAdapterWithGri
         sequenceType: this.sequenceType,
         width: this.width,
         height: this.height,
-        maxNumberOfGridRows: this.maxNumberOfGridRows
+        pageSizes: this.pageSizes
       }
     ) });
   }
@@ -11810,8 +12268,8 @@ __decorateClass$5([
   n$1({ type: String })
 ], WastewaterMutationsOverTimeComponent.prototype, "height", 2);
 __decorateClass$5([
-  n$1({ type: Number })
-], WastewaterMutationsOverTimeComponent.prototype, "maxNumberOfGridRows", 2);
+  n$1({ type: Array })
+], WastewaterMutationsOverTimeComponent.prototype, "pageSizes", 2);
 __decorateClass$5([
   consume({ context: mutationAnnotationsContext, subscribe: true })
 ], WastewaterMutationsOverTimeComponent.prototype, "mutationAnnotations", 2);