@marimo-team/islands 0.25.3-dev18 → 0.25.3-dev182

package/src/hooks/useScript.ts

@@ -1,90 +1,87 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import React from "react";
+import { useCallback, useSyncExternalStore } from "react";
 
 type ScriptStatus = "loading" | "ready" | "error" | "unknown";
 interface ScriptOptions {
   removeOnUnmount?: boolean;
 }
 
+interface ScriptEntry {
+  element: HTMLScriptElement;
+  listeners: Set<() => void>;
+  /** Whether useScript created the element, and so may remove it. */
+  owned: boolean;
+}
+
 const defaultOptions = { removeOnUnmount: false };
 
+// One entry per src, so reading the status on render is a map lookup
+const scripts = new Map<string, ScriptEntry>();
+
+function findScript(src: string): HTMLScriptElement | undefined {
+  // Compare attributes rather than building a selector, which `src` could break
+  return [...document.scripts].find(
+    (script) => script.getAttribute("src") === src,
+  );
+}
+
+function acquireScript(src: string): ScriptEntry {
+  const cached = scripts.get(src);
+  if (cached?.element.isConnected) {
+    return cached;
+  }
+  const existing = findScript(src);
+  const element = existing ?? document.createElement("script");
+  const entry: ScriptEntry = {
+    element,
+    listeners: new Set(),
+    owned: !existing,
+  };
+  const setStatus = (status: ScriptStatus) => {
+    element.dataset.status = status;
+    entry.listeners.forEach((listener) => listener());
+  };
+  // Listen for the script's lifetime rather than per subscriber, so the
+  // status still settles if the first subscriber unmounts mid-load.
+  element.addEventListener("load", () => setStatus("ready"), { once: true });
+  element.addEventListener("error", () => setStatus("error"), { once: true });
+  if (!existing) {
+    element.src = src;
+    element.async = true;
+    element.dataset.status = "loading";
+    document.body.append(element);
+  }
+  scripts.set(src, entry);
+  return entry;
+}
+
 export function useScript(
   src: string,
   options: ScriptOptions = defaultOptions,
 ) {
-  const [status, setStatus] = React.useState<ScriptStatus>(() => {
-    const existingScript = document.querySelector<HTMLScriptElement>(
-      `script[src="${src}"]`,
-    );
-    return (existingScript?.dataset.status as ScriptStatus) || "unknown";
-  });
-
-  React.useEffect(() => {
-    let script = document.querySelector<HTMLScriptElement>(
-      `script[src="${src}"]`,
-    );
-
-    const updateStatus = (newStatus: ScriptStatus) => {
-      if (script) {
-        script.dataset.status = newStatus;
-        setStatus(newStatus);
-      }
-    };
-
-    const handleScriptLoad = () => updateStatus("ready");
-    const handleScriptError = () => updateStatus("error");
-
-    // observes DOM changes and updates the status
-    const observeScript = (script: HTMLScriptElement) => {
-      const observer = new MutationObserver(() => {
-        const newStatus = script.dataset.status;
-        if (newStatus) {
-          setStatus(newStatus as ScriptStatus);
-        }
-      });
-      observer.observe(script, {
-        attributes: true,
-        attributeFilter: ["data-status"],
-      });
-      return observer;
-    };
-
-    if (!script) {
-      script = document.createElement("script");
-      script.src = src;
-      script.async = true;
-      updateStatus("loading");
-      document.body.append(script);
-
-      script.addEventListener("load", handleScriptLoad);
-      script.addEventListener("error", handleScriptError);
-
-      const observer = observeScript(script);
+  const { removeOnUnmount } = options;
+  const getSnapshot = useCallback((): ScriptStatus => {
+    const cached = scripts.get(src)?.element;
+    const element = cached?.isConnected ? cached : findScript(src);
+    return (element?.dataset.status as ScriptStatus) || "unknown";
+  }, [src]);
 
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      const entry = acquireScript(src);
+      entry.listeners.add(onChange);
       return () => {
-        observer.disconnect();
-        if (script) {
-          script.removeEventListener("load", handleScriptLoad);
-          script.removeEventListener("error", handleScriptError);
-
-          if (options.removeOnUnmount) {
-            script.remove();
+        entry.listeners.delete(onChange);
+        if (removeOnUnmount && entry.owned && entry.listeners.size === 0) {
+          entry.element.remove();
+          if (scripts.get(src) === entry) {
+            scripts.delete(src);
           }
         }
       };
-    }
-
-    const domStatus = script.dataset.status;
-    if (domStatus) {
-      if (domStatus === "ready" || domStatus === "error") {
-        return;
-      }
-      const observer = observeScript(script);
-      return () => observer.disconnect();
-    }
-
-    setStatus("unknown");
-  }, [src, options.removeOnUnmount]);
+    },
+    [src, removeOnUnmount],
+  );
 
-  return status;
+  return useSyncExternalStore(subscribe, getSnapshot);
 }

