sqlite-hub 0.3.2 → 0.4.0

package/README.md

@@ -1,6 +1,6 @@
 # sqlite-hub ⚡️
 
-![](/assets/mockups/home.png)
+![](./frontend/assets/mockups/home.png)
 
 A focused local-first app for browsing, editing, and querying SQLite databases.
 
@@ -24,25 +24,25 @@ SQLite Hub keeps that workflow sharp:
 
 ### Structure view
 
-![](/assets/mockups/graph_visualize.png)
+![](./frontend/assets/mockups/graph_visualize.png)
 
 Inspect tables, columns, types, and schema details without losing pace. Visualized in a graph.
 
 ### Data browser
 
-![](/assets/mockups/data.png)
+![](./frontend/assets/mockups/data.png)
 
 Scan rows, sort fast, move through local data quickly, and export full tables as CSV.
 
 ### Row editing
 
-![](/assets/mockups/data_edit.png)
+![](./frontend/assets/mockups/data_edit.png)
 
 Open one record, edit it in place, commit, continue.
 
 ### SQL editor
 
-![](/assets/mockups/sql_editor.png)
+![](./frontend/assets/mockups/sql_editor.png)
 
 Write queries in a syntax-highlighted editor, inspect results in the same workflow, and export result sets as CSV.
 

package/changelog.md

@@ -1,3 +1,10 @@
+# v0.4.0
+
+- search in data
+- shift + enter
+- logos for databases
+- clean up some chaotic code things :)
+
 # v0.3.2
 
 - delete rows

package/{js → frontend/js}/app.js

