@marimo-team/frontend 0.23.7-dev2 → 0.23.7-dev20

package/src/core/websocket/__tests__/useMarimoKernelConnection.hook.test.tsx

@@ -0,0 +1,155 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+// @vitest-environment jsdom
+
+import { act, renderHook } from "@testing-library/react";
+import { createStore, Provider as JotaiProvider } from "jotai";
+import type React from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@/core/websocket/useWebSocket", async () => {
+  const actual =
+    await vi.importActual<typeof import("../useWebSocket")>("../useWebSocket");
+  return {
+    ...actual,
+    useConnectionTransport: vi.fn(),
+  };
+});
+
+vi.mock("@/core/runtime/config", async () => {
+  const actual = await vi.importActual<typeof import("@/core/runtime/config")>(
+    "@/core/runtime/config",
+  );
+  return {
+    ...actual,
+    useRuntimeManager: vi.fn(),
+  };
+});
+
+import { useRuntimeManager } from "@/core/runtime/config";
+import { connectionAtom } from "../../network/connection";
+import type { SessionId } from "../../kernel/session";
+import { WebSocketClosedReason, WebSocketState } from "../types";
+import { useMarimoKernelConnection } from "../useMarimoKernelConnection";
+import { useConnectionTransport } from "../useWebSocket";
+
+interface MockTransport {
+  readyState: 0 | 1 | 2 | 3;
+  retryCount: number;
+  reconnect: ReturnType<typeof vi.fn>;
+  close: ReturnType<typeof vi.fn>;
+  send: ReturnType<typeof vi.fn>;
+  addEventListener: ReturnType<typeof vi.fn>;
+  removeEventListener: ReturnType<typeof vi.fn>;
+}
+
+function makeTransport(
+  readyState: 0 | 1 | 2 | 3 = WebSocket.CLOSED,
+): MockTransport {
+  return {
+    readyState,
+    retryCount: 0,
+    reconnect: vi.fn(),
+    close: vi.fn(),
+    send: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  };
+}
+
+function makeRuntimeManager(isHealthy = vi.fn().mockResolvedValue(true)) {
+  return {
+    isHealthy,
+    getWsURL: () => new URL("ws://localhost/ws"),
+    waitForHealthy: vi.fn().mockResolvedValue(undefined),
+    isSameOrigin: true,
+  };
+}
+
+describe("useMarimoKernelConnection.reconnect()", () => {
+  let transport: MockTransport;
+  let isHealthy: ReturnType<typeof vi.fn>;
+  let store: ReturnType<typeof createStore>;
+
+  beforeEach(() => {
+    transport = makeTransport(WebSocket.CLOSED);
+    isHealthy = vi.fn().mockResolvedValue(true);
+    store = createStore();
+    store.set(connectionAtom, {
+      state: WebSocketState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+      reason: "kernel not found",
+    });
+    vi.mocked(useConnectionTransport).mockReturnValue(transport);
+    vi.mocked(useRuntimeManager).mockReturnValue(
+      makeRuntimeManager(isHealthy) as unknown as ReturnType<
+        typeof useRuntimeManager
+      >,
+    );
+  });
+
+  function renderUseHook() {
+    const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+      <JotaiProvider store={store}>
+        <ErrorBoundary fallback={null}>{children}</ErrorBoundary>
+      </JotaiProvider>
+    );
+    return renderHook(
+      () =>
+        useMarimoKernelConnection({
+          sessionId: "test-session" as SessionId,
+          autoInstantiate: false,
+          setCells: () => {},
+        }),
+      { wrapper },
+    );
+  }
+
+  it("is a no-op when the transport is already OPEN", async () => {
+    transport.readyState = WebSocket.OPEN;
+    const { result } = renderUseHook();
+    await act(async () => {
+      await result.current.reconnect();
+    });
+    expect(isHealthy).not.toHaveBeenCalled();
+    expect(transport.reconnect).not.toHaveBeenCalled();
+  });
+
+  it("is a no-op when the transport is already CONNECTING", async () => {
+    transport.readyState = WebSocket.CONNECTING;
+    const { result } = renderUseHook();
+    await act(async () => {
+      await result.current.reconnect();
+    });
+    expect(isHealthy).not.toHaveBeenCalled();
+    expect(transport.reconnect).not.toHaveBeenCalled();
+  });
+
+  it("probes /health and reconnects when the runtime is healthy", async () => {
+    isHealthy.mockResolvedValue(true);
+    const { result } = renderUseHook();
+    await act(async () => {
+      await result.current.reconnect();
+    });
+    expect(isHealthy).toHaveBeenCalledOnce();
+    expect(transport.reconnect).toHaveBeenCalledOnce();
+    expect(store.get(connectionAtom)).toEqual({
+      state: WebSocketState.CONNECTING,
+    });
+  });
+
+  it("transitions to CLOSED and does not call ws.reconnect when the probe fails", async () => {
+    isHealthy.mockResolvedValue(false);
+    const { result } = renderUseHook();
+    await act(async () => {
+      await result.current.reconnect();
+    });
+    expect(isHealthy).toHaveBeenCalledOnce();
+    expect(transport.reconnect).not.toHaveBeenCalled();
+    expect(store.get(connectionAtom)).toEqual({
+      state: WebSocketState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+      reason: "kernel not found",
+    });
+  });
+});

