@marimo-team/frontend 0.25.3-dev12 → 0.25.3-dev122

package/src/components/data-table/__tests__/columns.test.tsx

@@ -14,6 +14,7 @@ import {
   renderCellValue,
 } from "../columns";
 import { getMimeValues, isMimeValue, MimeCell } from "../mime-cell";
+import { buildHighlightPattern } from "../search-highlight";
 import type { FieldTypesWithExternalType } from "../types";
 import { uniformSample } from "../uniformSample";
 import { UrlDetector } from "../url-detector";
@@ -240,6 +241,7 @@ describe("generateColumns", () => {
     // "age" is a number column — should auto right-align
     // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[1].cell as any)({
+      table: { options: { meta: {} } },
       column: {
         columnDef: columns[1],
       },
@@ -251,6 +253,7 @@ describe("generateColumns", () => {
     // "name" is a string column — should remain left-aligned
     // oxlint-disable-next-line typescript/no-explicit-any
     const nameCell = (columns[0].cell as any)({
+      table: { options: { meta: {} } },
       column: {
         columnDef: columns[0],
       },
@@ -271,6 +274,7 @@ describe("generateColumns", () => {
     // "age" is numeric but explicitly set to left
     // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[1].cell as any)({
+      table: { options: { meta: {} } },
       column: {
         columnDef: columns[1],
       },
@@ -311,6 +315,7 @@ describe("generateColumns", () => {
     // Assuming getCellStyleClass is a function that returns a class name
     // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[0].cell as any)({
+      table: { options: { meta: {} } },
       column: {
         columnDef: columns[0],
       },
@@ -1359,3 +1364,103 @@ test("column_widths sets fixed size and meta.width", () => {
   expect(b?.size).toBeUndefined();
   expect(b?.meta?.width).toBeUndefined();
 });
+
+describe("renderCellValue with highlightPattern", () => {
+  const createColumn = (
+    dataType: "string" | "number" | "boolean" | "date",
+    dtype = "object",
+  ) =>
+    ({
+      id: "col",
+      columnDef: { meta: { dataType, dtype } },
+      getColumnFormatting: () => undefined,
+      getColumnWrapping: () => undefined,
+      applyColumnFormatting: (value: unknown) => value,
+    }) as unknown as Column<unknown>;
+
+  const renderCell = (
+    column: Column<unknown>,
+    value: unknown,
+    highlightQuery: string,
+  ) =>
+    render(
+      <I18nProvider locale="en-US">
+        <TooltipProvider>
+          {renderCellValue({
+            column,
+            renderValue: () => value,
+            getValue: () => value,
+            selectCell: undefined,
+            cellStyles: "",
+            highlightPattern: buildHighlightPattern(highlightQuery),
+          })}
+        </TooltipProvider>
+      </I18nProvider>,
+    );
+
+  const markTexts = (container: HTMLElement) =>
+    [...container.querySelectorAll("mark")].map((m) => m.textContent);
+
+  it("marks a match in a string cell", () => {
+    const { container } = renderCell(
+      createColumn("string"),
+      "Alice Smith",
+      "smi",
+    );
+    expect(markTexts(container)).toEqual(["Smi"]);
+  });
+
+  it("marks only the middle text when the string has edge whitespace", () => {
+    const { container } = renderCell(createColumn("string"), "  a b  ", " ");
+    expect(markTexts(container)).toEqual([" "]);
+    const edgeMarkers = container.querySelectorAll("span[aria-label]");
+    expect(edgeMarkers).toHaveLength(2);
+    for (const marker of edgeMarkers) {
+      expect(marker.querySelector("mark")).toBeNull();
+    }
+  });
+
+  it("marks a match in the locale display of a number", () => {
+    const { container } = renderCell(createColumn("number"), 1234.5, "234");
+    expect(markTexts(container)).toEqual(["234"]);
+    expect(container.textContent).toBe("1,234.5");
+  });
+
+  it("does not mark a number when the locale display hides the raw match", () => {
+    const { container } = renderCell(createColumn("number"), 1234, "1234");
+    expect(markTexts(container)).toEqual([]);
+    expect(container.textContent).toBe("1,234");
+  });
+
+  it("marks a boolean cell", () => {
+    const { container } = renderCell(createColumn("boolean"), false, "false");
+    expect(markTexts(container)).toEqual(["False"]);
+  });
+
+  it("marks a date cell by its display string", () => {
+    const { container } = renderCell(
+      createColumn("date", "date"),
+      new Date(2026, 0, 15),
+      "2026",
+    );
+    expect(markTexts(container)).toEqual(["2026"]);
+  });
+
+  it("renders no mark for an empty query", () => {
+    for (const [column, value] of [
+      [createColumn("string"), "Alice"],
+      [createColumn("number"), 12],
+      [createColumn("boolean"), false],
+      [createColumn("date", "date"), new Date(2026, 0, 15)],
+    ] as const) {
+      const { container } = renderCell(column, value, "");
+      expect(markTexts(container)).toEqual([]);
+    }
+  });
+
+  it("renders no mark in the trigger of a long-string popout", () => {
+    const value = "x".repeat(60);
+    const { container } = renderCell(createColumn("string"), value, "xxx");
+    expect(markTexts(container)).toEqual([]);
+  });
+});

package/src/components/data-table/__tests__/context-menu-interaction.test.tsx

@@ -0,0 +1,130 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { type Cell, createTable, getCoreRowModel } from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { useRef } from "react";
+import { expect, it, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { DataTableContextMenu } from "../context-menu";
+
+SetupMocks.resizeObserver();
+
+const rows = [{ value: "first" }, { value: "second" }];
+const columns = [
+  { accessorKey: "value", meta: { filterType: "text" as const } },
+];
+
+function createCells() {
+  const table = createTable({
+    data: rows,
+    columns,
+    locale: "en-US",
+    getCoreRowModel: getCoreRowModel(),
+    onColumnFiltersChange: () => undefined,
+    state: {},
+    onStateChange: () => undefined,
+    renderFallbackValue: null,
+  });
+  return table.getRowModel().rows.map((row) => row.getAllCells()[0]);
+}
+
+function Harness({ cells }: { cells: Cell<(typeof rows)[number], unknown>[] }) {
+  const contextMenuRef = useRef<Cell<(typeof rows)[number], unknown> | null>(
+    null,
+  );
+  const tableRef = useRef<HTMLTableSectionElement>(null);
+  const tableBody = (
+    <tbody ref={tableRef}>
+      <tr>
+        <td>empty</td>
+      </tr>
+      {cells.map((cell) => {
+        return (
+          <tr key={cell.id}>
+            <td
+              data-cell-id={cell.id}
+              onContextMenu={() => {
+                contextMenuRef.current = cell;
+              }}
+            >
+              {String(cell.getValue())}
+            </td>
+          </tr>
+        );
+      })}
+    </tbody>
+  );
+  return (
+    <table>
+      <DataTableContextMenu
+        contextMenuRef={contextMenuRef}
+        tableRef={tableRef}
+        tableBody={tableBody}
+        copyAllCells={() => undefined}
+      />
+    </table>
+  );
+}
+
+it("filters the latest right-clicked cell when the menu is already open", () => {
+  const onFilter = vi.fn();
+  const table = createTable({
+    data: rows,
+    columns,
+    locale: "en-US",
+    getCoreRowModel: getCoreRowModel(),
+    onColumnFiltersChange: onFilter,
+    state: {},
+    onStateChange: () => undefined,
+    renderFallbackValue: null,
+  });
+  render(
+    <Harness
+      cells={table.getRowModel().rows.map((row) => row.getAllCells()[0])}
+    />,
+  );
+
+  const firstCell = screen.getByText("first");
+  const secondCell = screen.getByText("second");
+  fireEvent.contextMenu(firstCell);
+  expect(firstCell).toHaveClass("bg-(--green-4)");
+  expect(
+    screen.getByRole("menuitem", { name: "Filter by this value" }),
+  ).toBeInTheDocument();
+  fireEvent.contextMenu(secondCell);
+  expect(firstCell).not.toHaveClass("bg-(--green-4)");
+  expect(secondCell).toHaveClass("bg-(--green-4)");
+  fireEvent.click(
+    screen.getByRole("menuitem", { name: "Filter by this value" }),
+  );
+  expect(firstCell).not.toHaveClass("bg-(--green-4)");
+  expect(secondCell).not.toHaveClass("bg-(--green-4)");
+
+  const update = onFilter.mock.calls.at(-1)?.[0];
+  expect(update([])).toEqual([
+    {
+      id: "value",
+      value: { type: "text", operator: "equals", text: "second" },
+    },
+  ]);
+});
+
+it("does not reuse a previous cell after the menu closes", () => {
+  render(<Harness cells={createCells()} />);
+
+  const firstCell = screen.getByText("first");
+  fireEvent.contextMenu(firstCell);
+  expect(firstCell).toHaveClass("bg-(--green-4)");
+  fireEvent.keyDown(document.activeElement ?? document.body, {
+    key: "Escape",
+  });
+  expect(firstCell).not.toHaveClass("bg-(--green-4)");
+  expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+
+  // Right-clicking outside any data cell must not resurrect the old one
+  fireEvent.contextMenu(screen.getByText("empty"));
+  expect(firstCell).not.toHaveClass("bg-(--green-4)");
+  expect(
+    screen.queryByRole("menuitem", { name: "Filter by this value" }),
+  ).not.toBeInTheDocument();
+});

package/src/components/data-table/__tests__/date-popover.test.tsx

@@ -0,0 +1,72 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { I18nProvider } from "react-aria";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { DatePopover } from "../date-popover";
+
+vi.mock("@/components/ui/tooltip", () => ({
+  Tooltip: ({ content }: { content: ReactNode }) => content,
+}));
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("DatePopover", () => {
+  it.each([0, 123])(
+    "updates the local timezone and time on rerender with %i milliseconds",
+    (milliseconds) => {
+      const NativeDateTimeFormat = Intl.DateTimeFormat;
+      let systemTimezone = "America/Los_Angeles";
+      vi.spyOn(Intl, "DateTimeFormat").mockImplementation(
+        function (locales, options) {
+          return new NativeDateTimeFormat(locales, {
+            ...options,
+            timeZone: options?.timeZone ?? systemTimezone,
+          });
+        },
+      );
+
+      const date = new Date("2026-01-15T12:00:00Z");
+      date.setUTCMilliseconds(milliseconds);
+      const content = () => (
+        <I18nProvider locale="en-US">
+          <DatePopover date={date} type="datetime">
+            timestamp
+          </DatePopover>
+        </I18nProvider>
+      );
+      const { rerender } = render(content());
+      const previousTime =
+        screen.getByText(systemTimezone).nextElementSibling?.textContent;
+      const utcTime = screen.getByText("UTC").nextElementSibling?.textContent;
+
+      systemTimezone = "Asia/Tokyo";
+      rerender(content());
+
+      const expected = new NativeDateTimeFormat("en-US", {
+        timeZone: systemTimezone,
+        ...(milliseconds
+          ? {
+              year: "numeric",
+              month: "2-digit",
+              day: "2-digit",
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit",
+              fractionalSecondDigits: 3,
+            }
+          : { dateStyle: "long", timeStyle: "medium" }),
+      }).format(date);
+      expect(screen.queryByText("America/Los_Angeles")).toBeNull();
+      expect(
+        screen.getByText(systemTimezone).nextElementSibling?.textContent,
+      ).toBe(expected);
+      expect(expected).not.toBe(previousTime);
+      expect(screen.getByText("UTC").nextElementSibling?.textContent).toBe(
+        utcTime,
+      );
+    },
+  );
+});

package/src/components/data-table/__tests__/export-actions.test.tsx

@@ -531,6 +531,23 @@ describe("ExportActions dialog", () => {
     expect(downloadByURL).not.toHaveBeenCalled();
   });
 
+  it("does not revive an earlier source failure when switching back", async () => {
+    downloadAs.mockRejectedValueOnce(new Error("First source failed"));
+    const { rerenderExportActions } = renderExportActions({
+      metadataSource: "first",
+    });
+    await openDialog();
+    fireEvent.click(screen.getByRole("button", { name: "Download CSV" }));
+    expect(await screen.findByRole("alert")).toHaveTextContent(
+      "First source failed",
+    );
+
+    rerenderExportActions({ metadataSource: "second" });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    rerenderExportActions({ metadataSource: "first" });
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
   async function startGeoParquetInstall(strictMode = false) {
     const getExportMetadata = vi.fn().mockResolvedValue(geometryMetadata);
     downloadAs.mockResolvedValueOnce({
@@ -914,6 +931,94 @@ describe("ExportActions dialog", () => {
     expect(within(dialog).queryByRole("group")).not.toBeInTheDocument();
   });
 
+  it("describes format options with their description and current settings", async () => {
+    renderExportActions({
+      getExportMetadata: vi.fn().mockResolvedValue(geometryMetadata),
+    });
+    await openDialog();
+    await screen.findByRole("button", { name: "GeoParquet options" });
+
+    for (const [label, description] of [
+      ["CSV", "Comma-separated values Comma · UTF-8"],
+      ["TSV", "Best for Excel and Google Sheets UTF-8"],
+      ["JSON", "Raw JSON data Escapes non-ASCII"],
+      ["GeoParquet", "Parquet with geometry and CRS metadata location"],
+      ["GeoJSON", "Geometry in longitude and latitude location"],
+    ]) {
+      expect(
+        screen.getByRole("button", { name: `${label} options` }),
+      ).toHaveAccessibleDescription(description);
+    }
+
+    const csvOptions = screen.getByRole("button", { name: "CSV options" });
+    fireEvent.click(csvOptions);
+    fireEvent.change(screen.getByRole("combobox", { name: "Delimiter" }), {
+      target: { value: ";" },
+    });
+    expect(csvOptions).toHaveAccessibleDescription(
+      "Comma-separated values Semicolon · UTF-8",
+    );
+    fireEvent.click(csvOptions);
+    expect(csvOptions).toHaveAccessibleDescription(
+      "Comma-separated values Semicolon · UTF-8",
+    );
+  });
+
+  it.each([
+    ["CSV", "Comma-separated values"],
+    ["TSV", "Best for Excel and Google Sheets"],
+    ["JSON", "Raw JSON data"],
+    ["GeoParquet", "Parquet with geometry and CRS metadata"],
+    ["GeoJSON", "Geometry in longitude and latitude"],
+  ])(
+    "toggles %s options from the row label and description",
+    async (label, description) => {
+      renderExportActions({
+        getExportMetadata: vi.fn().mockResolvedValue(geometryMetadata),
+      });
+      await openDialog();
+      const toggle = await screen.findByRole("button", {
+        name: `${label} options`,
+      });
+
+      fireEvent.click(screen.getByText(label));
+      expect(toggle).toHaveAttribute("aria-expanded", "true");
+      expect(
+        screen.getByRole("group", { name: `${label} options` }),
+      ).toBeInTheDocument();
+
+      fireEvent.click(screen.getByText(description));
+      expect(toggle).toHaveAttribute("aria-expanded", "false");
+      expect(
+        screen.queryByRole("group", { name: `${label} options` }),
+      ).not.toBeInTheDocument();
+    },
+  );
+
+  it("keeps download and copy independent of row expansion", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue({
+        ok: true,
+        text: vi.fn().mockResolvedValue("name,value\n"),
+      }),
+    );
+    renderExportActions();
+    await openDialog();
+    const toggle = screen.getByRole("button", { name: "CSV options" });
+
+    fireEvent.click(screen.getByRole("button", { name: "Download CSV" }));
+    await waitFor(() => expect(downloadByURL).toHaveBeenCalled());
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+
+    fireEvent.click(screen.getByText("CSV"));
+    fireEvent.click(screen.getByRole("button", { name: "Copy CSV" }));
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+    await waitFor(() => {
+      expect(copyToClipboard).toHaveBeenCalledWith("name,value\n");
+    });
+  });
+
   it("sends only changed CSV options with a download", async () => {
     renderExportActions();
     await openDialog();

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

@@ -0,0 +1,109 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  buildHighlightPattern,
+  findMatchRanges,
+  highlightMatches,
+  highlightRanges,
+} from "../search-highlight";
+
+function highlight(text: string, query: string) {
+  return highlightMatches(text, buildHighlightPattern(query));
+}
+
+function marksOf(node: React.ReactNode) {
+  const { container } = render(<span>{node}</span>);
+  return {
+    container,
+    marks: [...container.querySelectorAll("mark")].map((m) => m.textContent),
+  };
+}
+
+describe("buildHighlightPattern", () => {
+  it("returns undefined for an empty or missing query", () => {
+    expect(buildHighlightPattern("")).toBeUndefined();
+    expect(buildHighlightPattern(undefined)).toBeUndefined();
+  });
+
+  it("escapes regex metacharacters so the query matches literally", () => {
+    const { marks } = marksOf(highlight("a.b a-b (x)", ".b"));
+    expect(marks).toEqual([".b"]);
+    expect(marksOf(highlight("f(x)", "(x)")).marks).toEqual(["(x)"]);
+    expect(marksOf(highlight("C and C++", "c++")).marks).toEqual(["C++"]);
+  });
+});
+
+describe("highlightMatches", () => {
+  it("returns the input unchanged without a pattern", () => {
+    expect(highlightMatches("Alice Smith", undefined)).toBe("Alice Smith");
+  });
+
+  it("returns the input unchanged when there is no match", () => {
+    expect(highlight("Alice Smith", "zzz")).toBe("Alice Smith");
+  });
+
+  it("returns the input unchanged when the query is longer than the text", () => {
+    expect(highlight("ab", "abc")).toBe("ab");
+  });
+
+  it("wraps a single match and keeps the surrounding text", () => {
+    const { container, marks } = marksOf(highlight("Alice Smith", "ce S"));
+    expect(marks).toEqual(["ce S"]);
+    expect(container.textContent).toBe("Alice Smith");
+  });
+
+  it("matches case-insensitively and keeps the original casing", () => {
+    const { marks } = marksOf(highlight("Alice Smith", "smi"));
+    expect(marks).toEqual(["Smi"]);
+  });
+
+  it("wraps every occurrence", () => {
+    const { container, marks } = marksOf(highlight("a-A-a", "a"));
+    expect(marks).toEqual(["a", "A", "a"]);
+    expect(container.textContent).toBe("a-A-a");
+  });
+
+  it("produces no empty segments for matches at the edges", () => {
+    const segments = highlight("xax", "x") as React.ReactNode[];
+    expect(Array.isArray(segments)).toBe(true);
+    expect(segments).toHaveLength(3);
+    expect(segments[1]).toBe("a");
+  });
+
+  it("is safe to reuse one global pattern across calls", () => {
+    const pattern = buildHighlightPattern("a");
+    expect(marksOf(highlightMatches("aa", pattern)).marks).toEqual(["a", "a"]);
+    expect(marksOf(highlightMatches("aa", pattern)).marks).toEqual(["a", "a"]);
+  });
+});
+
+describe("Unicode case folding", () => {
+  it("folds the Kelvin sign to k like the backend engines", () => {
+    expect(marksOf(highlight("K", "k")).marks).toEqual(["K"]);
+  });
+
+  it("folds every Greek sigma form", () => {
+    expect(marksOf(highlight("ΟΣ ος οσ", "σ")).marks).toEqual(["Σ", "ς", "σ"]);
+  });
+});
+
+describe("highlightRanges", () => {
+  it("applies shared ranges to a segment at an offset", () => {
+    const ranges = findMatchRanges(
+      "see https://x",
+      buildHighlightPattern("see https"),
+    );
+    expect(ranges).toEqual([[0, 9]]);
+    const { marks: textMarks } = marksOf(highlightRanges("see ", ranges, 0));
+    expect(textMarks).toEqual(["see "]);
+    const { marks: linkMarks } = marksOf(
+      highlightRanges("https://x", ranges, 4),
+    );
+    expect(linkMarks).toEqual(["https"]);
+  });
+
+  it("returns the segment unchanged when no range overlaps it", () => {
+    expect(highlightRanges("zzz", [[10, 12]], 0)).toBe("zzz");
+  });
+});

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

@@ -2,6 +2,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { parseContent } from "@/utils/url-parser";
+import { buildHighlightPattern } from "../search-highlight";
 import { isMarkdown, UrlDetector } from "../url-detector";
 
 describe("UrlDetector", () => {
@@ -201,3 +202,76 @@ describe("isMarkdown", () => {
     expect(isMarkdown("Visit [marimo](https://marimo.io)")).toBe(true);
   });
 });
+
+describe("UrlDetector with highlightPattern", () => {
+  it("wraps a text match in a mark", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("Alice Smith")}
+        highlightPattern={buildHighlightPattern("smi")}
+      />,
+    );
+    const marks = container.querySelectorAll("mark");
+    expect(marks).toHaveLength(1);
+    expect(marks[0].textContent).toBe("Smi");
+    expect(container.textContent).toBe("Alice Smith");
+  });
+
+  it("wraps a match inside a link label", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("see https://marimo.io/docs")}
+        highlightPattern={buildHighlightPattern("marimo")}
+      />,
+    );
+    const link = container.querySelector("a");
+    expect(link).not.toBeNull();
+    const mark = link?.querySelector("mark");
+    expect(mark?.textContent).toBe("marimo");
+    expect(link).toHaveAttribute("href", "https://marimo.io/docs");
+  });
+
+  it("renders no mark for an empty query", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("Alice Smith")}
+        highlightPattern={buildHighlightPattern("")}
+      />,
+    );
+    expect(container.querySelector("mark")).toBeNull();
+  });
+});
+
+describe("UrlDetector highlight across part boundaries", () => {
+  it("marks a query that spans a text part and a link", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("see https://marimo.io/docs")}
+        highlightPattern={buildHighlightPattern("see https")}
+      />,
+    );
+    const marks = [...container.querySelectorAll("mark")].map(
+      (m) => m.textContent,
+    );
+    expect(marks).toEqual(["see ", "https"]);
+    const link = container.querySelector("a");
+    expect(link?.querySelector("mark")?.textContent).toBe("https");
+    expect(link).toHaveAttribute("href", "https://marimo.io/docs");
+    expect(container.textContent).toBe("see https://marimo.io/docs");
+  });
+
+  it("marks the fallback link when an image fails to load", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("https://example.com/image.png")}
+        highlightPattern={buildHighlightPattern("image")}
+      />,
+    );
+    const img = container.querySelector("img");
+    expect(img).not.toBeNull();
+    fireEvent.error(img as HTMLImageElement);
+    const link = container.querySelector("a");
+    expect(link).toHaveAttribute("href", "https://example.com/image.png");
+    expect(link?.querySelector("mark")?.textContent).toBe("image");
+  });
+});

package/src/components/data-table/cell-selection/feature.ts

@@ -98,7 +98,7 @@ export const CellSelectionFeature: TableFeature = {
           ]);
         } else {
           // This cell becomes the single selected cell
-          table.setCellSelection((_) => [
+          table.setCellSelection(() => [
             {
               rowId: rowId,
               columnName: columnName,
@@ -115,7 +115,7 @@ export const CellSelectionFeature: TableFeature = {
           );
         } else {
           // Clear the selection
-          table.setCellSelection((_) => []);
+          table.setCellSelection(() => []);
         }
       }
     };