@marimo-team/frontend 0.23.2-dev13 → 0.23.2-dev15

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/components/editor/cell/code/cell-editor.tsx

@@ -270,6 +270,7 @@ const CellEditorInternal = ({
     userConfig.language_servers,
     userConfig.display,
     userConfig.diagnostics,
+    userConfig.ai?.inline_tooltip,
     aiEnabled,
     theme,
     showPlaceholder,

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: [],
 };