@marimo-team/islands 0.23.2-dev2 → 0.23.2-dev20

package/dist/{radar-ZZBFDIW7-DwFrOJDj.js → radar-ZZBFDIW7-xwh47Yzn.js}

@@ -1,6 +1,6 @@
-import "./chunk-TCCFYFTB-Clbl-fTg.js";
+import "./chunk-TCCFYFTB-BdE6BTq1.js";
 import "./main-XimWhSi_.js";
-import { n as createRadarServices, t as RadarModule } from "./chunk-TQ3KTPDO-CFkSQ30e.js";
+import { n as createRadarServices, t as RadarModule } from "./chunk-TQ3KTPDO-BCXCq8f2.js";
 export {
   createRadarServices
 };

package/dist/{requirementDiagram-UZGBJVZJ-D0zpQnKC.js → requirementDiagram-UZGBJVZJ-B3nnp0VG.js}

@@ -1,16 +1,16 @@
 var _a;
 import "./purify.es-hTCfRGdl.js";
-import { g as utils_default } from "./chunk-S3R3BYOJ-B0UOFJwq.js";
+import { g as utils_default } from "./chunk-S3R3BYOJ-DVdRer7T.js";
 import { i as log, n as __export, r as __name } from "./src-DbP20yFZ.js";
 import { B as setAccTitle, C as getDiagramTitle, U as setDiagramTitle, _ as getAccDescription, a as clear, b as getConfig2, v as getAccTitle, z as setAccDescription } from "./chunk-ABZYJK2D-CZYCCtLy.js";
 import "./chunk-HN2XXSSU-DAhNp1ig.js";
 import "./chunk-CVBHYZKI-BXHgce-x.js";
 import "./chunk-ATLVNIR6-DaOzLLgN.js";
 import "./dist-BjWd_Ei9.js";