@@ -37,6 +37,8 @@ import {
   selectStructureEntry,
   setDataPage,
   setDataPageSize,
+  setDataSearchColumn,
+  setDataSearchQuery,
   setCurrentQuery,
   setEditorTab,
   setRoute,
@@ -115,6 +117,35 @@ function syncQueryEditorScroll(textarea) {
   highlightNode.style.transform = `translate(${-textarea.scrollLeft}px, ${-textarea.scrollTop}px)`;
 }
 
+function readFileAsBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      const result = String(reader.result ?? "");
+      const markerIndex = result.indexOf(",");
+      resolve(markerIndex >= 0 ? result.slice(markerIndex + 1) : result);
+    };
+    reader.onerror = () => {
+      reject(reader.error ?? new Error("The selected logo could not be read."));
+    };
+
+    reader.readAsDataURL(file);
+  });
+}
+
+async function buildConnectionLogoUpload(file) {
+  if (!(file instanceof File) || !file.size) {
+    return null;
+  }
+
+  return {
+    fileName: file.name,
+    mimeType: file.type,
+    base64: await readFileAsBase64(file),
+  };
+}
+
 function renderNotFoundView() {
   return {
     main: `
@@ -224,7 +255,9 @@ function restoreFocusedInputState(snapshot) {
 function renderApp(state) {
   const focusedInput = captureFocusedInputState();
   const { main, panel } = resolveView(state);
-  const isLockedRoute = ["editor", "editorResults", "data"].includes(state.route.name);
+  const isLockedRoute = ["editor", "editorResults", "data", "structure"].includes(
+    state.route.name
+  );
 
   teardownStructureGraph();
   shellRefs.topNav.innerHTML = renderTopNav(state);
@@ -249,6 +282,11 @@ const router = createRouter((route) => {
   setRoute(route);
 });
 
+async function executeEditorQueryAndNavigate() {
+  const success = await executeCurrentQuery();
+  router.navigate(success ? "/editor/results" : "/editor");
+}
+
 async function handleAction(actionNode) {
   const { action } = actionNode.dataset;
 
@@ -301,8 +339,7 @@ async function handleAction(actionNode) {
       await createActiveConnectionBackup();
       return;
     case "execute-query": {
-      const success = await executeCurrentQuery();
-      router.navigate(success ? "/editor/results" : "/editor");
+      await executeEditorQueryAndNavigate();
       return;
     }
     case "delete-data-row":
@@ -385,6 +422,27 @@ document.addEventListener("click", (event) => {
 });
 
 document.addEventListener("keydown", (event) => {
+  const target = event.target;
+
+  if (
+    event.key === "Enter" &&
+    event.shiftKey &&
+    !event.altKey &&
+    !event.ctrlKey &&
+    !event.metaKey &&
+    !event.defaultPrevented &&
+    target instanceof HTMLTextAreaElement &&
+    target.dataset.bind === "current-query"
+  ) {
+    event.preventDefault();
+
+    if (!getState().editor.executing) {
+      void executeEditorQueryAndNavigate();
+    }
+
+    return;
+  }
+
   if (event.key !== "Escape" || event.defaultPrevented) {
     return;
   }
@@ -420,6 +478,11 @@ document.addEventListener("input", (event) => {
     syncQueryEditorHighlight(bindNode);
     syncQueryEditorScroll(bindNode);
     setCurrentQuery(bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "data-search-query") {
+    setDataSearchQuery(bindNode.value);
   }
 });
 
@@ -447,6 +510,11 @@ document.addEventListener("change", (event) => {
   if (bindNode.dataset.bind === "history-entry" && bindNode.value) {
     loadQueryFromHistory(bindNode.value);
     bindNode.value = "";
+    return;
+  }
+
+  if (bindNode.dataset.bind === "data-search-column") {
+    setDataSearchColumn(bindNode.value);
   }
 });
 
@@ -512,6 +580,8 @@ document.addEventListener("submit", async (event) => {
     case "edit-connection": {
       const connectionId = String(formData.get("connectionId") ?? "");
       const isActiveConnection = getState().connections.active?.id === connectionId;
+      const logoFile = formData.get("logoFile");
+      const logoUpload = await buildConnectionLogoUpload(logoFile);
 
       if (isActiveConnection) {
         resetStructureGraphForDatabaseChange();
@@ -521,6 +591,8 @@ document.addEventListener("submit", async (event) => {
         path: String(formData.get("path") ?? ""),
         label: String(formData.get("label") ?? ""),
         readOnly: formData.get("readOnly") === "on",
+        clearLogo: formData.get("clearLogo") === "on" && !logoUpload,
+        logoUpload,
       });
 
       return;

package/{js → frontend/js}/components/connectionCard.js

@@ -5,6 +5,7 @@ import {
   truncateMiddle,
 } from "../utils/format.js";
 import { renderStatusBadge } from "./badges.js";
+import { renderConnectionLogo } from "./connectionLogo.js";
 
 export function renderConnectionCard(connection, activeConnectionId) {
   const isActive = activeConnectionId
@@ -20,16 +21,14 @@ export function renderConnectionCard(connection, activeConnectionId) {
     >
       <div class="flex-1 p-6">
         <div class="mb-6 flex items-start justify-between">
-          <div
-            class="clipped-corner flex h-10 w-10 items-center justify-center transition-colors ${
+          ${renderConnectionLogo(connection, {
+            containerClass: `clipped-corner flex h-10 w-10 items-center justify-center overflow-hidden transition-colors ${
               isActive ? "bg-primary-container" : "bg-surface-container-highest"
-            }"
-            style="--clip-path: ${clipPath};"
-          >
-            <span class="material-symbols-outlined ${
-              isActive ? "text-on-primary" : "text-outline-variant"
-            }">database</span>
-          </div>
+            }`,
+            containerAttributes: `style="--clip-path: ${clipPath};"`,
+            imageClassName: "h-full w-full object-cover",
+            iconClassName: isActive ? "text-on-primary" : "text-outline-variant",
+          })}
           <div class="flex items-center gap-2">
             ${renderStatusBadge(isActive ? "ACTIVE" : "RECENT", isActive ? "primary" : "muted")}
             ${connection.readOnly ? renderStatusBadge("READ_ONLY", "alert") : ""}

package/frontend/js/components/connectionLogo.js

@@ -0,0 +1,33 @@
+import { escapeHtml } from "../utils/format.js";
+
+export function renderConnectionLogo(
+  connection,
+  {
+    containerClass = "",
+    containerAttributes = "",
+    imageClassName = "h-full w-full object-cover",
+    iconClassName = "",
+    icon = "database",
+  } = {}
+) {
+  const logoUrl = connection?.logoUrl ?? null;
+  const label = connection?.label ?? "Database";
+
+  if (logoUrl) {
+    return `
+      <div ${containerAttributes} class="${containerClass}">
+        <img
+          alt="${escapeHtml(`${label} logo`)}"
+          class="${imageClassName}"
+          src="${escapeHtml(logoUrl)}"
+        />
+      </div>
+    `;
+  }
+
+  return `
+    <div ${containerAttributes} class="${containerClass}">
+      <span class="material-symbols-outlined ${iconClassName}">${escapeHtml(icon)}</span>
+    </div>
+  `;
+}

package/{js → frontend/js}/components/emptyState.js

@@ -4,6 +4,7 @@ import {
   formatDateTime,
   truncateMiddle,
 } from "../utils/format.js";
+import { renderConnectionLogo } from "./connectionLogo.js";
 
 function renderRecentConnections(recentConnections = []) {
   if (!recentConnections.length) {
@@ -26,7 +27,12 @@ function renderRecentConnections(recentConnections = []) {
               data-connection-id="${escapeHtml(connection.id)}"
               type="button"
             >
-              <span class="material-symbols-outlined text-sm text-primary-container">database</span>
+              ${renderConnectionLogo(connection, {
+                containerClass:
+                  "flex h-8 w-8 items-center justify-center overflow-hidden bg-surface-container-highest",
+                imageClassName: "h-full w-full object-cover",
+                iconClassName: "text-sm text-primary-container",
+              })}
               <span class="min-w-0">
                 <span class="block truncate font-mono text-xs">${escapeHtml(connection.label)}</span>
                 <span class="block truncate text-[10px] text-on-surface-variant/45">${escapeHtml(
@@ -53,16 +59,24 @@ function renderActiveConnection(activeConnection) {
   return `
     <div class="mx-auto max-w-2xl border border-outline-variant/15 bg-surface-container-low px-6 py-5 text-left">
       <div class="flex flex-wrap items-start justify-between gap-4">
