@marimo-team/islands 0.23.2-dev12 → 0.23.2-dev14

package/dist/main.js

@@ -35,7 +35,7 @@ import { a as Plus, i as Trash, n as ErrorBoundary, o as Pencil, r as require_pr
 import { n as clsx_default } from "./clsx-CwTY0BxM.js";
 import { t as require_react_dom } from "./react-dom-D5FDLRUB.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-9hcJiI23.js";
-import { $ as StyleNamespace, A as looseObject, B as union, C as any, F as optional, G as parse$3, I as record, J as prettifyError, K as parseAsync, N as number, P as object, Q as isInVscodeExtension, R as string, S as _null, T as boolean, U as ZodError, V as unknown, X as withFullScreenAsRoot, Y as MAX_HEIGHT_OFFSET, Z as withSmartCollisionBoundary, _ as ZodString, _t as Primitive$1, a as ZodIssueCode, b as _enum, c as ZodBoolean, d as ZodDiscriminatedUnion, dt as Presence, f as ZodEnum, ft as useControllableState, g as ZodOptional, gt as createContextScope, h as ZodObject, i as string$1, j as nan, k as literal, l as ZodDate, lt as useCallbackRef, m as ZodNumber, mt as composeEventHandlers$1, n as date, nt as __awaiter, o as ZodAny, p as ZodLiteral, pt as useLayoutEffect2, q as $ZodError, r as number$1, s as ZodArray, st as DismissableLayer, t as zod_default, u as ZodDefault, ut as useId$12, v as ZodType, vt as dispatchDiscreteCustomEvent, w as array, x as _instanceof, y as ZodUnion, z as tuple } from "./zod-W5ZEjzaE.js";
+import { $ as StyleNamespace, A as looseObject, B as union, C as any, F as optional, G as parse$3, I as record, J as prettifyError, K as parseAsync, N as number, O as lazy$2, P as object, Q as isInVscodeExtension, R as string, S as _null, T as boolean, U as ZodError, V as unknown, X as withFullScreenAsRoot, Y as MAX_HEIGHT_OFFSET, Z as withSmartCollisionBoundary, _ as ZodString, _t as Primitive$1, a as ZodIssueCode, b as _enum, c as ZodBoolean, d as ZodDiscriminatedUnion, dt as Presence, f as ZodEnum, ft as useControllableState, g as ZodOptional, gt as createContextScope, h as ZodObject, i as string$1, j as nan, k as literal, l as ZodDate, lt as useCallbackRef, m as ZodNumber, mt as composeEventHandlers$1, n as date, nt as __awaiter, o as ZodAny, p as ZodLiteral, pt as useLayoutEffect2, q as $ZodError, r as number$1, s as ZodArray, st as DismissableLayer, t as zod_default, u as ZodDefault, ut as useId$12, v as ZodType, vt as dispatchDiscreteCustomEvent, w as array, x as _instanceof, y as ZodUnion, z as tuple } from "./zod-W5ZEjzaE.js";
 import { a as Content$2, c as Root$6, i as prettyError, n as ErrorBanner, o as Overlay, r as CellNotInitializedError, s as Portal$1, t as Banner } from "./error-banner-B_ioHva3.js";
 import { a as TooltipRoot, i as TooltipProvider, n as TooltipContent, o as TooltipTrigger, r as TooltipPortal, t as Tooltip } from "./tooltip-DwNnFsxZ.js";
 import { n as minimalSetup, r as _extends$5, t as esm_default, u as CopyClipboardIcon } from "./esm-CDHI9cuO.js";
@@ -23789,10 +23789,10 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     else if (c.some(_temp2$24)) _ = "An internal error occurred";
     else if (c.some(_temp3$16)) _ = "Ancestor prevented from running", y = "default", S = "text-secondary-foreground";
     else if (c.some(_temp4$9)) _ = "Ancestor stopped", y = "default", S = "text-secondary-foreground";
-    else if (c.some(_temp5$6)) _ = "SQL error";
+    else if (c.some(_temp5$5)) _ = "SQL error";
     else {
       let e2;
-      r[0] === c ? e2 = r[1] : (e2 = c.find(_temp6$6), r[0] = c, r[1] = e2);
+      r[0] === c ? e2 = r[1] : (e2 = c.find(_temp6$5), r[0] = c, r[1] = e2);
       let d2 = e2;
       d2 && "exception_type" in d2 && (_ = d2.exception_type);
     }
@@ -24164,10 +24164,10 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   function _temp4$9(e) {
     return e.type === "ancestor-stopped";
   }
-  function _temp5$6(e) {
+  function _temp5$5(e) {
     return e.type === "sql-error";
   }
-  function _temp6$6(e) {
+  function _temp6$5(e) {
     return e.type === "exception";
   }
   function _temp7$2(e) {
@@ -25715,40 +25715,56 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
   function filterToFilterCondition(e, r) {
     if (!r) return [];
     let c = e;
-    if (r.operator === "is_null" || r.operator === "is_not_null") return {
-      column_id: c,
-      operator: r.operator,
-      value: void 0
-    };
+    if (r.operator === "is_null" || r.operator === "is_not_null") return [
+      {
+        column_id: c,
+        operator: r.operator,
+        value: void 0,
+        type: "condition",
+        negate: false
+      }
+    ];
     switch (r.type) {
       case "number": {
         let e2 = [];
         return r.min !== void 0 && e2.push({
           column_id: c,
           operator: ">=",
-          value: r.min
+          value: r.min,
+          type: "condition",
+          negate: false
         }), r.max !== void 0 && e2.push({
           column_id: c,
           operator: "<=",
-          value: r.max
+          value: r.max,
+          type: "condition",
+          negate: false
         }), e2;
       }
       case "text":
-        return {
-          column_id: c,
-          operator: r.operator,
-          value: r.text
-        };
+        return [
+          {
+            column_id: c,
+            operator: r.operator,
+            value: r.text,
+            type: "condition",
+            negate: false
+          }
+        ];
       case "datetime": {
         let e2 = [];
         return r.min !== void 0 && e2.push({
           column_id: c,
           operator: ">=",
-          value: r.min.toISOString()
+          value: r.min.toISOString(),
+          type: "condition",
+          negate: false
         }), r.max !== void 0 && e2.push({
           column_id: c,
           operator: "<=",
-          value: r.max.toISOString()
+          value: r.max.toISOString(),
+          type: "condition",
+          negate: false
         }), e2;
       }
       case "date": {
@@ -25756,11 +25772,15 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
         return r.min !== void 0 && e2.push({
           column_id: c,
           operator: ">=",
-          value: r.min.toISOString()
+          value: r.min.toISOString(),
+          type: "condition",
+          negate: false
         }), r.max !== void 0 && e2.push({
           column_id: c,
           operator: "<=",
-          value: r.max.toISOString()
+          value: r.max.toISOString(),
+          type: "condition",
+          negate: false
         }), e2;
       }
       case "time": {
@@ -25768,37 +25788,61 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
         return r.min !== void 0 && e2.push({
           column_id: c,
           operator: ">=",
-          value: r.min.toISOString()
+          value: r.min.toISOString(),
+          type: "condition",
+          negate: false
         }), r.max !== void 0 && e2.push({
           column_id: c,
           operator: "<=",
-          value: r.max.toISOString()
+          value: r.max.toISOString(),
+          type: "condition",
+          negate: false
         }), e2;
       }
       case "boolean":
-        return r.value ? {
-          column_id: c,
-          operator: "is_true",
-          value: void 0
-        } : r.value ? [] : {
-          column_id: c,
-          operator: "is_false",
-          value: void 0
-        };
+        return r.value ? [
+          {
+            column_id: c,
+            operator: "is_true",
+            value: void 0,
+            type: "condition",
+            negate: false
+          }
+        ] : r.value ? [] : [
+          {
+            column_id: c,
+            operator: "is_false",
+            value: void 0,
+            type: "condition",
+            negate: false
+          }
+        ];
       case "select": {
         let e2 = r.operator;
         return r.operator !== "in" && r.operator !== "not_in" && (Logger.warn("Invalid operator for select filter", {
           operator: r.operator
-        }), e2 = "in"), {
-          column_id: c,
-          operator: e2,
-          value: r.options
-        };
+        }), e2 = "in"), [
+          {
+            column_id: c,
+            operator: e2,
+            value: r.options,
+            type: "condition",
+            negate: false
+          }
+        ];
       }
       default:
         assertNever(r);
     }
   }
+  function filtersToFilterGroup(e) {
+    return {
+      type: "group",
+      operator: "and",
+      children: e.flatMap((e2) => filterToFilterCondition(e2.id, e2.value)),
+      negate: false
+    };
+  }
   function functionalUpdate(e, r) {
     return typeof e == "function" ? e(r) : e;
   }
@@ -43129,7 +43173,7 @@ ${c}
     r[0] !== c || r[1] !== f ? (h = () => {
       f.setValue(c, "");
     }, r[0] = c, r[1] = f, r[2] = h) : h = r[2];
-    let _ = h, v = _temp5$5, y;
+    let _ = h, v = _temp5$4, y;
     r[3] !== _ || r[4] !== d ? (y = (e2) => {
       let { field: r2 } = e2;
       return (0, import_jsx_runtime.jsxs)(FormItem, {
@@ -43250,7 +43294,7 @@ ${c}
       render: S
     }), r[5] = c, r[6] = y.control, r[7] = S, r[8] = w) : w = r[8], w;
   }, AggregationSelect = (e) => {
-    let r = (0, import_compiler_runtime$80.c)(12), { fieldName: c, selectedDataType: d, binFieldName: f, defaultAggregation: h } = e, _ = useFormContext(), v = d === "string" ? STRING_AGGREGATION_FNS : AGGREGATION_FNS$1, { chartType: y } = useChartFormContext(), S = y !== ChartType.HEATMAP, w = _temp6$5, E = _temp7$1, O;
+    let r = (0, import_compiler_runtime$80.c)(12), { fieldName: c, selectedDataType: d, binFieldName: f, defaultAggregation: h } = e, _ = useFormContext(), v = d === "string" ? STRING_AGGREGATION_FNS : AGGREGATION_FNS$1, { chartType: y } = useChartFormContext(), S = y !== ChartType.HEATMAP, w = _temp6$4, E = _temp7$1, O;
     r[0] !== f || r[1] !== _ ? (O = (e2) => {
       let { value: r2, previousValue: c2, onChange: d2 } = e2;
       r2 === "bin" ? _.setValue(f, true) : c2 === "bin" && _.setValue(f, false), d2(r2);
@@ -43404,7 +43448,7 @@ ${c}
   function _temp4$7(e) {
     return e;
   }
-  function _temp5$5(e) {
+  function _temp5$4(e) {
     let [r, c] = TIME_UNIT_DESCRIPTIONS[e];
     return (0, import_jsx_runtime.jsx)(SelectItem, {
       value: e,
@@ -43416,7 +43460,7 @@ ${c}
       children: r
     }, e);
   }
-  function _temp6$5(e) {
+  function _temp6$4(e) {
     return (0, import_jsx_runtime.jsx)("span", {
       className: "text-xs text-muted-foreground pr-10",
       children: e
@@ -45609,6 +45653,12 @@ ${c}
     "<=": [
       e
     ],
+    between: [
+      object({
+        min: e,
+        max: e
+      })
+    ],
     is_null: [],
     is_not_null: []
   });
@@ -45637,6 +45687,7 @@ ${c}
     not_in: [
       Schema.stringMultiColumnValues
     ],
+    is_empty: [],
     is_null: [],
     is_not_null: []
   }, ALL_OPERATORS = {
@@ -45753,17 +45804,30 @@ ${c}
       special: "radio_group"
     })).default("last")
   });
-  const ConditionSchema = object({
+  const FilterConditionSchema = object({
     column_id,
     operator: _enum(Object.keys(ALL_OPERATORS)).describe(FieldOptions.of({
       label: " "
     })),
+    type: literal("condition").default("condition"),
     value: any().describe(FieldOptions.of({
       label: "Value"
-    }))
+    })),
+    negate: boolean().default(false)
   }).describe(FieldOptions.of({
     direction: "row",
     special: "column_filter"
+  })), FilterGroupSchema = lazy$2(() => object({
+    type: literal("group").default("group"),
+    operator: _enum([
+      "and",
+      "or"
+    ]).default("and"),
+    children: array(union([
+      FilterConditionSchema,
+      FilterGroupSchema
+    ])).default([]),
+    negate: boolean().default(false)
   }));
   var FilterRowsTransformSchema = object({
     type: literal("filter_rows"),
@@ -45773,16 +45837,23 @@ ${c}
     ]).default("keep_rows").describe(FieldOptions.of({
       special: "radio_group"
     })),
-    where: array(ConditionSchema).min(1).describe(FieldOptions.of({
+    where: array(FilterConditionSchema).min(1).describe(FieldOptions.of({
       label: "Value",
       minLength: 1
-    })).transform((e) => e.filter((e2) => isConditionValueValid(e2.operator, e2.value))).default(() => [
+    })).default(() => [
       {
         column_id: "",
         operator: "==",
-        value: ""
-      }
-    ])
+        value: "",
+        type: "condition",
+        negate: false
+      }
+    ]).transform((e) => ({
+      type: "group",
+      operator: "and",
+      children: e.filter((e2) => isConditionValueValid(e2.operator, e2.value)),
+      negate: false
+    }))
   }), GroupByTransformSchema = object({
     type: literal("group_by"),
     column_ids: array(column_id.describe(FieldOptions.of({
@@ -46008,7 +46079,7 @@ ${c}
         descending: boolean()
       })).optional(),
       query: string().optional(),
-      filters: array(ConditionSchema).optional(),
+      filters: FilterGroupSchema.optional(),
       page_number: number(),
       page_size: number(),
       max_columns: number().nullable().optional()
@@ -46166,9 +46237,9 @@ ${c}
         query: M,
         page_number: E.pageIndex,
         page_size: E.pageSize,
-        filters: Y7.flatMap(_temp2$15)
+        filters: filtersToFilterGroup(Y7)
       });
-      if (S2) w2.catch(_temp3$10);
+      if (S2) w2.catch(_temp2$15);
       else {
         let e2 = await w2;
         r2 = e2.data, c2 = e2.raw_data, d2 = e2.total_rows, h = e2.cell_styles || {}, _2 = e2.cell_hover_texts || {};
@@ -46202,15 +46273,15 @@ ${c}
       rows: await loadTableData((await f({
         page_number: e2,
         page_size: 1,
-        sort: y.length > 0 ? y.map(_temp4$6) : void 0,
+        sort: y.length > 0 ? y.map(_temp3$10) : void 0,
         query: M,
-        filters: Y7.flatMap(_temp5$4),
+        filters: filtersToFilterGroup(Y7),
         max_columns: null
       })).data)
     }), r[48] = Y7, r[49] = f, r[50] = M, r[51] = y, r[52] = l9) : l9 = r[52];
     let u9 = l9, d9;
     r[53] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (d9 = () => {
-      O(_temp6$4);
+      O(_temp4$6);
     }, r[53] = d9) : d9 = r[53];
     let f9 = a9 == null ? void 0 : a9.totalRows, p9;
     r[54] === f9 ? p9 = r[55] : (p9 = [
@@ -46512,21 +46583,15 @@ ${c}
     };
   }
   function _temp2$15(e) {
-    return filterToFilterCondition(e.id, e.value);
-  }
-  function _temp3$10(e) {
     Logger.error(e);
   }
