@marimo-team/islands 0.25.3-dev28 → 0.25.3-dev281

package/src/components/data-table/pagination.tsx

@@ -41,21 +41,24 @@ import { PluralWord } from "@/utils/pluralize";
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
   tableLoading?: boolean;
+  hasNextPage?: boolean;
   showPageSizeSelector?: boolean;
 }
 
 export const DataTablePagination = <TData,>({
   table,
   tableLoading,
+  hasNextPage,
   showPageSizeSelector,
 }: DataTablePaginationProps<TData>) => {
   const { locale } = useLocale();
 
-  const currentPage = Math.min(
-    table.getState().pagination.pageIndex + 1,
-    table.getPageCount(),
-  );
   const totalPages = table.getPageCount();
+  const hasKnownTotal = totalPages !== -1;
+  const pageNumber = table.getState().pagination.pageIndex + 1;
+  const currentPage = hasKnownTotal
+    ? Math.min(pageNumber, totalPages)
+    : pageNumber;
 
   const pageSize = table.getState().pagination.pageSize;
 
@@ -142,16 +145,22 @@ export const DataTablePagination = <TData,>({
         </Tooltip>
         <div className="flex items-center justify-center text-xs font-medium gap-1">
           <span>Page</span>
-          <PageSelector
-            currentPage={currentPage}
-            totalPages={totalPages}
-            onPageChange={(page) =>
-              handlePageChange(() => table.setPageIndex(page))
-            }
-          />
-          <span className="shrink-0">
-            of {prettyNumber(totalPages, locale)}
-          </span>
+          {hasKnownTotal ? (
+            <>
+              <PageSelector
+                currentPage={currentPage}
+                totalPages={totalPages}
+                onPageChange={(page) =>
+                  handlePageChange(() => table.setPageIndex(page))
+                }
+              />
+              <span className="shrink-0">
+                of {prettyNumber(totalPages, locale)}
+              </span>
+            </>
+          ) : (
+            <span>{prettyNumber(currentPage, locale)}</span>
+          )}
         </div>
         <Tooltip content="Next page">
           <Button
@@ -162,29 +171,31 @@ export const DataTablePagination = <TData,>({
             className="h-6 w-5 p-0"
             onClick={() => handlePageChange(() => table.nextPage())}
             onMouseDown={Events.preventFocus}
-            disabled={!table.getCanNextPage()}
+            disabled={tableLoading || !(hasNextPage ?? table.getCanNextPage())}
           >
             <ChevronRight className="h-4 w-4" />
           </Button>
         </Tooltip>
-        <Tooltip content="Last page">
-          <Button
-            size="xs"
-            variant="text"
-            data-testid="last-page-button"
-            aria-label="Last page"
-            className="hidden h-6 w-5 p-0 lg:flex"
-            onClick={() =>
-              handlePageChange(() =>
-                table.setPageIndex(table.getPageCount() - 1),
-              )
-            }
-            onMouseDown={Events.preventFocus}
-            disabled={!table.getCanNextPage()}
-          >
-            <ChevronsRight className="h-4 w-4" />
-          </Button>
-        </Tooltip>
+        {hasKnownTotal && (
+          <Tooltip content="Last page">
+            <Button
+              size="xs"
+              variant="text"
+              data-testid="last-page-button"
+              aria-label="Last page"
+              className="hidden h-6 w-5 p-0 lg:flex"
+              onClick={() =>
+                handlePageChange(() =>
+                  table.setPageIndex(table.getPageCount() - 1),
+                )
+              }
+              onMouseDown={Events.preventFocus}
+              disabled={!table.getCanNextPage()}
+            >
+              <ChevronsRight className="h-4 w-4" />
+            </Button>
+          </Tooltip>
+        )}
       </div>
     </div>
   );

package/src/components/data-table/range-focus/atoms.ts

@@ -244,15 +244,13 @@ const {
       cellId: nextCell.id,
     };
 
-    if (isShiftKey && state.selectedStartCell) {
-      const cellsInRange = getCellsBetween(
-        table,
-        state.selectedStartCell,
-        newCell,
-      );
+    if (isShiftKey) {
+      const anchor = state.selectedStartCell ?? currentCell;
+      const cellsInRange = getCellsBetween(table, anchor, newCell);
       return {
         ...state,
         selectedCells: new Set(cellsInRange),
+        selectedStartCell: anchor,
         focusedCell: newCell,
       };
     } else {

package/src/components/data-table/range-focus/use-cell-range-selection.ts

@@ -45,45 +45,71 @@ export const useCellRangeSelection = <TData>({
     },
   );
 
-  const handleCellsKeyDown = useEvent((e: React.KeyboardEvent<HTMLElement>) => {
-    switch (e.key) {
-      case "c":
-        if (Events.isMetaOrCtrl(e)) {
-          handleCopy();
-        }
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        navigate(e, "down");
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        navigate(e, "up");
-        break;
-      case "ArrowLeft":
-        e.preventDefault();
-        navigate(e, "left");
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        navigate(e, "right");
-        break;
-      case "Enter":
-        e.preventDefault();
-        actions.toggleCurrentRowSelection(table);
-        break;
-      case "Escape":
-        actions.clearSelection();
-        break;
-      case "a":
-        if (e.metaKey || e.ctrlKey) {
-          e.preventDefault();
-          actions.selectAllCells(table);
-        }
-        break;
-    }
+  const handleCellFocus = useEvent((cell: Cell<TData, unknown>) => {
+    actions.setFocusedCell({
+      cellId: cell.id,
+      rowId: cell.row.id,
+      columnId: cell.column.id,
+    });
   });
 
+  const handleCellsKeyDown = useEvent(
+    (e: React.KeyboardEvent<HTMLElement>, cell: Cell<TData, unknown>) => {
+      if (e.defaultPrevented || isInteractiveTarget(e)) {
+        return;
+      }
+      switch (e.key) {
+        case "c":
+          if (Events.isMetaOrCtrl(e)) {
+            handleCopy();
+          }
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          navigate(e, "down");
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          navigate(e, "up");
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          navigate(e, "left");
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          navigate(e, "right");
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          updateSelection(
+            {
+              cellId: cell.id,
+              rowId: cell.row.id,
+              columnId: cell.column.id,
+            },
+            false,
+          );
+          if (table.options.enableCellSelection) {
+            cell.toggleSelected?.();
+          } else if (cell.row.getCanSelect()) {
+            cell.row.toggleSelected();
+          }
+          break;
+        case "Escape":
+          actions.clearSelection();
+          break;
+        case "a":
+          if (e.metaKey || e.ctrlKey) {
+            e.preventDefault();
+            actions.selectAllCells(table);
+          }
+          break;
+      }
+    },
+  );
+
   const handleCellMouseDown = useEvent(
     (e: React.MouseEvent, cell: Cell<TData, unknown>) => {
       // Right-clicks will trigger context menu, so avoid updating selected cells
@@ -122,6 +148,7 @@ export const useCellRangeSelection = <TData>({
     handleCellMouseOver,
     handleCopy,
     handleCellsKeyDown,
+    handleCellFocus,
     updateSelection,
     clearSelection: actions.clearSelection,
   };
@@ -148,7 +175,7 @@ const CONTENT_WRAPPER_MARIMO_TAGS: ReadonlySet<string> = new Set([
  * shadow host (e.g. `<marimo-lazy>`), hiding any genuinely interactive
  * descendants rendered inside the shadow tree.
  */
-export function isInteractiveTarget(e: React.MouseEvent): boolean {
+export function isInteractiveTarget(e: React.SyntheticEvent): boolean {
   const path: readonly EventTarget[] =
     typeof e.nativeEvent?.composedPath === "function"
       ? e.nativeEvent.composedPath()

package/src/components/data-table/range-focus/use-scroll-into-view.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { atom } from "jotai";
+import { atom, useStore } from "jotai";
 import { useJotaiEffect } from "@/core/state/jotai";
 import { Logger } from "@/utils/Logger";
 import { cellSelectionStateAtom } from "./atoms";
@@ -15,14 +15,21 @@ const focusedCellAtom = atom((get) => get(cellSelectionStateAtom).focusedCell);
 export function useScrollIntoViewOnFocus(
   root: React.RefObject<HTMLElement | null>,
 ) {
+  const store = useStore();
   useJotaiEffect(focusedCellAtom, (focusedCell) => {
     if (!focusedCell?.cellId) {
       return;
     }
 
     const scroll = () => {
+      if (
+        !root.current ||
+        store.get(focusedCellAtom)?.cellId !== focusedCell.cellId
+      ) {
+        return;
+      }
       // Check if this cell contains the CellRangeSelectionIndicator with our cellId
-      const indicator = root.current?.querySelector(
+      const indicator = root.current?.querySelector<HTMLElement>(
         `[data-cell-id="${focusedCell.cellId}"]`,
       );
       if (!indicator) {
@@ -33,6 +40,18 @@ export function useScrollIntoViewOnFocus(
         return;
       }
 
+      const focusRoot = root.current.getRootNode();
+      const activeElement =
+        focusRoot instanceof ShadowRoot || focusRoot instanceof Document
+          ? focusRoot.activeElement
+          : null;
+      if (
+        root.current.contains(activeElement) &&
+        activeElement?.matches("td[data-cell-id]")
+      ) {
+        indicator.focus({ preventScroll: true });
+      }
+
       indicator.scrollIntoView({
         behavior: "smooth",
         block: "nearest",

package/src/components/data-table/renderers.tsx

@@ -124,6 +124,7 @@ export const DataTableBody = <TData,>({
     handleCellMouseUp,
     handleCellMouseOver,
     handleCellsKeyDown,
+    handleCellFocus,
     handleCopy: handleCopyAllCells,
   } = useCellRangeSelection({ table });
 
@@ -147,10 +148,16 @@ export const DataTableBody = <TData,>({
       return (
         <TableCell
           tabIndex={0}
+          role={table.options.enableCellSelection ? "gridcell" : undefined}
+          aria-selected={
+            table.options.enableCellSelection
+              ? cell.getIsSelected?.()
+              : undefined
+          }
           {...getCellDomProps(cell.id)}
           key={cell.id}
           className={cn(
-            "whitespace-pre truncate outline-hidden border-r border-r-border/75",
+            "whitespace-pre truncate outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring border-r border-r-border/75",
             !fixedWidth && "max-w-[300px]",
             cell.column.getColumnWrapping &&
               cell.column.getColumnWrapping?.() === "wrap" &&
@@ -169,7 +176,13 @@ export const DataTableBody = <TData,>({
             hoverTooltip.handleCellMouseOver(e, cell);
           }}
           onMouseLeave={hoverTooltip.handleCellMouseLeave}
-          onFocus={(e) => hoverTooltip.handleCellFocus(e, cell)}
+          onFocus={(e) => {
+            if (e.target === e.currentTarget) {
+              handleCellFocus(cell);
+            }
+            hoverTooltip.handleCellFocus(e, cell);
+          }}
+          onKeyDown={(e) => handleCellsKeyDown(e, cell)}
           onBlur={hoverTooltip.handleCellBlur}
           onContextMenu={() => handleContextMenu(cell)}
         >
@@ -264,11 +277,7 @@ export const DataTableBody = <TData,>({
     return rows.map((row) => renderRow(row));
   };
 
-  const tableBody = (
-    <TableBody onKeyDown={handleCellsKeyDown} ref={tableRef}>
-      {renderRows()}
-    </TableBody>
-  );
+  const tableBody = <TableBody ref={tableRef}>{renderRows()}</TableBody>;
 
   return (
     <>

package/src/components/data-table/row-viewer-panel/__tests__/row-viewer.test.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Provider } from "jotai";
 import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -17,6 +17,29 @@ const renderWithProviders = (component: React.ReactNode) => {
 };
 
 describe("RowExpandedPanel", () => {
+  it("preserves Space activation on navigation buttons", async () => {
+    const select = vi.fn();
+    const navigate = vi.fn();
+    renderWithProviders(
+      <RowViewerPanel
+        rowIdx={0}
+        setRowIdx={navigate}
+        totalRows={2}
+        fieldTypes={[["name", ["string", "string"]]]}
+        getRow={async () => ({ rows: [{ name: "Alice" }] })}
+        isSelectable={true}
+        isRowSelected={false}
+        handleRowSelectionChange={select}
+      />,
+    );
+    await screen.findByText("Alice");
+    const next = screen.getByRole("button", { name: "Next row" });
+    expect(fireEvent.keyDown(next, { key: " " })).toBe(true);
+    expect(select).not.toHaveBeenCalled();
+    fireEvent.click(next);
+    expect(navigate).toHaveBeenCalledExactlyOnceWith(1);
+  });
+
   const mockFieldTypes: FieldTypesWithExternalType = [
     ["name", ["string", "string"]],
     ["age", ["number", "number"]],

package/src/components/data-table/row-viewer-panel/row-viewer.tsx

@@ -34,8 +34,10 @@ import { DelayMount } from "@/components/utils/delay-mount";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { Banner, ErrorBanner } from "@/plugins/impl/common/error-banner";
 import type { GetRowResult } from "@/plugins/impl/DataTablePlugin";
+import { Objects } from "@/utils/objects";
 import { NAMELESS_COLUMN_PREFIX, renderCellValue } from "../columns";
 import { prettifyRowCount } from "../pagination";
+import { isInteractiveTarget } from "../range-focus/use-cell-range-selection";
 import {
   type FieldTypesWithExternalType,
   INDEX_COLUMN_NAME,
@@ -88,8 +90,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
     handleRowSelectionChange?.((prev) => {
       if (isRowSelected) {
         // Remove this row from selection
-        const { [rowIdx]: removedRow, ...rest } = prev;
-        return rest;
+        return Objects.filter(prev, (_, key) => key !== String(rowIdx));
       }
       // Add this row to selection
       return { ...prev, [rowIdx]: true };
@@ -102,8 +103,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
   }
 
   const handleKeyDown = (e: KeyboardEvent) => {
-    // Don't intercept keys when typing in an input
-    if (e.target instanceof HTMLInputElement) {
+    if (e.defaultPrevented || isInteractiveTarget(e)) {
       return;
     }
     switch (e.key) {

package/src/components/data-table/search-highlight.tsx

@@ -0,0 +1,79 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { ReactNode } from "react";
+
+/** Half-open `[start, end)` offsets into a string. */
+export type MatchRange = readonly [start: number, end: number];
+
+/**
+ * Build the pattern that finds `query` in a display string. Returns
+ * `undefined` for an empty query. The query is matched as a literal,
+ * case-insensitive substring, which mirrors how the backend selects rows.
+ * The `u` flag selects Unicode simple case folding, the same folding the
+ * backend regex engines use.
+ */
+export function buildHighlightPattern(query?: string): RegExp | undefined {
+  if (!query) {
+    return undefined;
+  }
+  const escaped = query.replace(/[$()*+.?[\\\]^{|}]/g, "\\$&");
+  return new RegExp(escaped, "giu");
+}
+
+/** Offsets of every match of `pattern` in `text`. */
+export function findMatchRanges(text: string, pattern?: RegExp): MatchRange[] {
+  if (!pattern) {
+    return [];
+  }
+  const ranges: MatchRange[] = [];
+  for (const match of text.matchAll(pattern)) {
+    ranges.push([match.index, match.index + match[0].length]);
+  }
+  return ranges;
+}
+
+/**
+ * Wrap the parts of `text` covered by `ranges` in `<mark>` elements.
+ * `ranges` are offsets into a larger string in which `text` starts at
+ * `offset`, so one set of ranges can be shared across adjacent segments.
+ * Returns `text` unchanged when no range overlaps it.
+ */
+export function highlightRanges(
+  text: string,
+  ranges: readonly MatchRange[],
+  offset = 0,
+): ReactNode {
+  const segments: ReactNode[] = [];
+  let cursor = 0;
+  for (const [rangeStart, rangeEnd] of ranges) {
+    const start = Math.max(rangeStart - offset, cursor);
+    const end = Math.min(rangeEnd - offset, text.length);
+    if (end <= start) {
+      continue;
+    }
+    if (start > cursor) {
+      segments.push(text.slice(cursor, start));
+    }
+    segments.push(
+      <mark key={start} className="bg-search-highlight text-inherit">
+        {text.slice(start, end)}
+      </mark>,
+    );
+    cursor = end;
+  }
+  if (segments.length === 0) {
+    return text;
+  }
+  if (cursor < text.length) {
+    segments.push(text.slice(cursor));
+  }
+  return segments;
+}
+
+/**
+ * Wrap every match of `pattern` in `text` in a `<mark>` element. Returns
+ * `text` unchanged when `pattern` is absent or does not match.
+ */
+export function highlightMatches(text: string, pattern?: RegExp): ReactNode {
+  return highlightRanges(text, findMatchRanges(text, pattern));
+}

package/src/components/data-table/types.ts

@@ -6,6 +6,7 @@ import type { DataType } from "@/core/kernel/messages";
 declare module "@tanstack/react-table" {
   interface TableMeta<TData extends RowData> {
     rawData?: TData[]; // raw data for filtering/copying (present only if format_mapping is provided)
+    highlightPattern?: RegExp; // built from the committed search query that produced the current rows
   }
 }
 

package/src/components/data-table/url-detector.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { marked } from "marked";
-import { useState } from "react";
+import { Fragment, type ReactNode, useState } from "react";
 import { MarkdownRenderer } from "@/components/markdown/markdown-renderer";
 import {
   Popover,
@@ -10,13 +10,20 @@ import {
 } from "@/components/ui/popover";
 import { Events } from "@/utils/events";
 import type { ContentPart } from "@/utils/url-parser";
+import { findMatchRanges, highlightRanges } from "./search-highlight";
 
-const ImageWithFallback = ({ url }: { url: string }) => {
+const ImageWithFallback = ({
+  url,
+  fallbackLabel,
+}: {
+  url: string;
+  fallbackLabel?: ReactNode;
+}) => {
   const [error, setError] = useState(false);
   const [open, setOpen] = useState(false);
 
   if (error) {
-    return <URLAnchor url={url} />;
+    return <URLAnchor url={url}>{fallbackLabel}</URLAnchor>;
   }
 
   return (
@@ -93,21 +100,54 @@ export const MarkdownUrlDetector = ({
   return <UrlDetector parts={parts} />;
 };
 
-export const UrlDetector = ({ parts }: { parts: ContentPart[] }) => {
+export const UrlDetector = ({
+  parts,
+  highlightPattern,
+}: {
+  parts: ContentPart[];
+  highlightPattern?: RegExp;
+}) => {
+  // Match against the whole string so a query that spans a text part and
+  // a link is still marked. Each part then takes its slice of the ranges.
+  const ranges = highlightPattern
+    ? findMatchRanges(parts.map(partText).join(""), highlightPattern)
+    : [];
+
+  let offset = 0;
   const markup = parts.map((part, idx) => {
+    const text = partText(part);
+    const label = highlightRanges(text, ranges, offset);
+    offset += text.length;
+
     if (part.type === "url") {
-      return <URLAnchor key={idx} url={part.url} />;
+      return (
+        <URLAnchor key={idx} url={part.url}>
+          {label}
+        </URLAnchor>
+      );
     }
     if (part.type === "image") {
-      return <ImageWithFallback key={idx} url={part.url} />;
+      return (
+        <ImageWithFallback key={idx} url={part.url} fallbackLabel={label} />
+      );
     }
-    return part.value;
+    return <Fragment key={idx}>{label}</Fragment>;
   });
 
   return markup;
 };
 
-const URLAnchor = ({ url }: { url: string }) => {
+function partText(part: ContentPart): string {
+  return part.type === "text" ? part.value : part.url;
+}
+
+const URLAnchor = ({
+  url,
+  children,
+}: {
+  url: string;
+  children?: ReactNode;
+}) => {
   return (
     <a
       href={url}
@@ -116,7 +156,7 @@ const URLAnchor = ({ url }: { url: string }) => {
       onClick={Events.stopPropagation()}
       className="text-link hover:underline"
     >
-      {url}
+      {children ?? url}
     </a>
   );
 };