-        <div>
-          <p class="text-[10px] font-mono uppercase tracking-[0.24em] text-primary-container/70">
-            ACTIVE_DATABASE
-          </p>
-          <h2 class="mt-2 font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
-            ${escapeHtml(activeConnection.label)}
-          </h2>
-          <p class="mt-2 font-mono text-[10px] text-on-surface-variant/55">${escapeHtml(
-            truncateMiddle(activeConnection.path, 72)
-          )}</p>
+        <div class="flex items-start gap-4">
+          ${renderConnectionLogo(activeConnection, {
+            containerClass:
+              "flex h-14 w-14 items-center justify-center overflow-hidden border border-outline-variant/15 bg-surface-container-highest",
+            imageClassName: "h-full w-full object-cover",
+            iconClassName: "text-2xl text-primary-container",
+          })}
+          <div>
+            <p class="text-[10px] font-mono uppercase tracking-[0.24em] text-primary-container/70">
+              ACTIVE_DATABASE
+            </p>
+            <h2 class="mt-2 font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
+              ${escapeHtml(activeConnection.label)}
+            </h2>
+            <p class="mt-2 font-mono text-[10px] text-on-surface-variant/55">${escapeHtml(
+              truncateMiddle(activeConnection.path, 72)
+            )}</p>
+          </div>
         </div>
         <div class="text-right text-xs text-on-surface-variant/65">
           <div>${escapeHtml(formatBytes(activeConnection.sizeBytes))}</div>

package/{js → frontend/js}/components/modal.js

@@ -1,4 +1,5 @@
 import { escapeHtml, truncateMiddle } from "../utils/format.js";
+import { renderConnectionLogo } from "./connectionLogo.js";
 
 function renderField({ label, name, type = "text", placeholder = "", value = "" }) {
   return `
@@ -31,6 +32,32 @@ function renderCheckboxField({ label, name, checked = false, text }) {
   `;
 }
 
+function renderFileField({
+  label,
+  name,
+  accept = "",
+  helpText = "",
+}) {
+  return `
+    <label class="block space-y-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        ${escapeHtml(label)}
+      </span>
+      <input
+        accept="${escapeHtml(accept)}"
+        class="block w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface file:mr-4 file:border-0 file:bg-primary-container file:px-3 file:py-2 file:text-xs file:font-bold file:text-on-primary"
+        name="${escapeHtml(name)}"
+        type="file"
+      />
+      ${
+        helpText
+          ? `<p class="text-[11px] leading-5 text-on-surface-variant/60">${escapeHtml(helpText)}</p>`
+          : ""
+      }
+    </label>
+  `;
+}
+
 function renderError(error) {
   if (!error) {
     return "";
@@ -102,6 +129,36 @@ function renderEditConnectionForm(modal) {
         placeholder: "Optional display name",
         value: connection.label ?? "",
       })}