package/src/hooks/useStateForKey.ts

@@ -0,0 +1,93 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { type SetStateAction, useCallback, useReducer } from "react";
+
+interface KeyedState<T> {
+  key: unknown;
+  value: T;
+}
+
+type KeyedAction<T> =
+  | { type: "reset"; state: KeyedState<T> }
+  | { type: "update"; key: unknown; update: SetStateAction<T> };
+
+function reduceKeyedState<T>(
+  previous: KeyedState<T>,
+  action: KeyedAction<T>,
+): KeyedState<T> {
+  if (action.type === "reset") {
+    return action.state;
+  }
+  if (!Object.is(previous.key, action.key)) {
+    return previous;
+  }
+  const value =
+    typeof action.update === "function"
+      ? (action.update as (previous: T) => T)(previous.value)
+      : action.update;
+  return Object.is(previous.value, value)
+    ? previous
+    : { key: action.key, value };
+}
+
+/**
+ * Local state that resets when its owner key changes.
+ *
+ * The key uses Object.is. NaN matches NaN, 0 differs from -0, and objects match
+ * by reference. Keep the key stable between resets. An inline object such as
+ * `{ id }` creates a new key on each render and causes a render loop.
+ *
+ * On a key change, this hook calls initialize() and schedules a state update
+ * during render. React retries the calling component before rendering its
+ * children. Children and effects receive the reset value without an intervening
+ * commit of the old value. This resets only this hook's state. The component
+ * stays mounted, and its other hooks keep their state.
+ *
+ * initialize must be pure. React can call it more than once in Strict Mode or
+ * when retrying an interrupted render. A new initializer alone does not reset
+ * state. The next key change uses the initializer from that render. After
+ * committed key changes A -> B -> A, A starts fresh instead of restoring its
+ * earlier value. If React abandons a pending render for B, the visible state
+ * for A remains intact, including edits made while B was pending.
+ *
+ * The setter accepts values or pure updater functions, like useState. To store
+ * a function, use setValue(() => callback). Its identity is stable for the same
+ * key and changes with the key. Updates from a different key are ignored,
+ * including their updater functions. After A -> B -> A, an old setter for A
+ * can update A again. This hook does not cancel requests. For request results,
+ * use a distinct key for each lifetime so late results stay invalid.
+ *
+ * React can still call the component for ignored or same-value updates.
+ * Render counts do not indicate how many changes React commits to the screen.
+ *
+ * Use useInternalStateWithSync when the external value itself supplies the
+ * reset value. Use this hook when a separate key controls the reset.
+ *
+ * @example
+ * const [expanded, setExpanded] = useStateForKey(tree, () => new Set<string>());
+ *
+ * @see https://react.dev/reference/react/useState#storing-information-from-previous-renders
+ */
+export function useStateForKey<T>(key: unknown, initialize: () => T) {
+  // useState can eagerly evaluate an updater against a suspended render's
+  // state. A reducer checks the key when React processes each render's queue,
+  // so the still-visible owner can accept edits during a transition.
+  const [stored, dispatch] = useReducer(reduceKeyedState<T>, key, (key) => ({
+    key,
+    value: initialize(),
+  }));
+  const current = Object.is(stored.key, key)
+    ? stored
+    : { key, value: initialize() };
+  if (current !== stored) {
+    dispatch({ type: "reset", state: current });
+  }
+
+  const setValue = useCallback(
+    (update: SetStateAction<T>) => {
+      dispatch({ type: "update", key, update });
+    },
+    [key],
+  );
+
+  return [current.value, setValue] as const;
+}

