@marimo-team/islands 0.23.2-dev25 → 0.23.2-dev27

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") || ""}

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

@@ -1,9 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 "use no memo";
 
-import type { RowData } from "@tanstack/react-table";
+import type { ColumnFiltersState, RowData } from "@tanstack/react-table";
 import type { DataType } from "@/core/kernel/messages";
-import type { ConditionType } from "@/plugins/impl/data-frames/schema";
+import type {
+  FilterConditionType,
+  FilterGroupType,
+} from "@/plugins/impl/data-frames/schema";
 import type { ColumnId } from "@/plugins/impl/data-frames/types";
 import type { OperatorType } from "@/plugins/impl/data-frames/utils/operators";
 import { assertNever } from "@/utils/assertNever";
@@ -84,28 +87,34 @@ export type ColumnFilterForType<T extends FilterType> = T extends FilterType
 export function filterToFilterCondition(
   columnIdString: string,
   filter: ColumnFilterValue | undefined,
-): ConditionType[] | ConditionType {
+): FilterConditionType[] {
   if (!filter) {
     return [];
   }
   const columnId = columnIdString as ColumnId;
 
   if (filter.operator === "is_null" || filter.operator === "is_not_null") {
-    return {
-      column_id: columnId,
-      operator: filter.operator,
-      value: undefined,
-    };
+    return [
+      {
+        column_id: columnId,
+        operator: filter.operator,
+        value: undefined,
+        type: "condition",
+        negate: false,
+      },
+    ];
   }
 
   switch (filter.type) {
     case "number": {
-      const conditions: ConditionType[] = [];
+      const conditions: FilterConditionType[] = [];
       if (filter.min !== undefined) {
         conditions.push({
           column_id: columnId,
           operator: ">=",
           value: filter.min,
+          type: "condition",
+          negate: false,
         });
       }
       if (filter.max !== undefined) {
@@ -113,23 +122,31 @@ export function filterToFilterCondition(
           column_id: columnId,
           operator: "<=",
           value: filter.max,
+          type: "condition",
+          negate: false,
         });
       }
       return conditions;
     }
     case "text":
-      return {
-        column_id: columnId,
-        operator: filter.operator,
-        value: filter.text,
-      };
+      return [
+        {
+          column_id: columnId,
+          operator: filter.operator,
+          value: filter.text,
+          type: "condition",
+          negate: false,
+        },
+      ];
     case "datetime": {
-      const conditions: ConditionType[] = [];
+      const conditions: FilterConditionType[] = [];
       if (filter.min !== undefined) {
         conditions.push({
           column_id: columnId,
           operator: ">=",
           value: filter.min.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       if (filter.max !== undefined) {
@@ -137,17 +154,21 @@ export function filterToFilterCondition(
           column_id: columnId,
           operator: "<=",
           value: filter.max.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       return conditions;
     }
     case "date": {
-      const conditions: ConditionType[] = [];
+      const conditions: FilterConditionType[] = [];
       if (filter.min !== undefined) {
         conditions.push({
           column_id: columnId,
           operator: ">=",
           value: filter.min.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       if (filter.max !== undefined) {
@@ -155,17 +176,21 @@ export function filterToFilterCondition(
           column_id: columnId,
           operator: "<=",
           value: filter.max.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       return conditions;
     }
     case "time": {
-      const conditions: ConditionType[] = [];
+      const conditions: FilterConditionType[] = [];
       if (filter.min !== undefined) {
         conditions.push({
           column_id: columnId,
           operator: ">=",
           value: filter.min.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       if (filter.max !== undefined) {
@@ -173,24 +198,34 @@ export function filterToFilterCondition(
           column_id: columnId,
           operator: "<=",
           value: filter.max.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       return conditions;
     }
     case "boolean":
       if (filter.value) {
-        return {
-          column_id: columnId,
-          operator: "is_true",
-          value: undefined,
-        };
+        return [
+          {
+            column_id: columnId,
+            operator: "is_true",
+            value: undefined,
+            type: "condition",
+            negate: false,
+          },
+        ];
       }
       if (!filter.value) {
-        return {
-          column_id: columnId,
-          operator: "is_false",
-          value: undefined,
-        };
+        return [
+          {
+            column_id: columnId,
+            operator: "is_false",
+            value: undefined,
+            type: "condition",
+            negate: false,
+          },
+        ];
       }
 
       return [];
@@ -200,16 +235,35 @@ export function filterToFilterCondition(
         Logger.warn("Invalid operator for select filter", {
           operator: filter.operator,
         });
-        operator = "in"; // default to in operator
+        operator = "in";
       }
-      return {
-        column_id: columnId,
-        operator,
-        value: filter.options,
-      };
+      return [
+        {
+          column_id: columnId,
+          operator,
+          value: filter.options,
+          type: "condition",
+          negate: false,
+        },
+      ];
     }
 
     default:
       assertNever(filter);
   }
 }
+
+export function filtersToFilterGroup(
+  columnFilters: ColumnFiltersState,
+): FilterGroupType {
+  const conditions = columnFilters.flatMap((filter) =>
+    filterToFilterCondition(filter.id, filter.value as ColumnFilterValue),
+  );
+  // To maintain existing behavior "and" all the conditions
+  return {
+    type: "group",
+    operator: "and",
+    children: conditions,
+    negate: false,
+  };
+}