-import "./chunk-JA3XYJ7Z-BcPEfxk_.js";
-import "./chunk-JZLCHNYA-2bnLL3xL.js";
-import "./chunk-QXUST7PY-Ch6F5Obl.js";
-import { r as render, t as getRegisteredLayoutAlgorithm } from "./chunk-N4CR4FBY-CpZSuGSU.js";
+import "./chunk-JA3XYJ7Z-B2BoMdpr.js";
+import "./chunk-JZLCHNYA-CkHD9mQU.js";
+import "./chunk-QXUST7PY-BnSZbSK7.js";
+import { r as render, t as getRegisteredLayoutAlgorithm } from "./chunk-N4CR4FBY-DDeXUk3y.js";
 import { t as getDiagramElement } from "./chunk-55IACEB6-DRsSqxbU.js";
 import { t as setupViewPortForSVG } from "./chunk-QN33PNHL-B9p5ojHB.js";
 var parser = (function() {

package/dist/{sequenceDiagram-WL72ISMW-D1BJxLjH.js → sequenceDiagram-WL72ISMW-D2mpRRG2.js}

@@ -1,6 +1,6 @@
 var _a;
 import "./purify.es-hTCfRGdl.js";
-import { g as utils_default, p as parseFontSize, t as ZERO_WIDTH_SPACE } from "./chunk-S3R3BYOJ-B0UOFJwq.js";
+import { g as utils_default, p as parseFontSize, t as ZERO_WIDTH_SPACE } from "./chunk-S3R3BYOJ-DVdRer7T.js";
 import { i as log, r as __name, t as select_default } from "./src-DbP20yFZ.js";
 import { B as setAccTitle, C as getDiagramTitle, E as getUrl, H as setConfig2, I as sanitizeText, N as renderKatexSanitized, O as hasKatex, U as setDiagramTitle, _ as getAccDescription, a as clear, b as getConfig2, c as configureSvgSize, i as calculateMathMLDimensions, r as assignWithDepth_default, s as common_default, v as getAccTitle, y as getConfig, z as setAccDescription } from "./chunk-ABZYJK2D-CZYCCtLy.js";
 import { n as load, t as JSON_SCHEMA } from "./chunk-MI3HLSF2-AKwFNP3m.js";

package/dist/{stateDiagram-FKZM4ZOC-B1S8jGMn.js → stateDiagram-FKZM4ZOC-QD9Wuca0.js}

@@ -1,22 +1,22 @@
-import { t as layout } from "./dagre-QVd-lCXU.js";
-import { t as Graph } from "./graphlib-BV1_gi0C.js";
+import { t as layout } from "./dagre-BLW2E2fh.js";
+import { t as Graph } from "./graphlib-Cr691-na.js";
 import "./purify.es-hTCfRGdl.js";
 import { _ as basis_default } from "./step-qd10PbTJ.js";
 import { t as line_default } from "./line-PAEmCpyD.js";
-import { g as utils_default } from "./chunk-S3R3BYOJ-B0UOFJwq.js";
+import { g as utils_default } from "./chunk-S3R3BYOJ-DVdRer7T.js";
 import { i as log, r as __name, t as select_default } from "./src-DbP20yFZ.js";
 import { E as getUrl, b as getConfig2, c as configureSvgSize, s as common_default } from "./chunk-ABZYJK2D-CZYCCtLy.js";
 import "./chunk-HN2XXSSU-DAhNp1ig.js";
 import "./chunk-CVBHYZKI-BXHgce-x.js";
 import "./chunk-ATLVNIR6-DaOzLLgN.js";
 import "./dist-BjWd_Ei9.js";
-import "./chunk-JA3XYJ7Z-BcPEfxk_.js";
-import "./chunk-JZLCHNYA-2bnLL3xL.js";
-import "./chunk-QXUST7PY-Ch6F5Obl.js";
-import "./chunk-N4CR4FBY-CpZSuGSU.js";
+import "./chunk-JA3XYJ7Z-B2BoMdpr.js";
+import "./chunk-JZLCHNYA-CkHD9mQU.js";
+import "./chunk-QXUST7PY-BnSZbSK7.js";
+import "./chunk-N4CR4FBY-DDeXUk3y.js";
 import "./chunk-55IACEB6-DRsSqxbU.js";
 import "./chunk-QN33PNHL-B9p5ojHB.js";
-import { i as styles_default, n as stateDiagram_default, t as StateDB } from "./chunk-DI55MBZ5-DITY3EyP.js";
+import { i as styles_default, n as stateDiagram_default, t as StateDB } from "./chunk-DI55MBZ5-CYNE3N2j.js";
 var drawStartState = /* @__PURE__ */ __name((e) => e.append("circle").attr("class", "start-state").attr("r", getConfig2().state.sizeUnit).attr("cx", getConfig2().state.padding + getConfig2().state.sizeUnit).attr("cy", getConfig2().state.padding + getConfig2().state.sizeUnit), "drawStartState"), drawDivider = /* @__PURE__ */ __name((e) => e.append("line").style("stroke", "grey").style("stroke-dasharray", "3").attr("x1", getConfig2().state.textHeight).attr("class", "divider").attr("x2", getConfig2().state.textHeight * 2).attr("y1", 0).attr("y2", 0), "drawDivider"), drawSimpleState = /* @__PURE__ */ __name((e, h) => {
   let g = e.append("text").attr("x", 2 * getConfig2().state.padding).attr("y", getConfig2().state.textHeight + 2 * getConfig2().state.padding).attr("font-size", getConfig2().state.fontSize).attr("class", "state-title").text(h.id), _ = g.node().getBBox();
   return e.insert("rect", ":first-child").attr("x", getConfig2().state.padding).attr("y", getConfig2().state.padding).attr("width", _.width + 2 * getConfig2().state.padding).attr("height", _.height + 2 * getConfig2().state.padding).attr("rx", getConfig2().state.radius), g;

package/dist/{stateDiagram-v2-4FDKWEC3-BH5ozUbc.js → stateDiagram-v2-4FDKWEC3-DnUhJ525.js}

@@ -1,18 +1,18 @@
 import "./purify.es-hTCfRGdl.js";
-import "./chunk-S3R3BYOJ-B0UOFJwq.js";
+import "./chunk-S3R3BYOJ-DVdRer7T.js";
 import { r as __name } from "./src-DbP20yFZ.js";
 import "./chunk-ABZYJK2D-CZYCCtLy.js";
 import "./chunk-HN2XXSSU-DAhNp1ig.js";
 import "./chunk-CVBHYZKI-BXHgce-x.js";
 import "./chunk-ATLVNIR6-DaOzLLgN.js";
 import "./dist-BjWd_Ei9.js";
-import "./chunk-JA3XYJ7Z-BcPEfxk_.js";
-import "./chunk-JZLCHNYA-2bnLL3xL.js";
-import "./chunk-QXUST7PY-Ch6F5Obl.js";
-import "./chunk-N4CR4FBY-CpZSuGSU.js";
+import "./chunk-JA3XYJ7Z-B2BoMdpr.js";
+import "./chunk-JZLCHNYA-CkHD9mQU.js";
+import "./chunk-QXUST7PY-BnSZbSK7.js";
+import "./chunk-N4CR4FBY-DDeXUk3y.js";
 import "./chunk-55IACEB6-DRsSqxbU.js";
 import "./chunk-QN33PNHL-B9p5ojHB.js";
-import { i as styles_default, n as stateDiagram_default, r as stateRenderer_v3_unified_default, t as StateDB } from "./chunk-DI55MBZ5-DITY3EyP.js";
+import { i as styles_default, n as stateDiagram_default, r as stateRenderer_v3_unified_default, t as StateDB } from "./chunk-DI55MBZ5-CYNE3N2j.js";
 var diagram = {
   parser: stateDiagram_default,
   get db() {

package/dist/{treemap-GDKQZRPO-bx2ngsgN.js → treemap-GDKQZRPO-5ZsmvXgc.js}

@@ -1,6 +1,6 @@
-import "./chunk-TCCFYFTB-Clbl-fTg.js";
+import "./chunk-TCCFYFTB-BdE6BTq1.js";
 import "./main-XimWhSi_.js";
-import { n as createTreemapServices, t as TreemapModule } from "./chunk-B2363JML-Br0eA2T3.js";
+import { n as createTreemapServices, t as TreemapModule } from "./chunk-B2363JML-72CRxZbk.js";
 export {
   createTreemapServices
 };

package/dist/{xychartDiagram-PRI3JC2R-CuAZiqHS.js → xychartDiagram-PRI3JC2R-BMsB7VdF.js}

@@ -5,13 +5,13 @@ import { n as ordinal } from "./ordinal-D7fa8Sey.js";
 import { t as range } from "./range-BYuZFTbA.js";
 import "./defaultLocale-qS7DaAmi.js";
 import { t as line_default } from "./line-PAEmCpyD.js";
-import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-B0UOFJwq.js";
+import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-DVdRer7T.js";
 import { n as initRange } from "./init-Cge3yl4r.js";
 import { i as log, r as __name } from "./src-DbP20yFZ.js";
 import { B as setAccTitle, C as getDiagramTitle, I as sanitizeText, T as getThemeVariables3, U as setDiagramTitle, _ as getAccDescription, a as clear, c as configureSvgSize, d as defaultConfig_default, v as getAccTitle, y as getConfig, z as setAccDescription } from "./chunk-ABZYJK2D-CZYCCtLy.js";
 import { t as selectSvgElement } from "./chunk-EXTU4WIE-jUPSAk3i.js";
 import "./dist-BjWd_Ei9.js";
-import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-BcPEfxk_.js";
+import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-B2BoMdpr.js";
 function band() {
   var e = ordinal().unknown(void 0), w = e.domain, T = e.range, D = 0, O = 1, k, A, j = false, M = 0, N = 0, P = 0.5;
   delete e.unknown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.2-dev2",
+  "version": "0.23.2-dev20",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -54,7 +54,7 @@
     "@lezer/lr": "^1.4.8",
     "@lezer/markdown": "^1.6.3",
     "@lezer/python": "^1.1.18",
-    "@marimo-team/codemirror-ai": "^0.3.5",
+    "@marimo-team/codemirror-ai": "^0.3.7",
     "@marimo-team/codemirror-languageserver": "^1.16.12",
     "@marimo-team/codemirror-mcp": "^0.1.5",
     "@marimo-team/codemirror-sql": "^0.2.4",

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

@@ -142,7 +142,11 @@ export const TableBottomBar = <TData,>({
 
     return (
       <span>
-        {prettifyRowColumnCount(table.getRowCount(), totalColumns, locale)}
+        {prettifyRowColumnCount({
+          numRows: table.getRowCount(),
+          totalColumns,
+          locale,
+        })}
       </span>
     );
   };

package/src/components/data-table/__tests__/filters.test.ts

@@ -0,0 +1,304 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import {
+  filterToFilterCondition,
+  filtersToFilterGroup,
+  Filter,
+} from "../filters";
+import {
+  FilterConditionSchema,
+  FilterGroupSchema,
+} from "@/plugins/impl/data-frames/schema";
+
+describe("filterToFilterCondition", () => {
+  it("returns empty array for undefined filter", () => {
+    expect(filterToFilterCondition("col", undefined)).toEqual([]);
+  });
+
+  it("handles is_null filter", () => {
+    const result = filterToFilterCondition(
+      "col",
+      Filter.number({ operator: "is_null" }),
+    );
+    expect(result).toEqual([
+      {
+        column_id: "col",
+        operator: "is_null",
+        value: undefined,
+        type: "condition",
+        negate: false,
+      },
+    ]);
+  });
+
+  it("handles is_not_null filter", () => {
+    const result = filterToFilterCondition(
+      "col",
+      Filter.number({ operator: "is_not_null" }),
+    );
+    expect(result).toEqual([
+      {
+        column_id: "col",
+        operator: "is_not_null",
+        value: undefined,
+        type: "condition",
+        negate: false,
+      },
+    ]);
+  });
+
+  it("handles number filter with min only", () => {
+    const result = filterToFilterCondition("age", Filter.number({ min: 18 }));
+    expect(result).toHaveLength(1);
+    expect(result[0]).toMatchObject({
+      column_id: "age",
+      operator: ">=",
+      value: 18,
+      type: "condition",
+      negate: false,
+    });
+  });
+
+  it("handles number filter with max only", () => {
+    const result = filterToFilterCondition("age", Filter.number({ max: 65 }));
+    expect(result).toHaveLength(1);
+    expect(result[0]).toMatchObject({
+      column_id: "age",
+      operator: "<=",
+      value: 65,
+      type: "condition",
+      negate: false,
+    });
+  });
+
+  it("handles number filter with min and max", () => {
+    const result = filterToFilterCondition(
+      "age",
+      Filter.number({ min: 18, max: 65 }),
+    );
+    expect(result).toHaveLength(2);
+    expect(result[0]).toMatchObject({ operator: ">=", value: 18 });
+    expect(result[1]).toMatchObject({ operator: "<=", value: 65 });
+  });
+
+  it("handles text filter", () => {
+    const result = filterToFilterCondition(
+      "name",
+      Filter.text({ text: "foo", operator: "contains" }),
+    );
+    expect(result).toEqual([
+      {
+        column_id: "name",
+        operator: "contains",
+        value: "foo",
+        type: "condition",
+        negate: false,
+      },
+    ]);
+  });
+
+  it("handles boolean true filter", () => {
+    const result = filterToFilterCondition(
+      "active",
+      Filter.boolean({ value: true }),
+    );
+    expect(result).toEqual([
+      {
+        column_id: "active",
+        operator: "is_true",
+        value: undefined,
+        type: "condition",
+        negate: false,
+      },
+    ]);
+  });
+
+  it("handles boolean false filter", () => {
+    const result = filterToFilterCondition(
+      "active",
+      Filter.boolean({ value: false }),
+    );
+    expect(result).toEqual([
+      {
+        column_id: "active",
+        operator: "is_false",
+        value: undefined,
+        type: "condition",
+        negate: false,
+      },
+    ]);
+  });
+
+  it("handles select in filter", () => {
+    const result = filterToFilterCondition(
+      "status",
+      Filter.select({ options: ["a", "b"], operator: "in" }),
+    );
+    expect(result).toEqual([
+      {
+        column_id: "status",
+        operator: "in",
+        value: ["a", "b"],
+        type: "condition",
+        negate: false,
+      },
+    ]);
+  });
+
+  it("handles date filter with min and max", () => {
+    const min = new Date("2024-01-01");
+    const max = new Date("2024-12-31");
+    const result = filterToFilterCondition(
+      "created",
+      Filter.date({ min, max }),
+    );
+    expect(result).toHaveLength(2);
+    expect(result[0]).toMatchObject({
+      operator: ">=",
+      value: min.toISOString(),
+    });
+    expect(result[1]).toMatchObject({
+      operator: "<=",
+      value: max.toISOString(),
+    });
+  });
+
+  it("every condition has type and negate fields", () => {
+    const result = filterToFilterCondition(
+      "col",
+      Filter.number({ min: 1, max: 10 }),
+    );
+    for (const condition of result) {
+      expect(condition).toHaveProperty("type", "condition");
+      expect(condition).toHaveProperty("negate", false);
+    }
+  });
+});
+
+describe("filtersToFilterGroup", () => {
+  it("returns empty AND group for no filters", () => {
+    const result = filtersToFilterGroup([]);
+    expect(result).toEqual({
+      type: "group",
+      operator: "and",
+      children: [],
+      negate: false,
+    });
+  });
+
+  it("wraps single filter in AND group", () => {
+    const result = filtersToFilterGroup([
+      { id: "age", value: Filter.number({ min: 18 }) },
+    ]);
+    expect(result.type).toBe("group");
+    expect(result.operator).toBe("and");
+    expect(result.negate).toBe(false);
+    expect(result.children).toHaveLength(1);
+  });
+
+  it("wraps multiple filters in AND group", () => {
+    const result = filtersToFilterGroup([
+      { id: "age", value: Filter.number({ min: 18 }) },
+      { id: "name", value: Filter.text({ text: "foo", operator: "contains" }) },
+    ]);
+    expect(result.children).toHaveLength(2);
+    expect(result.operator).toBe("and");
+  });
+
+  it("flattens multi-condition filters", () => {
+    const result = filtersToFilterGroup([
+      { id: "age", value: Filter.number({ min: 18, max: 65 }) },
+    ]);
+    // min + max = 2 conditions
+    expect(result.children).toHaveLength(2);
+  });
+});
+
+describe("schema validation", () => {
+  it("FilterConditionSchema accepts valid condition", () => {
+    const result = FilterConditionSchema.safeParse({
+      column_id: "age",
+      operator: ">=",
+      value: 18,
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.type).toBe("condition");
+      expect(result.data.negate).toBe(false);
+    }
+  });
+
+  it("FilterConditionSchema defaults type and negate", () => {
+    const result = FilterConditionSchema.safeParse({
+      column_id: "age",
+      operator: "==",
+      value: 5,
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.type).toBe("condition");
+      expect(result.data.negate).toBe(false);
+    }
+  });
+
+  it("FilterConditionSchema accepts negate=true", () => {
+    const result = FilterConditionSchema.safeParse({
+      column_id: "age",
+      operator: "==",
+      value: 5,
+      negate: true,
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.negate).toBe(true);
+    }
+  });
+
+  it("FilterGroupSchema accepts valid group", () => {
+    const result = FilterGroupSchema.safeParse({
+      type: "group",
+      operator: "and",
+      children: [{ column_id: "age", operator: ">=", value: 18 }],
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("FilterGroupSchema accepts nested groups", () => {
+    const result = FilterGroupSchema.safeParse({
+      type: "group",
+      operator: "or",
+      children: [
+        {
+          type: "group",
+          operator: "and",
+          children: [
+            { column_id: "a", operator: "==", value: 1 },
+            { column_id: "b", operator: ">", value: 2 },
+          ],
+        },
+        { column_id: "c", operator: "==", value: 3 },
+      ],
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("FilterGroupSchema rejects invalid operator", () => {
+    const result = FilterGroupSchema.safeParse({
+      type: "group",
+      operator: "xor",
+      children: [],
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it("FilterGroupSchema defaults fields", () => {
+    const result = FilterGroupSchema.safeParse({});
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.type).toBe("group");
+      expect(result.data.operator).toBe("and");
+      expect(result.data.children).toEqual([]);
+      expect(result.data.negate).toBe(false);
+    }
+  });
+});

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

@@ -1,144 +1,58 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { expect, test } from "vitest";
-import { getPageRanges } from "../pagination";
-import type { PageRange } from "../types";
+import { matchingPageRanges } from "../pagination";
 
-function getLabels(currentPage: number): string[] {
-  const ranges = getPageRanges(currentPage, 200);
-  return ranges.map((item: PageRange) =>
-    item.type === "ellipsis" ? "..." : String(item.page),
-  );
-}
+test("empty prefix returns no ranges", () => {
+  expect(matchingPageRanges("", 500)).toEqual([]);
+});
+
+test("zero prefix returns no ranges", () => {
+  expect(matchingPageRanges("0", 500)).toEqual([]);
+});
 
-test("pagination start / middle / end", () => {
-  expect(getLabels(1)).toMatchInlineSnapshot(`
-    [
-      "1",
-      "2",
-      "3",
-      "4",
-      "5",
-      "6",
-      "7",
-      "8",
-      "9",
-      "10",
-      "...",
-      "96",
-      "97",
-      "98",
-      "99",
-      "100",
-      "101",
-      "102",
-      "103",
-      "104",
-      "105",
-      "...",
-      "191",
-      "192",
-      "193",
-      "194",
-      "195",
-      "196",
-      "197",
-      "198",
-      "199",
-      "200",
-    ]
-  `);
+test("leading-zero prefix returns no ranges", () => {
+  expect(matchingPageRanges("01", 500)).toEqual([]);
+});
+
+test("single digit prefix", () => {
+  expect(matchingPageRanges("5", 500)).toEqual([
+    [5, 5],
+    [50, 59],
+    [500, 500],
+  ]);
+});
 
-  // all fall in the top/middle/bottom 10
-  expect(getLabels(1)).toEqual(getLabels(10));
-  expect(getLabels(96)).toEqual(getLabels(105));
-  expect(getLabels(191)).toEqual(getLabels(200));
+test("single digit prefix with exact totalPages boundary", () => {
+  expect(matchingPageRanges("5", 55)).toEqual([
+    [5, 5],
+    [50, 55],
+  ]);
+});
+
+test("multi-digit prefix", () => {
+  expect(matchingPageRanges("12", 5000)).toEqual([
+    [12, 12],
+    [120, 129],
+    [1200, 1299],
+  ]);
+});
+
+test("prefix larger than totalPages returns no ranges", () => {
+  expect(matchingPageRanges("999", 100)).toEqual([]);
+});
 
-  // Check off by one
-  expect(getLabels(1)).not.toEqual(getLabels(11));
-  expect(getLabels(1)).not.toEqual(getLabels(95));
-  expect(getLabels(1)).not.toEqual(getLabels(106));
-  expect(getLabels(1)).not.toEqual(getLabels(190));
+test("prefix equal to totalPages", () => {
+  expect(matchingPageRanges("100", 100)).toEqual([[100, 100]]);
 });
 
-test("pagination lower middle", () => {
-  expect(getLabels(50)).toMatchInlineSnapshot(`
-    [
-      "1",
-      "2",
-      "3",
-      "4",
-      "5",
-      "6",
-      "7",
-      "8",
-      "9",
-      "10",
-      "...",
-      "50",
-      "...",
-      "96",
-      "97",
-      "98",
-      "99",
-      "100",
-      "101",
-      "102",
-      "103",
-      "104",
-      "105",
-      "...",
-      "191",
-      "192",
-      "193",
-      "194",
-      "195",
-      "196",
-      "197",
-      "198",
-      "199",
-      "200",
-    ]
-  `);
+test("prefix 1 with small totalPages", () => {
+  expect(matchingPageRanges("1", 10)).toEqual([
+    [1, 1],
+    [10, 10],
+  ]);
 });
 
-test("pagination upper middle", () => {
-  expect(getLabels(150)).toMatchInlineSnapshot(`
-    [
-      "1",
-      "2",
-      "3",
-      "4",
-      "5",
-      "6",
-      "7",
-      "8",
-      "9",
-      "10",
-      "...",
-      "96",
-      "97",
-      "98",
-      "99",
-      "100",
-      "101",
-      "102",
-      "103",
-      "104",
-      "105",
-      "...",
-      "150",
-      "...",
-      "191",
-      "192",
-      "193",
-      "194",
-      "195",
-      "196",
-      "197",
-      "198",
-      "199",
-      "200",
-    ]
-  `);
+test("prefix 1 with totalPages=1", () => {
+  expect(matchingPageRanges("1", 1)).toEqual([[1, 1]]);
 });

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -74,7 +74,7 @@ export const ColumnExplorerPanel = ({
   return (
     <div className="mb-3">
       <span className="text-xs font-semibold ml-2 flex">
-        {prettifyRowColumnCount(totalRows, totalColumns, locale)}
+        {prettifyRowColumnCount({ numRows: totalRows, totalColumns, locale })}
         <CopyClipboardIcon
           tooltip="Copy column names"
           value={columns?.map(([columnName]) => columnName).join(",\n") || ""}