@marimo-team/frontend 0.23.9-dev2 → 0.23.9-dev21

package/src/components/editor/output/MarimoTracebackOutput.tsx

@@ -5,17 +5,13 @@ import { useAtomValue } from "jotai";
 import {
   BugPlayIcon,
   ChevronDown,
+  ChevronRight,
   CopyIcon,
   ExternalLinkIcon,
   MessageCircleIcon,
   SearchIcon,
 } from "lucide-react";
 import { type JSX, useState } from "react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -36,13 +32,17 @@ import { isWasm } from "@/core/wasm/utils";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { sanitizeHtml } from "@/plugins/core/sanitize-html";
 import { copyToClipboard } from "@/utils/copy";
+import {
+  containsMangledLocal,
+  splitMangledLocals,
+} from "@/utils/local-variables";
 import {
   elementContainsMarimoCellFile,
   extractAllTracebackInfo,
   getTracebackInfo,
 } from "@/utils/traceback";
-import { cn } from "../../../utils/cn";
 import { AIFixButton } from "../errors/auto-fix";
+import { MangledSegments } from "../errors/mangled-local-chip";
 import { CellLinkTraceback } from "../links/cell-link";
 import type { OnRefactorWithAI } from "../Output";
 
@@ -52,8 +52,6 @@ interface Props {
   onRefactorWithAI?: OnRefactorWithAI;
 }
 
-const KEY = "item";
-
 /**
  * List of errors due to violations of Marimo semantics.
  */
