@marimo-team/islands 0.25.3-dev162 → 0.25.3-dev168

package/dist/{number-overlay-editor-ELtg9k3M.js → number-overlay-editor-DaPfxMR3.js}

@@ -1,6 +1,6 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-sHtZdjeP.js";
-import { a as n } from "./glide-data-editor-Dn1Ekucb.js";
+import { a as n } from "./glide-data-editor-BOcECwyE.js";
 //#region ../node_modules/.pnpm/@glideapps+glide-data-grid@6.0.4-alpha24_lodash@4.17.21_marked@15.0.12_react-dom@19.3.0_27cffe7f1bc30287d59ac27db3240c5b/node_modules/@glideapps/glide-data-grid/dist/esm/internal/data-grid-overlay-editor/private/number-overlay-editor-style.js
 var r = /* @__PURE__ */ e(t()), i = /*#__PURE__*/ n("div")({
 	name: "NumberOverlayEditorStyle",

package/dist/{reveal-component-CduO3VgT.js → reveal-component-RQYxUMYN.js}

@@ -4,14 +4,14 @@ import { t as o } from "./react-sHtZdjeP.js";
 import { t as s } from "./compiler-runtime-CldRdSsv.js";
 import { m as c, t as l } from "./tooltip-CJ4Rqasp.js";
 import { k as u } from "./error-entries-BpUJSLUZ.js";
-import { $ as d, Q as f, Z as p, an as m, i as h, l as g, ln as _, n as v, on as y, r as b, t as x, u as S } from "./common-BmlT-bPP.js";
+import { $ as d, Q as f, Z as p, an as m, i as h, l as g, ln as _, n as v, on as y, r as b, t as x, u as S } from "./common-Ceqqp1YL.js";
 import { M as C } from "./select-CkF_GBxO.js";
 import { J as ee } from "./dropdown-menu-BWnnAstC.js";
 import { _ as w } from "./toDate-rySyYxqk.js";
 import { t as T } from "./jsx-runtime-3BD1kT0s.js";
 import { q as E } from "./use-restore-focus-CmGwRNId.js";
 import { A as D, C as O, b as k } from "./useTheme-TLkqJsvo.js";
-import { a as A, n as te, t as ne } from "./code-visibility-DEIiTBMH.js";
+import { a as A, n as te, t as ne } from "./code-visibility-BfRdYY7f.js";
 /* empty css                */
 var j = c("sticky-note", [["path", {
 	d: "M21 9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.3-dev162",
+  "version": "0.25.3-dev168",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -17,6 +17,7 @@ import type { DataTableSelection } from "./types";
 
 interface TableBottomBarProps<TData> {
   pagination: boolean;
+  hasNextPage?: boolean;
   totalColumns: number;
   selection?: DataTableSelection;
   onRowSelectionChange?: (value: RowSelectionState) => void;
@@ -30,6 +31,7 @@ interface TableBottomBarProps<TData> {
 
 export const TableBottomBar = <TData,>({
   pagination,
+  hasNextPage,
   totalColumns,
   selection,
   onRowSelectionChange,
@@ -147,7 +149,7 @@ export const TableBottomBar = <TData,>({
     const { totalColumns: effectiveTotalColumns, hiddenColumns } =
       getColumnCountForDisplay(table, totalColumns);
     const { rowsAndColumns, hiddenSuffix } = prettifyRowColumnCount({
-      numRows: table.getRowCount(),
+      numRows: hasNextPage === undefined ? table.getRowCount() : "too_many",
       totalColumns: effectiveTotalColumns,
       hiddenColumns,
       locale,
@@ -178,6 +180,7 @@ export const TableBottomBar = <TData,>({
           <DataTablePagination
             table={table}
             tableLoading={tableLoading}
+            hasNextPage={hasNextPage}
             showPageSizeSelector={showPageSizeSelector}
           />
         )}

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

@@ -9,9 +9,11 @@ import { DataTablePagination, matchingPageRanges } from "../pagination";
 function PaginationHarness({
   totalPages = 3,
   loading = false,
+  hasNextPage,
 }: {
   totalPages?: number;
   loading?: boolean;
+  hasNextPage?: boolean;
 }) {
   const table = useReactTable({
     locale: "en-US",
@@ -23,7 +25,11 @@ function PaginationHarness({
   });
   return (
     <TooltipProvider>
-      <DataTablePagination table={table} tableLoading={loading} />
+      <DataTablePagination
+        table={table}
+        tableLoading={loading}
+        hasNextPage={hasNextPage}
+      />
     </TooltipProvider>
   );
 }
@@ -140,3 +146,24 @@ test("prefix 1 with small totalPages", () => {
 test("prefix 1 with totalPages=1", () => {
   expect(matchingPageRanges("1", 1)).toEqual([[1, 1]]);
 });
+
+test("unknown totals use lookahead for navigation without a last page or page picker", () => {
+  const { rerender } = render(
+    <PaginationHarness totalPages={-1} hasNextPage={true} />,
+  );
+  expect(screen.getByText("1")).toBeInTheDocument();
+  expect(
+    screen.queryByRole("button", { name: "Last page" }),
+  ).not.toBeInTheDocument();
+  expect(
+    screen.queryByRole("button", { name: /Choose page/ }),
+  ).not.toBeInTheDocument();
+  expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
+  fireEvent.click(screen.getByRole("button", { name: "Next page" }));
+  expect(screen.getByText("2")).toBeInTheDocument();
+  rerender(<PaginationHarness totalPages={-1} hasNextPage={false} />);
+  expect(screen.getByRole("button", { name: "Next page" })).toBeDisabled();
+  fireEvent.click(screen.getByRole("button", { name: "Previous page" }));
+  expect(screen.getByText("1")).toBeInTheDocument();
+  expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
+});

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

@@ -86,6 +86,7 @@ interface DataTableProps<TData> extends Partial<ExportActionProps> {
   setSorting?: OnChangeFn<SortingState>; // controlled sorting
   // Pagination
   totalRows: number | TooManyRows;
+  hasNextPage?: boolean;
   // JSON-serialized size of the currently-rendered data. Forwarded to
   // ExportActions so hosts can size-gate the Export button via downloadSizeLimitAtom.
   sizeBytes?: number | null;
@@ -143,6 +144,7 @@ const DataTableInternal = <TData,>({
   selection,
   totalColumns,
   totalRows,
+  hasNextPage,
   sizeBytes,
   sizeBytesIsLoading,
   manualSorting = false,
@@ -255,6 +257,7 @@ const DataTableInternal = <TData,>({
     getCoreRowModel: getCoreRowModel(),
     // pagination
     rowCount: totalRows === "too_many" ? undefined : totalRows,
+    pageCount: hasNextPage === undefined ? undefined : -1,
     ...(setPaginationState
       ? {
           onPaginationChange: setPaginationState,
@@ -432,6 +435,7 @@ const DataTableInternal = <TData,>({
               className="pt-1.5 pb-0.5 border-t border-border"
               totalColumns={totalColumns}
               pagination={pagination}
+              hasNextPage={hasNextPage}
               selection={selection}
               onRowSelectionChange={onRowSelectionChange}
               table={table}

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

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

package/src/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;
@@ -343,6 +344,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
         z.object({
           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.looseObject({})))
             .nullable(),
@@ -507,6 +509,7 @@ interface DataTableSearchProps {
   filters?: ColumnFiltersState;
   setFilters?: SetFilters;
   hasStableRowId: boolean;
+  hasNextPage?: boolean;
 }
 
 export const LoadingDataTableComponent = memo(
@@ -550,11 +553,35 @@ export const LoadingDataTableComponent = memo(
       setPaginationState({ pageIndex: 0, 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 () => {
@@ -571,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;
 
@@ -614,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 || {};
       }
@@ -626,6 +655,7 @@ export const LoadingDataTableComponent = memo(
         rows: tableData,
         rawRows: rawData,
         totalRows: totalRows,
+        hasNextPage,
         cellStyles,
         cellHoverTexts,
       };
@@ -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,6 +864,7 @@ const DataTableComponent = ({
   data,
   rawData,
   totalRows,
+  hasNextPage,
   sizeBytes,
   sizeBytesIsLoading,
   maxColumns,
@@ -1130,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.
@@ -1168,6 +1203,7 @@ const DataTableComponent = ({
             maxHeight={maxHeight}
             sorting={sorting}
             totalRows={totalRows}
+            hasNextPage={hasNextPage}
             sizeBytes={sizeBytes}
             sizeBytesIsLoading={sizeBytesIsLoading}
             totalColumns={totalColumns}

package/src/plugins/impl/__tests__/DataTablePlugin.test.tsx

@@ -10,6 +10,7 @@ import {
   render,
   screen,
   waitFor,
+  within,
 } from "@testing-library/react";
 import { Provider } from "jotai";
 import { useState } from "react";
@@ -540,6 +541,275 @@ describe("table pagination and static notebook control suppression", () => {
     mockIsStatic.mockReturnValue(false);
   });
 
+  it("preserves the preview banner for ordinary paginated tables with unknown totals", async () => {
+    const props = makeProps();
+    render(
+      <Wrapper>
+        <LoadingDataTableComponent {...props} totalRows="too_many" />
+      </Wrapper>,
+    );
+    expect(
+      await screen.findByText("Previewing the first 10 rows."),
+    ).toBeInTheDocument();
+  });
+
+  it("pages lazy results with unknown totals and resets search, sorting, and filters to page one", async () => {
+    const props = makeProps();
+    const search = vi
+      .fn()
+      .mockImplementation(
+        async (request: {
+          page_number: number;
+          query?: string;
+          sort?: { by: string; descending: boolean }[];
+        }) => ({
+          data: [
+            { id: request.page_number + 1, name: request.query || "item" },
+          ],
+          total_rows: "too_many",
+          has_next_page: request.page_number === 0,
+        }),
+      );
+    render(
+      <Wrapper>
+        <LoadingDataTableComponent
+          {...props}
+          lazy={true}
+          totalRows="too_many"
+          selection={null}
+          showColumnSummaries={false}
+          search={search}
+        />
+      </Wrapper>,
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    expect(screen.getByText("Unknown, 2 columns")).toBeInTheDocument();
+    expect(screen.queryByTestId("last-page-button")).not.toBeInTheDocument();
+    expect(screen.queryByText(/Previewing the first/)).not.toBeInTheDocument();
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1 }),
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeDisabled(),
+    );
+    fireEvent.click(screen.getByTestId("previous-page-button"));
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeDisabled(),
+    );
+    search.mockClear();
+    fireEvent.change(screen.getByPlaceholderText("Search..."), {
+      target: { value: "new" },
+    });
+    await waitFor(() =>
+      expect(search).toHaveBeenCalledWith(
+        expect.objectContaining({ query: "new", page_number: 0 }),
+      ),
+    );
+    expect(
+      search.mock.calls.every(([request]) => request.page_number === 0),
+    ).toBe(true);
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeDisabled(),
+    );
+    search.mockClear();
+    fireEvent.click(
+      within(screen.getByRole("columnheader", { name: /name/ })).getByRole(
+        "button",
+        { name: "Sort column ascending" },
+      ),
+    );
+    await waitFor(() =>
+      expect(search).toHaveBeenCalledWith(
+        expect.objectContaining({
+          page_number: 0,
+          sort: [{ by: "name", descending: false }],
+        }),
+      ),
+    );
+    expect(
+      search.mock.calls.every(([request]) => request.page_number === 0),
+    ).toBe(true);
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeEnabled(),
+    );
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1 }),
+      ),
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId("next-page-button")).toBeDisabled(),
+    );
+    search.mockClear();
+    const columnMenu = within(
+      screen.getByRole("columnheader", { name: /name/ }),
+    ).getByRole("button", { name: "Column options" });
+    fireEvent.keyDown(columnMenu, { key: "Enter" });
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Filter" }));
+    fireEvent.change(screen.getByPlaceholderText("Text…"), {
+      target: { value: "item" },
+    });
+    fireEvent.click(screen.getByLabelText("Apply filter"));
+    await waitFor(() =>
+      expect(search).toHaveBeenCalledWith(
+        expect.objectContaining({
+          page_number: 0,
+          filters: expect.objectContaining({ children: expect.any(Array) }),
+        }),
+      ),
+    );
+    expect(
+      search.mock.calls.every(([request]) => request.page_number === 0),
+    ).toBe(true);
+  });
+
+  it.each(["success", "error"] as const)(
+    "ignores a stale lazy page %s after the query changes",
+    async (outcome) => {
+      const props = makeProps();
+      const initial = {
+        data: [{ id: 1, name: "initial-page" }],
+        total_rows: "too_many" as const,
+        has_next_page: true,
+      };
+      const oldPage = new Deferred<typeof initial>();
+      const newQuery = new Deferred<typeof initial>();
+      const search = vi
+        .fn()
+        .mockResolvedValueOnce(initial)
+        .mockReturnValueOnce(oldPage.promise)
+        .mockReturnValueOnce(newQuery.promise);
+      render(
+        <Wrapper>
+          <LoadingDataTableComponent
+            {...props}
+            lazy={true}
+            totalRows="too_many"
+            selection={null}
+            showColumnSummaries={false}
+            search={search}
+          />
+        </Wrapper>,
+      );
+      await screen.findByText("initial-page");
+      fireEvent.click(screen.getByTestId("next-page-button"));
+      await waitFor(() =>
+        expect(search).toHaveBeenLastCalledWith(
+          expect.objectContaining({ page_number: 1 }),
+        ),
+      );
+      expect(screen.getByTestId("next-page-button")).toBeDisabled();
+
+      fireEvent.change(screen.getByPlaceholderText("Search..."), {
+        target: { value: "current" },
+      });
+      await waitFor(() =>
+        expect(search).toHaveBeenLastCalledWith(
+          expect.objectContaining({ query: "current", page_number: 0 }),
+        ),
+      );
+      await act(async () => {
+        newQuery.resolve({
+          data: [{ id: 2, name: "latest-page" }],
+          total_rows: "too_many",
+          has_next_page: false,
+        });
+      });
+      await screen.findByText("latest-page");
+
+      await act(async () => {
+        if (outcome === "success") {
+          oldPage.resolve({
+            ...initial,
+            data: [{ id: 3, name: "stale-result" }],
+          });
+        } else {
+          oldPage.reject(new Error("stale-page-error"));
+        }
+      });
+      expect(screen.getByText("latest-page")).toBeInTheDocument();
+      expect(screen.queryByText("stale-result")).not.toBeInTheDocument();
+      expect(screen.queryByText("stale-page-error")).not.toBeInTheDocument();
+      expect(screen.getByTestId("previous-page-button")).toBeDisabled();
+      expect(screen.getByTestId("next-page-button")).toBeDisabled();
+    },
+  );
+
+  it("recovers from a failed lazy page by navigating back", async () => {
+    const props = makeProps();
+    const initial = {
+      data: [{ id: 1, name: "initial-page" }],
+      total_rows: "too_many" as const,
+      has_next_page: true,
+    };
+    const failedPage = new Deferred<typeof initial>();
+    const search = vi
+      .fn()
+      .mockResolvedValueOnce(initial)
+      .mockReturnValueOnce(failedPage.promise)
+      .mockResolvedValueOnce({
+        ...initial,
+        data: [{ id: 1, name: "recovered-page" }],
+      })
+      .mockResolvedValueOnce({
+        ...initial,
+        data: [{ id: 2, name: "last-page" }],
+        has_next_page: false,
+      });
+    render(
+      <Wrapper>
+        <LoadingDataTableComponent
+          {...props}
+          lazy={true}
+          totalRows="too_many"
+          selection={null}
+          showColumnSummaries={false}
+          search={search}
+        />
+      </Wrapper>,
+    );
+    await screen.findByText("initial-page");
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await waitFor(() =>
+      expect(search).toHaveBeenLastCalledWith(
+        expect.objectContaining({ page_number: 1 }),
+      ),
+    );
+    expect(screen.getByTestId("next-page-button")).toBeDisabled();
+    expect(screen.getByText("initial-page")).toBeInTheDocument();
+    await act(async () => {
+      failedPage.reject(new Error("page-fetch-failed"));
+    });
+    await screen.findByText("page-fetch-failed");
+    expect(screen.getByTestId("next-page-button")).toBeDisabled();
+    expect(screen.getByTestId("previous-page-button")).toBeEnabled();
+
+    fireEvent.click(screen.getByTestId("previous-page-button"));
+    await screen.findByText("recovered-page");
+    expect(search).toHaveBeenLastCalledWith(
+      expect.objectContaining({ page_number: 0 }),
+    );
+    expect(screen.queryByText("page-fetch-failed")).not.toBeInTheDocument();
+    expect(screen.getByTestId("next-page-button")).toBeEnabled();
+    fireEvent.click(screen.getByTestId("next-page-button"));
+    await screen.findByText("last-page");
+    expect(screen.getByTestId("next-page-button")).toBeDisabled();
+  });
+
   it("requests only the first page with the new configured page size", async () => {
     const props = makeProps();
     const view = (pageSize: number) => (