+      <div class="space-y-3">
+        <span class="block text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Database Icon
+        </span>
+        <div class="flex flex-wrap items-center gap-4 border border-outline-variant/10 bg-surface-container-lowest px-4 py-4">
+          ${renderConnectionLogo(connection, {
+            containerClass:
+              "flex h-16 w-16 items-center justify-center overflow-hidden border border-outline-variant/20 bg-surface-container-highest",
+            imageClassName: "h-full w-full object-cover",
+            iconClassName: "text-2xl text-primary-container",
+          })}
+          <div class="min-w-0 flex-1">
+            ${renderFileField({
+              label: "Upload image",
+              name: "logoFile",
+              accept: ".png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp",
+              helpText: "Allowed formats: PNG, JPG, WEBP. The file is stored in db_logos.",
+            })}
+            ${
+              connection.logoUrl
+                ? renderCheckboxField({
+                    label: "Reset icon",
+                    name: "clearLogo",
+                    text: "Use the default icon again",
+                  })
+                : ""
+            }
+          </div>
+        </div>
+      </div>
       ${renderCheckboxField({
         label: "Open read-only",
         name: "readOnly",

package/{js → frontend/js}/components/sidebar.js

@@ -1,4 +1,5 @@
 import { escapeHtml } from "../utils/format.js";
+import { renderConnectionLogo } from "./connectionLogo.js";
 
 const sidebarItems = [
   { label: "Connections", href: "#/connections", key: "connections", icon: "database" },
@@ -40,9 +41,13 @@ export function renderSidebar(state) {
     </nav>
     <div class="sidebar-footer">
       <div class="sidebar-footer-card">
-        <div class="sidebar-footer-mark">
-          <span class="material-symbols-outlined text-[15px]">memory</span>
-        </div>
+        ${renderConnectionLogo(activeConnection, {
+          containerClass:
+            "sidebar-footer-mark overflow-hidden bg-primary-container text-on-primary",
+          imageClassName: "h-full w-full object-cover",
+          iconClassName: "text-[15px]",
+          icon: "memory",
+        })}
         <div class="min-w-0">
           <p class="truncate text-[10px] font-bold text-on-surface">
             ${escapeHtml(activeConnection?.label ?? "NO_ACTIVE_DATABASE")}

package/{js → frontend/js}/store.js

@@ -48,6 +48,8 @@ const state = {
     deleting: false,
     page: 1,
     pageSize: 50,
+    searchQuery: "",
+    searchColumn: "",
     selectedRowIndex: null,
     exportLoading: false,
     error: null,
@@ -118,6 +120,11 @@ function canEditQueryResult(snapshot = state) {
   return Boolean(snapshot.editor.result?.editing?.enabled) && !snapshot.connections.active?.readOnly;
 }
 
+function resetDataBrowserSearch() {
+  state.dataBrowser.searchQuery = "";
+  state.dataBrowser.searchColumn = "";
+}
+
 function buildUpdatedEditorResultRow(existingRow, updatedSourceRow, editableColumns) {
   const nextRow = {
     ...existingRow,
@@ -188,6 +195,7 @@ function setMissingDatabaseState() {
   state.dataBrowser.selectedTable = null;
   state.dataBrowser.table = null;
   state.dataBrowser.page = 1;
+  resetDataBrowserSearch();
   state.dataBrowser.selectedRowIndex = null;
   state.dataBrowser.exportLoading = false;
   state.dataBrowser.error = error;
@@ -221,6 +229,9 @@ function syncRouteContext() {
     if (route.name !== "data" || route.params?.tableName !== state.dataBrowser.selectedTable) {
       state.dataBrowser.page = 1;
     }
+    if (route.params?.tableName !== state.dataBrowser.selectedTable) {
+      resetDataBrowserSearch();
+    }
     state.dataBrowser.selectedRowIndex = null;
     state.dataBrowser.saveError = null;
   }
@@ -346,6 +357,9 @@ async function loadDataTable(version) {
     state.dataBrowser.table = response.data ?? null;
     state.dataBrowser.pageSize = pageSize;
     state.dataBrowser.page = response.data?.page ?? page;
+    state.dataBrowser.searchColumn = response.data?.columns?.includes(state.dataBrowser.searchColumn)
+      ? state.dataBrowser.searchColumn
+      : (response.data?.columns?.[0] ?? "");
     state.dataBrowser.selectedRowIndex = null;
   } catch (error) {
     if (version !== routeLoadVersion) {
@@ -383,6 +397,7 @@ async function loadData(version, route) {
     if (requestedTableName && tables.some((table) => table.name === requestedTableName)) {
       if (requestedTableName !== state.dataBrowser.selectedTable) {
         state.dataBrowser.page = 1;
+        resetDataBrowserSearch();
       }
       state.dataBrowser.selectedTable = requestedTableName;
     } else if (
@@ -391,10 +406,12 @@ async function loadData(version, route) {
     ) {
       state.dataBrowser.selectedTable = tables[0]?.name ?? null;
       state.dataBrowser.page = 1;
+      resetDataBrowserSearch();
     }
 
     if (!state.dataBrowser.selectedTable) {
       state.dataBrowser.table = null;
+      resetDataBrowserSearch();
       state.dataBrowser.selectedRowIndex = null;
       return;
     }
@@ -510,6 +527,7 @@ function invalidateDatabaseCaches() {
   state.dataBrowser.selectedTable = null;
   state.dataBrowser.table = null;
   state.dataBrowser.page = 1;
+  resetDataBrowserSearch();
   state.dataBrowser.selectedRowIndex = null;
   state.dataBrowser.exportLoading = false;
   state.dataBrowser.error = null;
@@ -1010,6 +1028,20 @@ export function clearDataRowSelection() {
   emitChange();
 }
 
+export function setDataSearchQuery(query) {
+  state.dataBrowser.searchQuery = String(query ?? "");
+  state.dataBrowser.selectedRowIndex = null;
+  state.dataBrowser.saveError = null;
+  emitChange();
+}
+
+export function setDataSearchColumn(columnName) {
+  state.dataBrowser.searchColumn = String(columnName ?? "");
+  state.dataBrowser.selectedRowIndex = null;
+  state.dataBrowser.saveError = null;
+  emitChange();
+}
+
 export async function setDataPage(page) {
   const numericPage = Number(page);
 

package/{js → frontend/js}/views/data.js

@@ -168,6 +168,80 @@ function getCellWidthClass(columnName) {
   return "max-w-[12rem]";
 }
 
+function getFilteredTableRows(table, state) {
+  const allRows = table?.rows ?? [];
+  const availableColumns = table?.columns ?? [];
+  const searchQuery = String(state.dataBrowser.searchQuery ?? "").trim().toLowerCase();
+  const activeColumn = availableColumns.includes(state.dataBrowser.searchColumn)
+    ? state.dataBrowser.searchColumn
+    : (availableColumns[0] ?? "");
+
+  const indexedRows = allRows.map((row, index) => ({
+    row,
+    index,
+  }));
+
+  if (!searchQuery || !activeColumn) {
+    return {
+      activeColumn,
+      filteredRows: indexedRows,
+      searchQuery,
+    };
+  }
+
+  return {
+    activeColumn,
+    searchQuery,
+    filteredRows: indexedRows.filter(({ row }) =>
+      formatCellValue(row[activeColumn]).toLowerCase().includes(searchQuery)
+    ),
+  };
+}
+
+function renderTableSearchBar(table, state, activeColumn, filteredRowCount) {
+  const columns = table?.columns ?? [];
+
+  if (!table || !columns.length) {
+    return "";
+  }
+
+  return `
+    <div class="flex flex-wrap items-center gap-3 border-b border-outline-variant/10 bg-surface-container-low px-6 py-4">
+      <label class="flex min-w-[18rem] flex-1 items-center gap-3 border border-outline-variant/20 bg-surface-container-lowest px-4 py-3">
+        <span class="material-symbols-outlined text-base text-on-surface-variant/55">search</span>
+        <input
+          class="min-w-0 flex-1 bg-transparent text-sm text-on-surface outline-none placeholder:text-on-surface-variant/40"
+          data-bind="data-search-query"
+          placeholder="Filter current page..."
+          type="search"
+          value="${escapeHtml(state.dataBrowser.searchQuery ?? "")}"
+        />
+      </label>
+      <select
+        class="min-w-[14rem] border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 font-mono text-xs tracking-[0.04em] text-on-surface outline-none"
+        data-bind="data-search-column"
+      >
+        ${columns
+          .map(
+            (columnName) => `
+              <option value="${escapeHtml(columnName)}" ${
+                columnName === activeColumn ? "selected" : ""
+              }>
+                ${escapeHtml(columnName)}
+              </option>
+            `
+          )
+          .join("")}
+      </select>
+      <div class="text-[10px] font-mono tracking-[0.14em] text-on-surface-variant/55">
+        ${escapeHtml(formatNumber(filteredRowCount))} match${
+          filteredRowCount === 1 ? "" : "es"
+        } on this page
+      </div>
+    </div>
+  `;
+}
+
 function renderTableSurface(state) {
   const table = state.dataBrowser.table;
 
@@ -197,10 +271,11 @@ function renderTableSurface(state) {
     `;
   }
 
+  const { activeColumn, filteredRows, searchQuery } = getFilteredTableRows(table, state);
   const columns = (table.columns ?? []).map((columnName) => ({
     label: escapeHtml(columnName),
     headerClassName:
-      "border-b border-primary-container/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-primary-container",
+      "border-b border-primary-container/20 px-4 py-3 text-[10px] font-bold tracking-[0.08em] text-primary-container",
     cellClassName: "px-4 py-2 align-top text-[11px] text-on-surface",
     render: (row) => {
       const value = formatCellValue(row[columnName]);
@@ -219,25 +294,35 @@ function renderTableSurface(state) {
   const fromRow = totalRows === 0 ? 0 : (table.offset ?? 0) + 1;
   const toRow = totalRows === 0 ? 0 : Math.min((table.offset ?? 0) + (table.rows?.length ?? 0), totalRows);
   const pageSizes = [25, 50, 100];
+  const filteredRowCount = filteredRows.length;
+  const hasActiveSearch = Boolean(searchQuery);
 
   return `
     <div class="flex flex-1 min-h-0 flex-col bg-surface-container-lowest">
+      ${renderTableSearchBar(table, state, activeColumn, filteredRowCount)}
       <div class="custom-scrollbar flex-1 overflow-auto">
         ${renderDataGrid({
           columns,
-          rows: table.rows ?? [],
+          rows: filteredRows.map(({ row }) => row),
           tableClass: "min-w-full border-collapse text-left font-mono text-xs",
           theadClass: "sticky top-0 z-10 bg-surface-container-highest",
           tbodyClass: "divide-y divide-outline-variant/5",
-          getRowClass: (_, index) =>
-            `${
-              state.dataBrowser.selectedRowIndex === index
+          getRowClass: (_, filteredIndex) => {
+            const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
+
+            return `${
+              state.dataBrowser.selectedRowIndex === rowIndex
                 ? "bg-surface-bright"
-                : index % 2 === 0
+                : filteredIndex % 2 === 0
                   ? "bg-surface-container-low"
                   : "bg-surface-container-lowest"
-            } cursor-pointer transition-colors hover:bg-surface-container-high`,
-          getRowAttrs: (_, index) => `data-action="select-data-row" data-row-index="${index}"`,
+            } cursor-pointer transition-colors hover:bg-surface-container-high`;
+          },
+          getRowAttrs: (_, filteredIndex) => {
+            const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
+
+            return `data-action="select-data-row" data-row-index="${rowIndex}"`;
+          },
         })}
         ${
           !table.rows?.length
@@ -248,6 +333,14 @@ function renderTableSurface(state) {
                   </p>
                 </div>
               `
+            : !filteredRowCount
+              ? `
+                  <div class="flex min-h-[180px] items-center justify-center border-t border-outline-variant/10">
+                    <p class="font-mono text-[10px] tracking-[0.18em] text-on-surface-variant/40">
+                      ${hasActiveSearch ? "No matching rows on this page." : "No rows available."}
+                    </p>
+                  </div>
+                `
             : ""
         }
       </div>
@@ -255,7 +348,7 @@ function renderTableSurface(state) {
         <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
           showing ${escapeHtml(formatNumber(fromRow))}-${escapeHtml(formatNumber(toRow))} of ${escapeHtml(
             formatNumber(totalRows)
-          )} rows
+          )} rows${hasActiveSearch ? ` // ${escapeHtml(formatNumber(filteredRowCount))} visible on this page` : ""}
         </div>
         <div class="flex flex-wrap items-center gap-4">
           <div class="flex items-center gap-2">