package/src/mount.tsx

@@ -62,7 +62,7 @@ import {
 import { maybeRegisterVSCodeBindings } from "./core/vscode/vscode-bindings";
 import type { FileStore } from "./core/wasm/store";
 import { notebookFileStore } from "./core/wasm/store";
-import { ConnectionState } from "./core/websocket/types";
+import { ConnectionState } from "./core/session/types";
 import {
   handleWidgetMessage,
   WIDGET_REGISTRY,
@@ -274,8 +274,6 @@ const mountOptionsSchema = z.object({
       .transform((val) => val as api.Notebook["NotebookV1"]),
   ]),
 
-  notebookId: z.string().optional(),
-
   /**
    * Runtime configs
    */
@@ -286,7 +284,6 @@ const mountOptionsSchema = z.object({
         // Lazy by default, but can be overridden by the runtime config
         lazy: z.boolean().default(true),
         authToken: z.string().nullish(),
-        notebookId: z.string().optional(),
       }),
     )
     .nullish()
@@ -367,7 +364,6 @@ function initStore(options: unknown) {
   } else {
     store.set(runtimeConfigAtom, {
       ...DEFAULT_RUNTIME_CONFIG,
-      notebookId: parsedOptions.data.notebookId,
       lazy: false,
       serverToken: parsedOptions.data.serverToken,
     });

package/src/plugins/__tests__/plugin-object-schemas.test.ts

@@ -0,0 +1,104 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { DataEditorPlugin } from "../impl/DataEditorPlugin";
+import { DataTablePlugin } from "../impl/DataTablePlugin";
+import { DataFramePlugin } from "../impl/data-frames/DataFramePlugin";
+import { PlotlyPlugin } from "../impl/plotly/PlotlyPlugin";
+import { VegaPlugin } from "../impl/vega/VegaPlugin";
+
+describe("plugin object schemas", () => {
+  const rows = [{ value: 1, extra: { nested: true } }];
+  const styles = { "0": { value: { color: "red", customProperty: 1 } } };
+  const tableData = {
+    initialValue: [],
+    label: null,
+    data: rows,
+    totalRows: 1,
+    totalColumns: 1,
+    rowHeaders: [],
+    cellStyles: styles,
+  };
+
+  it("preserves table rows and arbitrary cell style fields", () => {
+    expect(DataTablePlugin.validator.parse(tableData)).toMatchObject({
+      data: rows,
+      cellStyles: styles,
+      pageSize: 10,
+    });
+  });
+
+  it("preserves data editor row fields", () => {
+    expect(
+      DataEditorPlugin.validator.parse({
+        initialValue: { edits: [] },
+        label: null,
+        data: rows,
+        editableColumns: "all",
+      }),
+    ).toMatchObject({ data: rows, columnNames: [] });
+  });
+
+  it("preserves table RPC payload fields", () => {
+    const functions = DataTablePlugin.functions!;
+    const searchResult = {
+      data: rows,
+      total_rows: 1,
+      cell_styles: styles,
+      cell_hover_texts: null,
+    };
+    expect(functions.search.output.parse(searchResult)).toEqual(searchResult);
+    expect(functions.get_row_ids!.input.parse({ custom: true })).toEqual({
+      custom: true,
+    });
+    expect(functions.get_data_url!.input.parse({ custom: true })).toEqual({
+      custom: true,
+    });
+    expect(
+      functions.get_data_url!.output.parse({ data_url: rows, format: "json" }),
+    ).toEqual({ data_url: rows, format: "json" });
+  });
+
+  it("preserves dataframe search row fields", () => {
+    const result = { data: rows, total_rows: 1 };
+    expect(DataFramePlugin.functions!.search.output.parse(result)).toEqual(
+      result,
+    );
+  });
+
+  it("preserves Plotly figure and config fields", () => {
+    const data = {
+      figure: { data: [], layout: { title: "Chart" } },
+      config: { responsive: true },
+    };
+    expect(new PlotlyPlugin().validator.parse(data)).toEqual(data);
+  });
+
+  it("preserves Vega spec and embed options fields and defaults", () => {
+    const spec = { mark: "bar", encoding: { x: { field: "value" } } };
+    const validator = new VegaPlugin().validator;
+    expect(validator.parse({ spec })).toEqual({
+      spec,
+      chartSelection: true,
+      fieldSelection: true,
+      embedOptions: {},
+    });
+    expect(
+      validator.parse({ spec, embedOptions: { actions: false } }).embedOptions,
+    ).toEqual({ actions: false });
+  });
+
+  it("rejects scalar values where plugin objects are required", () => {
+    expect(
+      DataTablePlugin.validator.safeParse({ ...tableData, data: [42] }).success,
+    ).toBe(false);
+    expect(
+      new PlotlyPlugin().validator.safeParse({ figure: 42, config: {} })
+        .success,
+    ).toBe(false);
+    expect(
+      new VegaPlugin().validator.safeParse({ spec: {}, embedOptions: 42 })
+        .success,
+    ).toBe(false);
+  });
+});

package/src/plugins/core/registerReactComponent.tsx

@@ -104,7 +104,7 @@ function PluginSlotInternal<T>(
   ref: React.Ref<PluginSlotHandle>,
 ): JSX.Element {
   const [childNodes, setChildNodes] = useState<ReactNode>(children);
-  const [value, setValue] = useState<T>(getInitialValue());
+  const [value, setValue] = useState<T>(getInitialValue);
   const { theme } = useTheme();
 
   const [parsedResult, setParsedResult] = useState(() => {

package/src/plugins/impl/CodeEditorPlugin.tsx

@@ -71,7 +71,7 @@ const CodeEditorComponent = (props: CodeEditorComponentProps) => {
   });
 
   const handleChange = useEvent((newValue: string) => {
-    setLocalValue((_) => newValue);
+    setLocalValue(newValue);
     if (typeof props.debounce === "number") {
       setValueDebounced(newValue);
     } else if (!props.debounce) {

package/src/plugins/impl/DataEditorPlugin.tsx

@@ -44,7 +44,7 @@ export const DataEditorPlugin = createPlugin<Edits>("marimo-data-editor", {
         ),
       }),
       label: z.string().nullable(),
-      data: z.union([z.string(), z.array(z.object({}).passthrough())]),
+      data: z.union([z.string(), z.array(z.looseObject({}))]),
       fieldTypes: columnToFieldTypesSchema.nullish(),
       columnNames: z.array(z.string()).default([]),
       editableColumns: z.union([z.array(z.string()), z.literal("all")]),

package/src/plugins/impl/DataTablePlugin.tsx

@@ -231,6 +231,7 @@ type DataTableFunctions = {
   }) => Promise<{
     data: TableData<T>;
     total_rows: number | TooManyRows;
+    has_next_page?: boolean | null;
     cell_styles?: CellStyleState | null;
     cell_hover_texts?: Record<string, Record<string, string | null>> | null;
     raw_data?: TableData<T> | null;
@@ -258,7 +259,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
         z.array(z.object({ rowId: z.string(), columnName: z.string() })),
       ]),
       label: z.string().nullable(),
-      data: z.union([z.string(), z.array(z.object({}).passthrough())]),
+      data: z.union([z.string(), z.array(z.looseObject({}))]),
       rawData: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
       totalRows: z.union([z.number(), z.literal(TOO_MANY_ROWS)]),
       pagination: z.boolean().default(false),
@@ -296,7 +297,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       hasStableRowId: z.boolean().default(false),
       maxHeight: z.number().optional(),
       cellStyles: z
-        .record(z.string(), z.record(z.string(), z.object({}).passthrough()))
+        .record(z.string(), z.record(z.string(), z.looseObject({})))
         .optional(),
       hoverTemplate: z.string().optional(),
       cellHoverTexts: cellHoverTextSchema,
@@ -341,28 +342,26 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       )
       .output(
         z.object({
-          data: z.union([z.string(), z.array(z.object({}).passthrough())]),
+          data: z.union([z.string(), z.array(z.looseObject({}))]),
           total_rows: z.union([z.number(), z.literal(TOO_MANY_ROWS)]),
+          has_next_page: z.boolean().nullish(),
           cell_styles: z
-            .record(
-              z.string(),
-              z.record(z.string(), z.object({}).passthrough()),
-            )
+            .record(z.string(), z.record(z.string(), z.looseObject({})))
             .nullable(),
           cell_hover_texts: cellHoverTextSchema.nullable(),
           raw_data: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
         }),
       ),
-    get_row_ids: rpc.input(z.object({}).passthrough()).output(
+    get_row_ids: rpc.input(z.looseObject({})).output(
       z.object({
         row_ids: z.array(z.number()),
         all_rows: z.boolean(),
         error: z.string().nullable(),
       }),
     ),
-    get_data_url: rpc.input(z.object({}).passthrough()).output(
+    get_data_url: rpc.input(z.looseObject({})).output(
       z.object({
-        data_url: z.union([z.string(), z.array(z.object({}).passthrough())]),
+        data_url: z.union([z.string(), z.array(z.looseObject({}))]),
         format: z.enum(["csv", "json", "arrow"]),
       }),
     ),
@@ -510,6 +509,7 @@ interface DataTableSearchProps {
   filters?: ColumnFiltersState;
   setFilters?: SetFilters;
   hasStableRowId: boolean;
+  hasNextPage?: boolean;
 }
 
 export const LoadingDataTableComponent = memo(
@@ -546,16 +546,42 @@ export const LoadingDataTableComponent = memo(
       }
     }, [setValue, filters, searchQuery, sorting, props.hasStableRowId]);
 
-    // If pageSize changes, reset pagination state
-    useEffect(() => {
+    const [previousPageSize, setPreviousPageSize] = useState(props.pageSize);
+    // Reconcile before requesting data for the updated table configuration.
+    if (previousPageSize !== props.pageSize) {
+      setPreviousPageSize(props.pageSize);
       setPaginationState({ pageIndex: 0, pageSize: props.pageSize });
-    }, [props.pageSize]);
+    }
+
+    const resetLazyPage = useEvent(() => {
+      if (props.lazy) {
+        setPaginationState((state) =>
+          state.pageIndex === 0 ? state : { ...state, pageIndex: 0 },
+        );
+      }
+    });
+
+    const handleSortingChange: OnChangeFn<SortingState> = useEvent(
+      (updater) => {
+        setSorting(updater);
+        resetLazyPage();
+      },
+    );
+    const handleFiltersChange: SetFilters = useEvent((updater) => {
+      setFilters(updater);
+      resetLazyPage();
+    });
+    const handleSearchQueryChange = useEvent((query: string) => {
+      setSearchQuery(query);
+      resetLazyPage();
+    });
 
     // Data loading
     const { data, error, isPending, isFetching } = useAsyncData<{
       rows: T[];
       rawRows?: T[];
       totalRows: number | TooManyRows;
+      hasNextPage?: boolean;
       cellStyles: CellStyleState | undefined | null;
       cellHoverTexts?: Record<string, Record<string, string | null>> | null;
     }>(async () => {
@@ -572,6 +598,7 @@ export const LoadingDataTableComponent = memo(
       let tableData = props.data;
       let rawTableData: TableData<T> | undefined | null = props.rawData;
       let totalRows = props.totalRows;
+      let hasNextPage: boolean | undefined;
       let cellStyles = props.cellStyles;
       let cellHoverTexts = props.cellHoverTexts;
 
@@ -615,6 +642,7 @@ export const LoadingDataTableComponent = memo(
         tableData = searchResults.data;
         rawTableData = searchResults.raw_data;
         totalRows = searchResults.total_rows;
+        hasNextPage = searchResults.has_next_page ?? undefined;
         cellStyles = searchResults.cell_styles || {};
         cellHoverTexts = searchResults.cell_hover_texts || {};
       }
@@ -627,6 +655,7 @@ export const LoadingDataTableComponent = memo(
         rows: tableData,
         rawRows: rawData,
         totalRows: totalRows,
+        hasNextPage,
         cellStyles,
         cellHoverTexts,
       };
@@ -697,12 +726,13 @@ export const LoadingDataTableComponent = memo(
       [search, sorting, filters, searchQuery],
     );
 
-    // If total rows change, reset pageIndex
-    useEffect(() => {
+    const [previousTotalRows, setPreviousTotalRows] = useState(data?.totalRows);
+    if (previousTotalRows !== data?.totalRows) {
+      setPreviousTotalRows(data?.totalRows);
       setPaginationState((state) =>
         state.pageIndex === 0 ? state : { ...state, pageIndex: 0 },
       );
-    }, [data?.totalRows]);
+    }
 
     // Column summaries
     const { data: columnSummaries, error: columnSummariesError } = useAsyncData<
@@ -775,13 +805,16 @@ export const LoadingDataTableComponent = memo(
         rawData={data?.rawRows}
         columnSummaries={columnSummaries}
         sorting={sorting}
-        setSorting={setSorting}
+        setSorting={handleSortingChange}
         searchQuery={searchQuery}
-        setSearchQuery={setSearchQuery}
+        setSearchQuery={handleSearchQueryChange}
         filters={filters}
-        setFilters={setFilters}
+        setFilters={handleFiltersChange}
         reloading={isFetching && !isPending}
         totalRows={data?.totalRows ?? props.totalRows}
+        hasNextPage={
+          props.lazy ? !error && (data?.hasNextPage ?? false) : undefined
+        }
         sizeBytes={sizeBytes}
         sizeBytesIsLoading={sizeBytesIsLoading}
         paginationState={paginationState}
@@ -831,11 +864,12 @@ const DataTableComponent = ({
   data,
   rawData,
   totalRows,
+  hasNextPage,
   sizeBytes,
   sizeBytesIsLoading,
   maxColumns,
   pagination,
-  selection,
+  selection: requestedSelection,
   value,
   showFilters,
   showDownload,
@@ -843,7 +877,7 @@ const DataTableComponent = ({
   showColumnExplorer,
   showRowExplorer,
   showChartBuilder,
-  showDataTypes,
+  showDataTypes: requestedShowDataTypes,
   rowHeaders,
   fieldTypes,
   paginationState,
@@ -916,16 +950,16 @@ const DataTableComponent = ({
     }
     const fieldTypesWithoutExternalTypes = toFieldTypes(fieldTypes);
 
-    return new ColumnChartSpecModel(
-      columnSummaries.data || [],
-      fieldTypesWithoutExternalTypes,
-      columnSummaries.stats,
-      columnSummaries.bin_values,
-      columnSummaries.value_counts,
-      {
+    return new ColumnChartSpecModel({
+      data: columnSummaries.data || [],
+      fieldTypes: fieldTypesWithoutExternalTypes,
+      stats: columnSummaries.stats,
+      binValues: columnSummaries.bin_values,
+      valueCounts: columnSummaries.value_counts,
+      opts: {
         includeCharts: columnSummaries.show_charts,
       },
-    );
+    });
   }, [fieldTypes, columnSummaries]);
 
   const rowHeaderNames = new Set(rowHeaders.map(([name]) => name));
@@ -975,15 +1009,11 @@ const DataTableComponent = ({
   const fractionDigitsByColumn = useDeepCompareMemoize(computedFractionDigits);
   const shownColumns = memoizedClampedFieldTypes.length;
 
-  // If the field types are not set, we don't show them
-  if (!fieldTypes) {
-    showDataTypes = false;
-  }
+  // Only show data types when they are explicitly supplied.
+  const showDataTypes = Boolean(fieldTypes && requestedShowDataTypes);
 
   // Row/cell selection writes back to the kernel, absent in static exports.
-  if (isStatic) {
-    selection = null;
-  }
+  const selection = isStatic ? null : requestedSelection;
 
   const columns = useMemo(
     () =>
@@ -1134,7 +1164,8 @@ const DataTableComponent = ({
     <>
       {/* When the totalRows is "too_many" and the pageSize is the same as the
        * number of rows, we are likely displaying all the data (could be more, but we don't know the total). */}
-      {totalRows === TOO_MANY_ROWS &&
+      {hasNextPage === undefined &&
+        totalRows === TOO_MANY_ROWS &&
         paginationState.pageSize === data.length && (
           <Banner className="mb-1 rounded">
             Previewing the first {paginationState.pageSize} rows.
@@ -1172,6 +1203,7 @@ const DataTableComponent = ({
             maxHeight={maxHeight}
             sorting={sorting}
             totalRows={totalRows}
+            hasNextPage={hasNextPage}
             sizeBytes={sizeBytes}
             sizeBytesIsLoading={sizeBytesIsLoading}
             totalColumns={totalColumns}