@@ -64,9 +62,12 @@ export const MarimoTracebackOutput = ({
 }: Props): JSX.Element => {
   const htmlTraceback = renderHTML({
     html: traceback,
-    additionalReplacements: [replaceTracebackFilenames, replaceTracebackPrefix],
+    additionalReplacements: [
+      replaceTracebackFilenames,
+      replaceTracebackPrefix,
+      replaceMangledLocal,
+    ],
   });
-  const [expanded, setExpanded] = useState(true);
 
   const lastTracebackLine = lastLine(traceback);
   const aiEnabled = useAtomValue(aiEnabledAtom);
@@ -86,6 +87,8 @@ export const MarimoTracebackOutput = ({
 
   const showSearch = !isStaticNotebook();
 
+  const [isOpen, setIsOpen] = useState(true);
+
   const handleRefactorWithAI = (triggerImmediately: boolean) => {
     onRefactorWithAI?.({
       prompt: `My code gives the following error:\n\n${lastTracebackLine}`,
@@ -93,32 +96,29 @@ export const MarimoTracebackOutput = ({
     });
   };
 
-  const [error, errorMessage] = lastTracebackLine.split(":", 2);
-
   return (
     <div className="flex flex-col gap-2 min-w-full w-fit">
-      <Accordion type="single" collapsible={true} value={expanded ? KEY : ""}>
-        <AccordionItem value={KEY} className="border-none">
-          <div
-            className="flex gap-2 h-10 px-2 hover:bg-muted rounded-sm select-none items-center cursor-pointer transition-all"
-            onClick={() => setExpanded((prev) => !prev)}
-          >
-            <ChevronDown
-              className={cn(
-                "h-4 w-4 text-muted-foreground transition-transform duration-200 shrink-0",
-                expanded ? "rotate-180" : "rotate-0",
-              )}
-            />
-            <div className="text-sm inline font-mono">
-              <span className="text-destructive">{error || "Error"}:</span>{" "}
-              {errorMessage}
-            </div>
-          </div>
-          <AccordionContent className="text-muted-foreground px-4 pt-2 text-xs overflow-auto">
-            {htmlTraceback}
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        aria-label={isOpen ? "Collapse traceback" : "Expand traceback"}
+        className="self-start flex items-center gap-1 pt-2 text-muted-foreground/70 hover:text-muted-foreground transition-colors"
+      >
+        {isOpen ? (
+          <ChevronDown className="h-3 w-3" />
+        ) : (
+          <ChevronRight className="h-3 w-3" />
+        )}
+        <span className="text-[0.6875rem] uppercase tracking-wider">
+          Traceback
+        </span>
+      </button>
+      {isOpen && (
+        <div className="text-muted-foreground pr-4 text-xs overflow-auto">
+          {htmlTraceback}
+        </div>
+      )}
       <div className="flex gap-2">
         {showAIFix && (
           <AIFixButton
@@ -249,6 +249,23 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
   }
 };
 
+/**
+ * Replace any cell-local mangled name (`_cell_<id>_<name>`) inside a text
+ * node with a {@link MangledLocalChip}. The mangled name appears in both
+ * the final `NameError:` line and inside compiled-cell source lines because
+ * the compiler rewrites underscore-prefixed references at AST-visit time.
+ */
+export const replaceMangledLocal = (domNode: DOMNode) => {
+  if (!(domNode instanceof Text) || !domNode.nodeValue) {
+    return;
+  }
+  if (!containsMangledLocal(domNode.nodeValue)) {
+    return;
+  }
+  const segments = splitMangledLocals(domNode.nodeValue);
+  return <MangledSegments segments={segments} />;
+};
+
 export const replaceTracebackPrefix = (domNode: DOMNode) => {
   if (
     domNode instanceof Text &&

package/src/components/ui/number-field.tsx

@@ -15,10 +15,17 @@ import { maxFractionalDigits } from "@/utils/numbers";
 export interface NumberFieldProps extends AriaNumberFieldProps {
   placeholder?: string;
   variant?: "default" | "xs";
+  /**
+   * Fires on every keystroke with the raw text currently in the input.
+   * React-aria's `onChange` only fires on commit (blur/Enter/stepper); use this
+   * when callers need to peek at the in-progress value, e.g. to enable an Apply
+   * button while the user is still typing.
+   */
+  onInputText?: (text: string) => void;
 }
 
 export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
-  ({ placeholder, variant = "default", ...props }, ref) => {
+  ({ placeholder, variant = "default", onInputText, ...props }, ref) => {
     const { locale } = useLocale();
     return (
       <AriaNumberField
@@ -48,6 +55,11 @@ export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
                 e.stopPropagation();
               }
             }}
+            onInput={
+              onInputText
+                ? (e) => onInputText(e.currentTarget.value)
+                : undefined
+            }
             className={cn(
               "flex-1",
               "w-full",

package/src/core/cells/__tests__/actions.test.ts

@@ -0,0 +1,48 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { scrollAndHighlightCell } from "@/components/editor/links/cell-link";
+import { notebookAtom } from "@/core/cells/cells";
+import type { CellId } from "@/core/cells/ids";
+import { createCellRuntimeState } from "@/core/cells/types";
+import { store } from "@/core/state/jotai";
+import { notebookScrollToRunning } from "../actions";
+
+vi.mock("@/components/editor/links/cell-link", () => ({
+  scrollAndHighlightCell: vi.fn(),
+}));
+
+describe("notebookScrollToRunning", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    store.set(notebookAtom, MockNotebook.notebookState({ cellData: {} }));
+  });
+
+  it("scrolls to the first running cell in notebook order", () => {
+    const runtimeOnlyCellId = "runtime-only" as CellId;
+    const idleCellId = "idle-cell" as CellId;
+    const runningCellId = "running-cell" as CellId;
+
+    const notebook = MockNotebook.notebookState({
+      cellData: {
+        [idleCellId]: {},
+        [runningCellId]: {},
+      },
+      cellRuntime: {
+        [idleCellId]: { status: "idle" },
+        [runningCellId]: { status: "running" },
+      },
+    });
+    notebook.cellRuntime = {
+      [runtimeOnlyCellId]: createCellRuntimeState({ status: "running" }),
+      ...notebook.cellRuntime,
+    };
+    store.set(notebookAtom, notebook);
+
+    notebookScrollToRunning();
+
+    expect(scrollAndHighlightCell).toHaveBeenCalledOnce();
+    expect(scrollAndHighlightCell).toHaveBeenCalledWith(runningCellId, "focus");
+  });
+});

package/src/core/cells/actions.ts

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { scrollAndHighlightCell } from "@/components/editor/links/cell-link";
-import { Objects } from "@/utils/objects";
 import { store } from "../state/jotai";
 import { notebookAtom } from "./cells";
 
@@ -10,12 +9,12 @@ import { notebookAtom } from "./cells";
  */
 export function notebookScrollToRunning() {
   // find cell that is currently in "running" state
-  const { cellRuntime } = store.get(notebookAtom);
-  const cell = Objects.entries(cellRuntime).find(
-    ([cellid, runtimestate]) => runtimestate.status === "running",
+  const { cellIds, cellRuntime } = store.get(notebookAtom);
+  const cellId = cellIds.inOrderIds.find(
+    (id) => cellRuntime[id]?.status === "running",
   );
-  if (!cell) {
+  if (!cellId) {
     return;
   }
-  scrollAndHighlightCell(cell[0], "focus");
+  scrollAndHighlightCell(cellId, "focus");
 }

package/src/core/codemirror/__tests__/setup.test.ts

@@ -134,6 +134,35 @@ describe("snapshot all duplicate keymaps", () => {
   });
 });
 
+test("auto_close_pairs: false removes closeBrackets keymaps", () => {
+  const withAutoClose = EditorState.create({
+    extensions: setup(),
+  });
+  const withoutAutoClose = EditorState.create({
+    extensions: setup({
+      completionConfig: {
+        ...getOpts().completionConfig,
+        auto_close_pairs: false,
+      },
+    }),
+  });
+
+  const keysWith = withAutoClose.facet(keymap).flat();
+  const keysWithout = withoutAutoClose.facet(keymap).flat();
+
+  // closeBracketsKeymap contributes Backspace and Enter handlers
+  expect(keysWith.length).toBeGreaterThan(keysWithout.length);
+
+  const hasBracketPairHandler = (state: EditorState) =>
+    state
+      .facet(keymap)
+      .flat()
+      .some((k) => k.run?.name === "deleteBracketPair");
+
+  expect(hasBracketPairHandler(withAutoClose)).toBe(true);
+  expect(hasBracketPairHandler(withoutAutoClose)).toBe(false);
+});
+
 test("placeholder adds another extension", () => {
   const opts = getOpts();
   const withAI = new PythonLanguageAdapter()

package/src/core/codemirror/cells/traceback-decorations.ts

@@ -147,7 +147,7 @@ export function errorLineHighlighter(
         backgroundColor: "color-mix(in srgb, var(--red-4) 40%, transparent)",
       },
       "&.cm-focused .cm-error-line.cm-activeLine": {
-        backgroundColor: "color-mix(in srgb, var(--red-6) 40%, transparent)",
+        backgroundColor: "color-mix(in srgb, var(--red-5) 40%, transparent)",
       },
     }),
   ];

package/src/core/codemirror/cm.ts

@@ -182,6 +182,7 @@ export const basicBundle = (opts: CodeMirrorSetupOpts): Extension[] => {
     diagnosticsConfig,
   } = opts;
   const placeholderType = getPlaceholderType(opts);
+  const autoClosePairs = completionConfig.auto_close_pairs !== false;
 
   return [
     ///// View
@@ -208,10 +209,10 @@ export const basicBundle = (opts: CodeMirrorSetupOpts): Extension[] => {
     copilotBundle(completionConfig),
     foldGutter(),
     stringsAutoCloseBraces(),
-    closeBrackets(),
+    autoClosePairs ? closeBrackets() : [],
     completionKeymap(acceptCompletionOnEnter),
     // to avoid clash with charDeleteBackward keymap
-    Prec.high(keymap.of(closeBracketsKeymap)),
+    autoClosePairs ? Prec.high(keymap.of(closeBracketsKeymap)) : [],
     bracketMatching(),
     indentOnInput(),
     indentUnit.of("    "),

package/src/core/codemirror/format.ts

@@ -205,6 +205,7 @@ async function getSqlFormatterDialect(
     case "mongodb":
     case "timescaledb":
     case "datafusion":
+    case "dremio":
       return sql;
     case "databricks":
       return spark;

package/src/core/codemirror/language/languages/sql/sql.ts

@@ -410,6 +410,7 @@ function connectionNameToParserDialect(
     case "spark":
     case "databricks":
     case "datafusion":
+    case "dremio":
       Logger.debug("Unsupported dialect", { dialect });
       return null;
     default:

package/src/core/codemirror/language/languages/sql/utils.ts

@@ -52,6 +52,7 @@ const KNOWN_DIALECTS_ARRAY = [
   "databricks",
   "datafusion",
   "microsoft sql server",
+  "dremio",
 ] as const;
 const KNOWN_DIALECTS: ReadonlySet<string> = new Set(KNOWN_DIALECTS_ARRAY);
 type KnownDialect = (typeof KNOWN_DIALECTS_ARRAY)[number];
@@ -115,6 +116,7 @@ export function guessDialect(
     case "spark":
     case "databricks":
     case "datafusion":
+    case "dremio":
       Logger.debug("Unsupported dialect", { dialect });
       return ModifiedStandardSQL;
     default:

package/src/core/config/__tests__/config-schema.test.ts

@@ -56,6 +56,7 @@ test("default UserConfig - empty", () => {
       },
       "completion": {
         "activate_on_typing": true,
+        "auto_close_pairs": true,
         "copilot": false,
         "signature_hint_on_typing": false,
       },
@@ -127,6 +128,7 @@ test("default UserConfig - one level", () => {
       },
       "completion": {
         "activate_on_typing": true,
+        "auto_close_pairs": true,
         "copilot": false,
         "signature_hint_on_typing": false,
       },

package/src/core/config/config-schema.ts

@@ -75,6 +75,7 @@ export const UserConfigSchema = z
       .object({
         activate_on_typing: z.boolean().prefault(true),
         signature_hint_on_typing: z.boolean().prefault(false),
+        auto_close_pairs: z.boolean().prefault(true),
         copilot: z
           .union([z.boolean(), z.enum(["github", "codeium", "custom"])])
           .prefault(false)

package/src/css/app/Cell.css

@@ -214,7 +214,6 @@
   &.error-outline,
   &.error-outline:focus-within {
     box-shadow: 8px 8px 0 0 color-mix(in srgb, var(--error), transparent 80%);
-    background-color: var(--red-2);
   }
 
   /* Needs Run */

package/src/plugins/impl/DataTablePlugin.tsx

@@ -8,8 +8,9 @@ import type {
   PaginationState,
   RowSelectionState,
   SortingState,
+  Table as TanstackTable,
 } from "@tanstack/react-table";
-import { Provider } from "jotai";
+import { Provider, useAtomValue } from "jotai";
 import { Table2Icon } from "lucide-react";
 import type { JSX } from "react";
 import React, {
@@ -28,6 +29,7 @@ import { TablePanel } from "@/components/data-table/charts/charts";
 import { hasChart } from "@/components/data-table/charts/storage";
 import { ColumnChartSpecModel } from "@/components/data-table/column-summary/chart-spec-model";
 import { ColumnChartContext } from "@/components/data-table/column-summary/column-summary";
+import { downloadSizeLimitAtom } from "@/components/data-table/download-policy/atoms";
 import { filtersToFilterGroup } from "@/components/data-table/filters";
 import { usePanelOwnership } from "@/components/data-table/hooks/use-panel-ownership";
 import { LoadingTable } from "@/components/data-table/loading-table";
@@ -190,11 +192,11 @@ interface Data<T> {
   fieldTypes?: FieldTypesWithExternalType | null;
   freezeColumnsLeft?: string[];
   freezeColumnsRight?: string[];
+  hiddenColumns?: string[];
   textJustifyColumns?: Record<string, "left" | "center" | "right">;
   wrappedColumns?: string[];
   headerTooltip?: Record<string, string>;
   totalColumns: number;
-  sizeBytes?: number | null;
   maxColumns: number | "all";
   hasStableRowId: boolean;
   lazy: boolean;
@@ -221,12 +223,14 @@ type DataTableFunctions = {
     cell_styles?: CellStyleState | null;
     cell_hover_texts?: Record<string, Record<string, string | null>> | null;
     raw_data?: TableData<T> | null;
-    size_bytes?: number | null;
   }>;
   get_data_url?: GetDataUrl;
   get_row_ids?: GetRowIds;
   calculate_top_k_rows?: CalculateTopKRows;
   preview_column?: PreviewColumn;
+  get_size_bytes: (opts: Record<string, never>) => Promise<{
+    size_bytes?: number | null;
+  }>;
 };
 
 type S = (number | string | { rowId: string; columnName?: string })[];
@@ -265,6 +269,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       rowHeaders: columnToFieldTypesSchema,
       freezeColumnsLeft: z.array(z.string()).optional(),
       freezeColumnsRight: z.array(z.string()).optional(),
+      hiddenColumns: z.array(z.string()).optional(),
       textJustifyColumns: z
         .record(z.string(), z.enum(["left", "center", "right"]))
         .optional(),
@@ -272,7 +277,6 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       headerTooltip: z.record(z.string(), z.string()).optional(),
       fieldTypes: columnToFieldTypesSchema.nullish(),
       totalColumns: z.number(),
-      sizeBytes: z.number().nullish(),
       maxColumns: z.union([z.number(), z.literal("all")]).default("all"),
       hasStableRowId: z.boolean().default(false),
       maxHeight: z.number().optional(),
@@ -330,7 +334,6 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
             .nullable(),
           cell_hover_texts: cellHoverTextSchema.nullable(),
           raw_data: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
-          size_bytes: z.number().nullish(),
         }),
       ),
     get_row_ids: rpc.input(z.object({}).passthrough()).output(
@@ -362,6 +365,9 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
         stats: columnStats.nullable(),
       }),
     ),
+    get_size_bytes: rpc
+      .input(z.object({}))
+      .output(z.object({ size_bytes: z.number().nullish() })),
   })
   .renderer((props) => {
     return (
@@ -536,7 +542,6 @@ export const LoadingDataTableComponent = memo(
       rows: T[];
       rawRows?: T[];
       totalRows: number | TooManyRows;
-      sizeBytes?: number | null;
       cellStyles: CellStyleState | undefined | null;
       cellHoverTexts?: Record<string, Record<string, string | null>> | null;
     }>(async () => {
@@ -553,7 +558,6 @@ export const LoadingDataTableComponent = memo(
       let tableData = props.data;
       let rawTableData: TableData<T> | undefined | null = props.rawData;
       let totalRows = props.totalRows;
-      let sizeBytes = props.sizeBytes ?? null;
       let cellStyles = props.cellStyles;
       let cellHoverTexts = props.cellHoverTexts;
 
@@ -597,7 +601,6 @@ export const LoadingDataTableComponent = memo(
         tableData = searchResults.data;
         rawTableData = searchResults.raw_data;
         totalRows = searchResults.total_rows;
-        sizeBytes = searchResults.size_bytes ?? null;
         cellStyles = searchResults.cell_styles || {};
         cellHoverTexts = searchResults.cell_hover_texts || {};
       }
@@ -610,7 +613,6 @@ export const LoadingDataTableComponent = memo(
         rows: tableData,
         rawRows: rawData,
         totalRows: totalRows,
-        sizeBytes,
         cellStyles,
         cellHoverTexts,
       };
@@ -622,7 +624,6 @@ export const LoadingDataTableComponent = memo(
       useDeepCompareMemoize(props.fieldTypes),
       props.data,
       props.totalRows,
-      props.sizeBytes,
       props.lazy,
       props.cellHoverTexts,
       props.cellStyles,
@@ -630,6 +631,34 @@ export const LoadingDataTableComponent = memo(
       paginationState.pageIndex,
     ]);
 
+    const policy = useAtomValue(downloadSizeLimitAtom);
+    const { data: sizeBytesData, isPending: sizeBytesPending } = useAsyncData<
+      number | null
+    >(async () => {
+      if (
+        !policy ||
+        !props.showDownload ||
+        props.lazy ||
+        props.totalRows === 0
+      ) {
+        return null;
+      }
+      const result = await props.get_size_bytes({});
+      return result.size_bytes ?? null;
+    }, [
+      policy,
+      props.showDownload,
+      props.get_size_bytes,
+      props.lazy,
+      props.totalRows,
+      searchQuery,
+      useDeepCompareMemoize(filters),
+      useDeepCompareMemoize(sorting),
+    ]);
+    const sizeBytes = sizeBytesData ?? null;
+    const sizeBytesIsLoading =
+      !!policy && props.showDownload && sizeBytesPending;
+
     const getRow = useCallback(
       async (rowId: number) => {
         const sortArgs =
@@ -737,7 +766,8 @@ export const LoadingDataTableComponent = memo(
         setFilters={setFilters}
         reloading={isFetching && !isPending}
         totalRows={data?.totalRows ?? props.totalRows}
-        sizeBytes={data?.sizeBytes ?? props.sizeBytes ?? null}
+        sizeBytes={sizeBytes}
+        sizeBytesIsLoading={sizeBytesIsLoading}
         paginationState={paginationState}
         setPaginationState={setPaginationState}
         cellStyles={data?.cellStyles ?? props.cellStyles}
@@ -785,6 +815,7 @@ const DataTableComponent = ({
   rawData,
   totalRows,
   sizeBytes,
+  sizeBytesIsLoading,
   maxColumns,
   pagination,
   selection,
@@ -814,6 +845,7 @@ const DataTableComponent = ({
   reloading,
   freezeColumnsLeft,
   freezeColumnsRight,
+  hiddenColumns,
   textJustifyColumns,
   wrappedColumns,
   headerTooltip,
@@ -835,6 +867,8 @@ const DataTableComponent = ({
     rawData?: unknown[];
     columnSummaries?: ColumnSummaries;
     getRow: (rowIdx: number) => Promise<GetRowResult>;
+    sizeBytes?: number | null;
+    sizeBytesIsLoading?: boolean;
   }): JSX.Element => {
   const id = useId();
   const [viewedRowIdx, setViewedRowIdx] = useState(0);
@@ -1007,6 +1041,52 @@ const DataTableComponent = ({
   const isInVscode = isInVscodeExtension();
   const isIslandsMode = isIslands();
 
+  const renderTableExplorerPanel = useMemo(() => {
+    if (!isAnyPanelOpen || !(showRowExplorer || canShowColumnExplorer)) {
+      return undefined;
+    }
+    return (table: TanstackTable<unknown>) => (
+      <ContextAwarePanelItem>
+        <TableExplorerPanel
+          rowIdx={viewedRowIdx}
+          setRowIdx={setViewedRow}
+          totalRows={totalRows}
+          fieldTypes={memoizedUnclampedFieldTypes}
+          getRow={getRow}
+          isSelectable={isSelectable}
+          isRowSelected={Boolean(rowSelection[viewedRowIdx])}
+          handleRowSelectionChange={handleRowSelectionChange}
+          previewColumn={preview_column}
+          totalColumns={totalColumns}
+          tableId={id}
+          table={table}
+          showRowExplorer={showRowExplorer && !isInVscode}
+          showColumnExplorer={canShowColumnExplorer && !isInVscode}
+          activeTab={panelType}
+          onTabChange={setPanelType}
+        />
+      </ContextAwarePanelItem>
+    );
+  }, [
+    isAnyPanelOpen,
+    showRowExplorer,
+    canShowColumnExplorer,
+    viewedRowIdx,
+    setViewedRow,
+    totalRows,
+    memoizedUnclampedFieldTypes,
+    getRow,
+    isSelectable,
+    rowSelection,
+    handleRowSelectionChange,
+    preview_column,
+    totalColumns,
+    id,
+    isInVscode,
+    panelType,
+    setPanelType,
+  ]);
+
   return (
     <>
       {/* When the totalRows is "too_many" and the pageSize is the same as the
@@ -1032,28 +1112,6 @@ const DataTableComponent = ({
         </Banner>
       )}
 
-      {isAnyPanelOpen && (showRowExplorer || canShowColumnExplorer) && (
-        <ContextAwarePanelItem>
-          <TableExplorerPanel
-            rowIdx={viewedRowIdx}
-            setRowIdx={setViewedRow}
-            totalRows={totalRows}
-            fieldTypes={memoizedUnclampedFieldTypes}
-            getRow={getRow}
-            isSelectable={isSelectable}
-            isRowSelected={Boolean(rowSelection[viewedRowIdx])}
-            handleRowSelectionChange={handleRowSelectionChange}
-            previewColumn={preview_column}
-            totalColumns={totalColumns}
-            tableId={id}
-            showRowExplorer={showRowExplorer && !isInVscode}
-            showColumnExplorer={canShowColumnExplorer && !isInVscode}
-            activeTab={panelType}
-            onTabChange={setPanelType}
-          />
-        </ContextAwarePanelItem>
-      )}
-
       <ColumnChartContext value={chartSpecModel}>
         <Labeled label={label} align="top" fullWidth={true}>
           <DataTable
@@ -1065,6 +1123,7 @@ const DataTableComponent = ({
             sorting={sorting}
             totalRows={totalRows}
             sizeBytes={sizeBytes}
+            sizeBytesIsLoading={sizeBytesIsLoading}
             totalColumns={totalColumns}
             manualSorting={true}
             setSorting={setSorting}
@@ -1090,6 +1149,7 @@ const DataTableComponent = ({
             onRowSelectionChange={handleRowSelectionChange}
             freezeColumnsLeft={freezeColumnsLeft}
             freezeColumnsRight={freezeColumnsRight}
+            hiddenColumns={hiddenColumns}
             onCellSelectionChange={handleCellSelectionChange}
             getRowIds={get_row_ids}
             toggleDisplayHeader={toggleDisplayHeader}
@@ -1108,6 +1168,7 @@ const DataTableComponent = ({
             isAnyPanelOpen={isAnyPanelOpen}
             viewedRowIdx={viewedRowIdx}
             onViewedRowChange={(rowIdx) => setViewedRowIdx(rowIdx)}
+            renderTableExplorerPanel={renderTableExplorerPanel}
           />
         </Labeled>
       </ColumnChartContext>