-  function _temp4$6(e) {
+  function _temp3$10(e) {
     return {
       by: e.id,
       descending: e.desc
     };
   }
-  function _temp5$4(e) {
-    return filterToFilterCondition(e.id, e.value);
-  }
-  function _temp6$4(e) {
+  function _temp4$6(e) {
     return e.pageIndex === 0 ? e : {
       ...e,
       pageIndex: 0
@@ -49109,7 +49174,7 @@ ${c}
         descending: boolean()
       })).optional(),
       query: string().optional(),
-      filters: array(ConditionSchema).optional(),
+      filters: FilterGroupSchema.optional(),
       page_number: number(),
       page_size: number()
     })).output(object({
@@ -68770,7 +68835,7 @@ ${c}
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.2-dev12"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.2-dev14"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

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

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/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,
+  };
+}

package/src/core/codemirror/__tests__/__snapshots__/setup.test.ts.snap

@@ -9,9 +9,7 @@ exports[`snapshot all duplicate keymaps > default keymaps 2`] = `
     },
     {
       "key": "ArrowDown",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowDown",
@@ -27,9 +25,7 @@ exports[`snapshot all duplicate keymaps > default keymaps 2`] = `
     },
     {
       "key": "ArrowUp",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowUp",
@@ -118,15 +114,12 @@ exports[`snapshot all duplicate keymaps > vim keymaps 2`] = `
     },
     {
       "key": "ArrowDown",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowDown",
-      "preventDefault": true,
-      "run": "cursorLineDown",
-      "shift": "selectLineDown",
+      "run": "<no name>",
+      "shift": "<no name>",
     },
   ],
   "ArrowUp": [
@@ -136,15 +129,12 @@ exports[`snapshot all duplicate keymaps > vim keymaps 2`] = `
     },
     {
       "key": "ArrowUp",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowUp",
-      "preventDefault": true,
-      "run": "cursorLineUp",
-      "shift": "selectLineUp",
+      "run": "<no name>",
+      "shift": "<no name>",
     },
   ],
   "Backspace": [

package/src/core/codemirror/cells/extensions.ts

@@ -169,8 +169,6 @@ function cellKeymaps({
       },
       {
         key: "ArrowUp",
-        preventDefault: true,
-        stopPropagation: true,
         run: (ev) => {
           // Skip if we are in the middle of an autocompletion
           const hasAutocomplete = completionStatus(ev.state);
@@ -188,8 +186,6 @@ function cellKeymaps({
       },
       {
         key: "ArrowDown",
-        preventDefault: true,
-        stopPropagation: true,
         run: (ev) => {
           // Skip if we are in the middle of an autocompletion
           const hasAutocomplete = completionStatus(ev.state);

package/src/core/codemirror/keymaps/keymaps.ts

@@ -1,8 +1,16 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import {
+  cursorCharLeft,
+  cursorCharRight,
+  cursorLineDown,
+  cursorLineUp,
   insertNewlineAndIndent,
   defaultKeymap as originalDefaultKeymap,
+  selectCharLeft,
+  selectCharRight,
+  selectLineDown,
+  selectLineUp,
   toggleBlockComment,
   toggleComment,
 } from "@codemirror/commands";
@@ -13,7 +21,7 @@ import {
   type KeyBinding,
   keymap,
 } from "@codemirror/view";
-import { getCM, vim } from "@replit/codemirror-vim";
+import { type CodeMirror, getCM, vim } from "@replit/codemirror-vim";
 import type { KeymapConfig } from "@/core/config/config-schema";
 import type { HotkeyProvider } from "@/core/hotkeys/hotkeys";
 import { logNever } from "@/utils/assertNever";
@@ -62,6 +70,12 @@ export function keymapBundle(
             },
           ),
         ),
+        // Arrow keys: use CodeMirror's cursor movement except in vim visual
+        // mode, where vim must handle them to maintain selection.
+        // The original cursorLineUp/Down bindings from the default keymap are
+        // filtered out (see defaultVimKeymap) because their preventDefault
+        // flag blocks vim's handler even when their run function returns false.
+        keymap.of(vimVisualModeArrowKeyBindings()),
         // Base vim mode
         vim({ status: false }),
         // Custom vim keymaps for cell navigation
@@ -101,12 +115,22 @@ const overrideKeymap = (keymap: HotkeyProvider): readonly KeyBinding[] => {
 };
 
 const defaultVimKeymap = once(() => {
-  const toRemove = new Set(["Enter", "Ctrl-v"]);
+  const toRemove = new Set([
+    "Enter",
+    "Ctrl-v",
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+  ]);
   // Remove conflicting keys from the keymap
   // Enter (<CR>) adds a new line
   //   - it should just go to the next line
   // Ctrl-v goes to the bottom of the cell
   //   - should enter blockwise visual mode
+  // ArrowUp/ArrowDown (cursorLineUp/Down) always handle the event and have
+  //   preventDefault, which blocks vim's handler from processing arrow keys.
+  //   Replaced with visual-mode-aware wrappers in keymapBundle.
   return defaultKeymap().filter(
     (k) => !toRemove.has(k.key || k.mac || k.linux || k.win || ""),
   );
@@ -155,6 +179,49 @@ function doubleCharacterListener(
   ]);
 }
 
+function isInVimVisualMode(cm: CodeMirror | undefined | null): boolean {
+  return cm?.state.vim?.visualMode === true;
+}
+
+/**
+ * In vim visual mode, arrow keys must be handled by vim to maintain selection.
+ * Wrap each arrow key's run and shift so they defer to vim in visual mode,
+ * but use CodeMirror's cursor commands in all other modes.
+ */
+function vimVisualModeArrowKeyBindings(): KeyBinding[] {
+  const wrap =
+    (cmd: Command): Command =>
+    (view) => {
+      if (isInVimVisualMode(getCM(view))) {
+        return false;
+      }
+      return cmd(view);
+    };
+
+  return [
+    {
+      key: "ArrowDown",
+      run: wrap(cursorLineDown),
+      shift: wrap(selectLineDown),
+    },
+    {
+      key: "ArrowUp",
+      run: wrap(cursorLineUp),
+      shift: wrap(selectLineUp),
+    },
+    {
+      key: "ArrowLeft",
+      run: wrap(cursorCharLeft),
+      shift: wrap(selectCharLeft),
+    },
+    {
+      key: "ArrowRight",
+      run: wrap(cursorCharRight),
+      shift: wrap(selectCharRight),
+    },
+  ];
+}
+
 export const visibleForTesting = {
   defaultKeymap,
   defaultVimKeymap,

package/src/plugins/impl/DataTablePlugin.tsx

@@ -28,10 +28,7 @@ import { TablePanel } from "@/components/data-table/charts/charts";
 import { hasChart } from "@/components/data-table/charts/storage";
 import { ColumnChartSpecModel } from "@/components/data-table/column-summary/chart-spec-model";
 import { ColumnChartContext } from "@/components/data-table/column-summary/column-summary";
-import {
-  type ColumnFilterValue,
-  filterToFilterCondition,
-} from "@/components/data-table/filters";
+import { filtersToFilterGroup } from "@/components/data-table/filters";
 import { usePanelOwnership } from "@/components/data-table/hooks/use-panel-ownership";
 import { LoadingTable } from "@/components/data-table/loading-table";
 import {
@@ -86,8 +83,8 @@ import { rpc } from "../core/rpc";
 import { Banner } from "./common/error-banner";
 import { Labeled } from "./common/labeled";
 import {
-  ConditionSchema,
-  type ConditionType,
+  FilterGroupSchema,
+  type FilterGroupType,
   columnToFieldTypesSchema,
 } from "./data-frames/schema";
 
@@ -213,7 +210,7 @@ type DataTableFunctions = {
       descending: boolean;
     }[];
     query?: string;
-    filters?: ConditionType[];
+    filters?: FilterGroupType;
     page_number: number;
     page_size: number;
     max_columns?: number | null;
@@ -312,7 +309,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
             )
             .optional(),
           query: z.string().optional(),
-          filters: z.array(ConditionSchema).optional(),
+          filters: FilterGroupSchema.optional(),
           page_number: z.number(),
           page_size: z.number(),
           max_columns: z.number().nullable().optional(),
@@ -578,12 +575,7 @@ export const LoadingDataTableComponent = memo(
         query: searchQuery,
         page_number: paginationState.pageIndex,
         page_size: paginationState.pageSize,
-        filters: filters.flatMap((filter) => {
-          return filterToFilterCondition(
-            filter.id,
-            filter.value as ColumnFilterValue,
-          );
-        }),
+        filters: filtersToFilterGroup(filters),
       });
 
       if (canShowInitialPage) {
@@ -641,12 +633,7 @@ export const LoadingDataTableComponent = memo(
           page_size: 1,
           sort: sortArgs,
           query: searchQuery,
-          filters: filters.flatMap((filter) => {
-            return filterToFilterCondition(
-              filter.id,
-              filter.value as ColumnFilterValue,
-            );
-          }),
+          filters: filtersToFilterGroup(filters),
           // Do not clamp number of columns since we are viewing a single row
           max_columns: null,
         });

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -29,8 +29,8 @@ import { LoadingDataTableComponent, TableProviders } from "../DataTablePlugin";
 import type { DataType } from "../vega/vega-loader";
 import { TransformPanel, type TransformPanelHandle } from "./panel";
 import {
-  ConditionSchema,
-  type ConditionType,
+  FilterGroupSchema,
+  type FilterGroupType,
   columnToFieldTypesSchema,
   type Transformations,
 } from "./schema";
@@ -75,7 +75,7 @@ type PluginFunctions = {
       descending: boolean;
     }[];
     query?: string;
-    filters?: ConditionType[];
+    filters?: FilterGroupType;
     page_number: number;
     page_size: number;
   }) => Promise<{
@@ -138,7 +138,7 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
             )
             .optional(),
           query: z.string().optional(),
-          filters: z.array(ConditionSchema).optional(),
+          filters: FilterGroupSchema.optional(),
           page_number: z.number(),
           page_size: z.number(),
         }),

package/src/plugins/impl/data-frames/schema.ts

@@ -73,16 +73,36 @@ const SortColumnTransformSchema = z.object({
     .default("last"),
 });
 
-export const ConditionSchema = z
+export const FilterConditionSchema = z
   .object({
     column_id: column_id,
     operator: z
       .enum(Object.keys(ALL_OPERATORS) as [OperatorType, ...OperatorType[]])
       .describe(FieldOptions.of({ label: " " })),
+    type: z.literal("condition").default("condition"),
     value: z.any().describe(FieldOptions.of({ label: "Value" })),
+    negate: z.boolean().default(false),
   })
   .describe(FieldOptions.of({ direction: "row", special: "column_filter" }));
-export type ConditionType = z.infer<typeof ConditionSchema>;
+export type FilterConditionType = z.infer<typeof FilterConditionSchema>;
+
+export interface FilterGroupType {
+  type: "group";
+  operator: "and" | "or";
+  children: (FilterConditionType | FilterGroupType)[];
+  negate: boolean;
+}
+
+export const FilterGroupSchema: z.ZodType<FilterGroupType> = z.lazy(() =>
+  z.object({
+    type: z.literal("group").default("group"),
+    operator: z.enum(["and", "or"]).default("and"),
+    children: z
+      .array(z.union([FilterConditionSchema, FilterGroupSchema]))
+      .default([]),
+    negate: z.boolean().default(false),
+  }),
+);
 
 const FilterRowsTransformSchema = z.object({
   type: z.literal("filter_rows"),
@@ -91,17 +111,29 @@ const FilterRowsTransformSchema = z.object({
     .default("keep_rows")
     .describe(FieldOptions.of({ special: "radio_group" })),
   where: z
-    .array(ConditionSchema)
+    .array(FilterConditionSchema)
     .min(1)
     .describe(FieldOptions.of({ label: "Value", minLength: 1 }))
-    .transform((value) => {
-      return value.filter((condition) => {
+    .default(() => [
+      {
+        column_id: "" as ColumnId,
+        operator: "==" as const,
+        value: "",
+        type: "condition" as const,
+        negate: false,
+      },
+    ])
+    .transform((value): FilterGroupType => {
+      const validConditions = value.filter((condition) => {
         return isConditionValueValid(condition.operator, condition.value);
       });
-    })
-    .default(() => [
-      { column_id: "" as ColumnId, operator: "==" as const, value: "" },
-    ]),
+      return {
+        type: "group",
+        operator: "and",
+        children: validConditions,
+        negate: false,
+      };
+    }),
 });
 
 const GroupByTransformSchema = z

package/src/plugins/impl/data-frames/utils/operators.ts

@@ -41,6 +41,7 @@ const createComparisonOperators = (schema: z.ZodType) => ({
   ">=": [schema],
   "<": [schema],
   "<=": [schema],
+  between: [z.object({ min: schema, max: schema })],
   is_null: [],
   is_not_null: [],
 });
@@ -59,6 +60,7 @@ export const STRING_OPERATORS = {
   ends_with: [Schema.string],
   in: [Schema.stringMultiColumnValues],
   not_in: [Schema.stringMultiColumnValues],
+  is_empty: [],
   is_null: [],
   is_not_null: [],
 };