package/src/core/websocket/__tests__/useMarimoKernelConnection.test.ts

@@ -0,0 +1,137 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Logger } from "@/utils/Logger";
+import { WebSocketClosedReason, WebSocketState } from "../types";
+import { classifyCloseEvent } from "../useMarimoKernelConnection";
+import { MAX_RETRIES } from "../useWebSocket";
+
+function classify(
+  reason: string | undefined,
+  retryCount = 0,
+  maxRetries = MAX_RETRIES,
+) {
+  return classifyCloseEvent({ reason }, { retryCount, maxRetries });
+}
+
+describe("classifyCloseEvent", () => {
+  describe("transient closes (default branch)", () => {
+    it("retries when retryCount < maxRetries", () => {
+      const decision = classify(undefined, 0);
+      expect(decision.kind).toBe("retry");
+      expect(decision.status).toEqual({ state: WebSocketState.CONNECTING });
+    });
+
+    it("retries on each intermediate close event during a retry storm", () => {
+      for (let n = 0; n < MAX_RETRIES; n++) {
+        const decision = classify(undefined, n);
+        expect(decision.kind).toBe("retry");
+        expect(decision.status).toEqual({ state: WebSocketState.CONNECTING });
+      }
+    });
+
+    it("transitions to CLOSED when retryCount reaches maxRetries", () => {
+      const decision = classify(undefined, MAX_RETRIES);
+      expect(decision.kind).toBe("gave-up");
+      expect(decision.status).toEqual({
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+        reason: "kernel not found",
+      });
+    });
+
+    it("transitions to CLOSED when retryCount exceeds maxRetries", () => {
+      const decision = classify(undefined, MAX_RETRIES + 5);
+      expect(decision.kind).toBe("gave-up");
+    });
+
+    it("treats unknown reason strings as transient and logs a warning", () => {
+      const logger = vi.spyOn(Logger, "warn").mockImplementation(() => {});
+      const decision = classify("something-else", 3);
+      expect(decision.kind).toBe("retry");
+      expect(logger).toHaveBeenCalled();
+      logger.mockRestore();
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("terminal closes (server-initiated)", () => {
+    it("MARIMO_ALREADY_CONNECTED → terminal + closeTransport, with takeover", () => {
+      const decision = classify("MARIMO_ALREADY_CONNECTED", 0);
+      expect(decision.kind).toBe("terminal");
+      expect(decision.status).toMatchObject({
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.ALREADY_RUNNING,
+        canTakeover: true,
+      });
+      if (decision.kind === "terminal") {
+        expect(decision.closeTransport).toBe(true);
+      }
+    });
+
+    it.each([
+      "MARIMO_WRONG_KERNEL_ID",
+      "MARIMO_NO_FILE_KEY",
+      "MARIMO_NO_SESSION_ID",
+      "MARIMO_NO_SESSION",
+      "MARIMO_SHUTDOWN",
+    ])("%s → terminal with KERNEL_DISCONNECTED, closes transport", (reason) => {
+      const decision = classify(reason, 0);
+      expect(decision.kind).toBe("terminal");
+      expect(decision.status).toMatchObject({
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+      });
+      if (decision.kind === "terminal") {
+        expect(decision.closeTransport).toBe(true);
+      }
+    });
+
+    it("MARIMO_MALFORMED_QUERY → terminal but does NOT close transport", () => {
+      const decision = classify("MARIMO_MALFORMED_QUERY", 0);
+      expect(decision.kind).toBe("terminal");
+      expect(decision.status).toMatchObject({
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.MALFORMED_QUERY,
+      });
+      if (decision.kind === "terminal") {
+        expect(decision.closeTransport).toBe(false);
+      }
+    });
+
+    it("MARIMO_KERNEL_STARTUP_ERROR → terminal + closeTransport", () => {
+      const decision = classify("MARIMO_KERNEL_STARTUP_ERROR", 0);
+      expect(decision.kind).toBe("terminal");
+      expect(decision.status).toMatchObject({
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+      });
+      if (decision.kind === "terminal") {
+        expect(decision.closeTransport).toBe(true);
+      }
+    });
+
+    it("terminal closes ignore retryCount entirely", () => {
+      const decision = classify("MARIMO_SHUTDOWN", 99);
+      expect(decision.kind).toBe("terminal");
+    });
+  });
+
+  describe("retry budget exhaustion", () => {
+    it("yields retry on attempts 1..maxRetries-1 and gave-up on the final close", () => {
+      const states: string[] = [];
+      for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+        states.push(classify(undefined, attempt - 1).kind);
+      }
+      states.push(classify(undefined, MAX_RETRIES).kind);
+
+      expect(states).toEqual([
+        ...Array.from({ length: MAX_RETRIES }, () => "retry"),
+        "gave-up",
+      ]);
+    });
+  });
+});

package/src/core/websocket/transports/basic.ts

@@ -43,6 +43,8 @@ export class BasicTransport implements IConnectionTransport {
     return WebSocket.OPEN;
   }
 
+  readonly retryCount = 0;
+
   reconnect(code?: number | undefined, reason?: string | undefined): void {
     this.close();
     this.connect();

package/src/core/websocket/transports/transport.ts

@@ -25,6 +25,7 @@ export interface IConnectionTransport {
     callback: ConnectionTransportCallback<T>,
   ): void;
   readyState: WebSocket["readyState"];
+  readonly retryCount: number;
 }
 
 export class ConnectionSubscriptions {

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -11,7 +11,10 @@ import type {
   NotificationMessageData,
   NotificationPayload,
 } from "@/core/kernel/messages";
-import { useConnectionTransport } from "@/core/websocket/useWebSocket";
+import {
+  MAX_RETRIES,
+  useConnectionTransport,
+} from "@/core/websocket/useWebSocket";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import {
   handleWidgetMessage,
@@ -69,10 +72,96 @@ import { useStorageActions } from "../storage/state";
 import { useVariablesActions } from "../variables/state";
 import type { VariableName } from "../variables/types";
 import { isWasm } from "../wasm/utils";
-import { WebSocketClosedReason, WebSocketState } from "./types";
+import {
+  type ConnectionStatus,
+  WebSocketClosedReason,
+  WebSocketState,
+} from "./types";
 
 const SUPPORTS_LAZY_KERNELS = true;
 
+export type CloseDecision =
+  | { kind: "terminal"; status: ConnectionStatus; closeTransport: boolean }
+  | { kind: "gave-up"; status: ConnectionStatus }
+  | { kind: "retry"; status: ConnectionStatus };
+
+export function classifyCloseEvent(
+  event: { reason?: string },
+  context: { retryCount: number; maxRetries: number },
+): CloseDecision {
+  switch (event.reason) {
+    case "MARIMO_ALREADY_CONNECTED":
+      return {
+        kind: "terminal",
+        status: {
+          state: WebSocketState.CLOSED,
+          code: WebSocketClosedReason.ALREADY_RUNNING,
+          reason: "another browser tab is already connected to the kernel",
+          canTakeover: true,
+        },
+        closeTransport: true,
+      };
+    case "MARIMO_WRONG_KERNEL_ID":
+    case "MARIMO_NO_FILE_KEY":
+    case "MARIMO_NO_SESSION_ID":
+    case "MARIMO_NO_SESSION":
+    case "MARIMO_SHUTDOWN":
+      return {
+        kind: "terminal",
+        status: {
+          state: WebSocketState.CLOSED,
+          code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+          reason: "kernel not found",
+        },
+        closeTransport: true,
+      };
+    case "MARIMO_MALFORMED_QUERY":
+      return {
+        kind: "terminal",
+        status: {
+          state: WebSocketState.CLOSED,
+          code: WebSocketClosedReason.MALFORMED_QUERY,
+          reason:
+            "the kernel did not recognize a request; please file a bug with marimo",
+        },
+        closeTransport: false,
+      };
+    case "MARIMO_KERNEL_STARTUP_ERROR":
+      return {
+        kind: "terminal",
+        status: {
+          state: WebSocketState.CLOSED,
+          code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+          reason: "Failed to start kernel sandbox",
+        },
+        closeTransport: true,
+      };
+    default:
+      // Empty/undefined reasons are normal transient closes. Anything else is
+      // an unknown server reason; warn so a new MARIMO_* reason doesn't fall
+      // silently into the retry path.
+      if (event.reason) {
+        logNever(event.reason as never);
+      }
+  }
+  // partysocket stops retrying silently once `maxRetries` is hit; surface
+  // CLOSED so callers can detect the give-up.
+  if (context.retryCount >= context.maxRetries) {
+    return {
+      kind: "gave-up",
+      status: {
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+        reason: "kernel not found",
+      },
+    };
+  }
+  return {
+    kind: "retry",
+    status: { state: WebSocketState.CONNECTING },
+  };
+}
+
 function getExistingCells(): CellData[] | undefined {
   if (!SUPPORTS_LAZY_KERNELS) {
     return undefined;
@@ -340,6 +429,30 @@ export function useMarimoKernelConnection(opts: {
     }
   };
 
+  // Manual reconnect. Probes /health first to fail fast when the runtime
+  // is unreachable, instead of waiting on partysocket's retry budget.
+  const reconnect = async () => {
+    if (
+      ws.readyState === WebSocket.OPEN ||
+      ws.readyState === WebSocket.CONNECTING
+    ) {
+      return;
+    }
+    shouldTryReconnecting.current = true;
+    setConnection({ state: WebSocketState.CONNECTING });
+    const healthy = await runtimeManager.isHealthy();
+    if (!healthy) {
+      shouldTryReconnecting.current = false;
+      setConnection({
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+        reason: "kernel not found",
+      });
+      return;
+    }
+    ws.reconnect();
+  };
+
   const ws = useConnectionTransport({
     static: isStaticNotebook(),
     /**
@@ -399,58 +512,20 @@ export function useMarimoKernelConnection(opts: {
      */
     onClose: (e) => {
       Logger.warn("WebSocket closed", e.code, e.reason);
-      switch (e.reason) {
-        case "MARIMO_ALREADY_CONNECTED":
-          setConnection({
-            state: WebSocketState.CLOSED,
-            code: WebSocketClosedReason.ALREADY_RUNNING,
-            reason: "another browser tab is already connected to the kernel",
-            canTakeover: true,
-          });
-          ws.close(); // close to prevent reconnecting
-          return;
-
-        case "MARIMO_WRONG_KERNEL_ID":
-        case "MARIMO_NO_FILE_KEY":
-        case "MARIMO_NO_SESSION_ID":
-        case "MARIMO_NO_SESSION":
-        case "MARIMO_SHUTDOWN":
-          setConnection({
-            state: WebSocketState.CLOSED,
-            code: WebSocketClosedReason.KERNEL_DISCONNECTED,
-            reason: "kernel not found",
-          });
-          ws.close(); // close to prevent reconnecting
-          return;
-
-        case "MARIMO_MALFORMED_QUERY":
-          setConnection({
-            state: WebSocketState.CLOSED,
-            code: WebSocketClosedReason.MALFORMED_QUERY,
-            reason:
-              "the kernel did not recognize a request; please file a bug with marimo",
-          });
-          return;
-
-        default:
-          // Check for kernel startup error (full error already received via message)
-          if (e.reason === "MARIMO_KERNEL_STARTUP_ERROR") {
-            setConnection({
-              state: WebSocketState.CLOSED,
-              code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
-              reason: "Failed to start kernel sandbox",
-            });
-            ws.close(); // prevent reconnecting
-            return;
-          }
-
-          // Session should be valid
-          // - browser tab might have been closed or re-opened
-          // - computer might have just woken from sleep
-          //
-          // so try reconnecting.
-          setConnection({ state: WebSocketState.CONNECTING });
-          tryReconnecting(e.code, e.reason);
+      const decision = classifyCloseEvent(e, {
+        retryCount: ws.retryCount,
+        maxRetries: MAX_RETRIES,
+      });
+      setConnection(decision.status);
+      if (decision.kind === "terminal" && decision.closeTransport) {
+        ws.close(); // close to prevent reconnecting
+        return;
+      }
+      if (decision.kind === "retry") {
+        // Session should be valid
+        // - browser tab might have been closed or re-opened
+        // - computer might have just woken from sleep
+        tryReconnecting(e.code, e.reason);
       }
     },
 
@@ -468,5 +543,5 @@ export function useMarimoKernelConnection(opts: {
     },
   });
 
-  return { connection };
+  return { connection, reconnect };
 }

package/src/core/websocket/useWebSocket.tsx

@@ -18,6 +18,10 @@ interface UseConnectionTransportOptions {
   onError: (event: WebSocketEventMap["error"]) => void;
 }
 
+// Per-`reconnect()` retry budget for partysocket. After exhaustion, partysocket
+// stops silently; treat `retryCount >= MAX_RETRIES` as the give-up signal.
+export const MAX_RETRIES = 10;
+
 function createConnectionTransport(
   options: Pick<UseConnectionTransportOptions, "url" | "static">,
 ): IConnectionTransport {
@@ -33,8 +37,7 @@ function createConnectionTransport(
   // Cast needed: ReconnectingWebSocket types readyState as `number`
   // but IConnectionTransport expects `0 | 1 | 2 | 3`
   return new ReconnectingWebSocket(urlProvider, undefined, {
-    // We don't want Infinity retries
-    maxRetries: 10,
+    maxRetries: MAX_RETRIES,
     debug: false,
     startClosed: true,
     // long timeout -- the server can become slow when many notebooks

package/src/css/app/Cell.css

@@ -73,6 +73,16 @@
     }
   }
 
+  /* Styling for cells marked for cut */
+  &.pending-cut {
+    .output-area,
+    .cm-gutters,
+    .cm {
+      background-color: var(--gray-2);
+      opacity: 0.55;
+    }
+  }
+
   &:focus-within {
     z-index: 20;
   }

package/src/plugins/core/__test__/sanitize.test.ts

@@ -145,6 +145,14 @@ describe("sanitizeHtml", () => {
     );
   });
 
+  test("preserves marimo-mermaid with theme attributes", () => {
+    const html =
+      "<marimo-mermaid data-diagram='&quot;graph TD\\nA --&gt; B&quot;' data-theme='&quot;base&quot;' data-theme_variables='{&quot;primaryColor&quot;: &quot;#E8EEF5&quot;, &quot;lineColor&quot;: &quot;#475569&quot;}'></marimo-mermaid>";
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<marimo-mermaid data-diagram="&quot;graph TD\\nA --> B&quot;" data-theme="&quot;base&quot;" data-theme_variables="{&quot;primaryColor&quot;: &quot;#E8EEF5&quot;, &quot;lineColor&quot;: &quot;#475569&quot;}"></marimo-mermaid>"`,
+    );
+  });
+
   test("keeps style tags with FORCE_BODY", () => {
     const html = "<style>body { color: red; }</style><p>Text</p>";
     expect(sanitizeHtml(html)).toMatchInlineSnapshot(

package/src/plugins/impl/DataTablePlugin.tsx

@@ -194,6 +194,7 @@ interface Data<T> {
   wrappedColumns?: string[];
   headerTooltip?: Record<string, string>;
   totalColumns: number;
+  sizeBytes?: number | null;
   maxColumns: number | "all";
   hasStableRowId: boolean;
   lazy: boolean;
@@ -220,6 +221,7 @@ 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;
@@ -270,6 +272,7 @@ 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(),
@@ -327,6 +330,7 @@ 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(
@@ -532,6 +536,7 @@ 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 () => {
@@ -548,6 +553,7 @@ 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;
 
@@ -591,6 +597,7 @@ 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 || {};
       }
@@ -603,6 +610,7 @@ export const LoadingDataTableComponent = memo(
         rows: tableData,
         rawRows: rawData,
         totalRows: totalRows,
+        sizeBytes,
         cellStyles,
         cellHoverTexts,
       };
@@ -614,6 +622,7 @@ export const LoadingDataTableComponent = memo(
       useDeepCompareMemoize(props.fieldTypes),
       props.data,
       props.totalRows,
+      props.sizeBytes,
       props.lazy,
       props.cellHoverTexts,
       props.cellStyles,
@@ -728,6 +737,7 @@ export const LoadingDataTableComponent = memo(
         setFilters={setFilters}
         reloading={isFetching && !isPending}
         totalRows={data?.totalRows ?? props.totalRows}
+        sizeBytes={data?.sizeBytes ?? props.sizeBytes ?? null}
         paginationState={paginationState}
         setPaginationState={setPaginationState}
         cellStyles={data?.cellStyles ?? props.cellStyles}
@@ -774,6 +784,7 @@ const DataTableComponent = ({
   data,
   rawData,
   totalRows,
+  sizeBytes,
   maxColumns,
   pagination,
   selection,
@@ -1053,6 +1064,7 @@ const DataTableComponent = ({
             maxHeight={maxHeight}
             sorting={sorting}
             totalRows={totalRows}
+            sizeBytes={sizeBytes}
             totalColumns={totalColumns}
             manualSorting={true}
             setSorting={setSorting}