@marimo-team/islands 0.23.7-dev9 → 0.23.7

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

@@ -12,7 +12,12 @@ import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { FilterPillEditor } from "./filter-pill-editor";
-import type { ColumnFilterValue } from "./filters";
+import {
+  type ColumnFilterValue,
+  dateToISODate,
+  dateToISODateTime,
+} from "./filters";
+import { OPERATOR_LABELS } from "./operator-labels";
 import { stringifyUnknownValue } from "./utils";
 
 interface Props<TData> {
@@ -81,13 +86,6 @@ const FilterPill = <TData,>({
     return null;
   }
 
-  // this is temporary, with more operator & datatype support this goes away
-  const isReadOnly =
-    "type" in value &&
-    (value.type === "date" ||
-      value.type === "datetime" ||
-      value.type === "time");
-
   const twoSegment = formatted.value === undefined;
 
   const handleRemove = (e: React.MouseEvent) => {
@@ -129,20 +127,8 @@ const FilterPill = <TData,>({
     </Button>
   );
 
-  if (isReadOnly) {
-    return (
-      <Badge
-        variant="outline"
-        className="bg-background border-border text-foreground"
-      >
-        {segments}
-        {removeButton}
-      </Badge>
-    );
-  }
-
   return (
-    <Popover open={open} onOpenChange={setOpen} modal={true}>
+    <Popover open={open} onOpenChange={setOpen} modal={false}>
       <Badge
         variant="outline"
         className={cn(
@@ -209,19 +195,70 @@ function formatValue(
   }
 
   if (value.type === "number") {
-    return formatMinMax(value.min, value.max);
+    switch (value.operator) {
+      case "between":
+        return {
+          operator: OPERATOR_LABELS.between.toLowerCase(),
+          value: `${value.min} - ${value.max}`,
+        };
+      case "==":
+      case "!=":
+      case ">":
+      case ">=":
+      case "<":
+      case "<=":
+        return { operator: value.operator, value: String(value.value) };
+    }
   }
-  if (value.type === "date") {
-    return formatMinMax(value.min?.toISOString(), value.max?.toISOString());
-  }
-  if (value.type === "time") {
-    return formatMinMax(
-      value.min ? timeFormatter.format(value.min) : undefined,
-      value.max ? timeFormatter.format(value.max) : undefined,
-    );
+  if (value.type === "text") {
+    switch (value.operator) {
+      case "in":
+      case "not_in": {
+        const items = value.values.map((v) => `"${v}"`);
+        return {
+          operator: value.operator === "in" ? "is in" : "not in",
+          value: `[${items.join(", ")}]`,
+        };
+      }
+      case "is_empty":
+        return { operator: "is empty" };
+      case "contains":
+      case "equals":
+      case "does_not_equal":
+      case "regex":
+      case "starts_with":
+      case "ends_with":
+        return {
+          operator: OPERATOR_LABELS[value.operator].toLowerCase(),
+          value: `"${value.text}"`,
+        };
+    }
   }
-  if (value.type === "datetime") {
-    return formatMinMax(value.min?.toISOString(), value.max?.toISOString());
+  if (
+    value.type === "date" ||
+    value.type === "datetime" ||
+    value.type === "time"
+  ) {
+    const format =
+      value.type === "time"
+        ? (d: Date) => timeFormatter.format(d)
+        : value.type === "date"
+          ? dateToISODate
+          : dateToISODateTime;
+    switch (value.operator) {
+      case "between":
+        return {
+          operator: OPERATOR_LABELS.between.toLowerCase(),
+          value: `${format(value.min)} - ${format(value.max)}`,
+        };
+      case "==":
+      case "!=":
+      case ">":
+      case ">=":
+      case "<":
+      case "<=":
+        return { operator: value.operator, value: format(value.value) };
+    }
   }
   if (value.type === "boolean") {
     return { operator: `is ${value.value ? "True" : "False"}` };
@@ -235,28 +272,6 @@ function formatValue(
       value: `[${stringifiedOptions.join(", ")}]`,
     };
   }
-  if (value.type === "text") {
-    return { operator: "contains", value: `"${value.text}"` };
-  }
   logNever(value);
   return undefined;
 }
-
-function formatMinMax(
-  min: string | number | undefined,
-  max: string | number | undefined,
-): FormattedFilter | undefined {
-  if (min === undefined && max === undefined) {
-    return;
-  }
-  if (min === max) {
-    return { operator: "==", value: String(min) };
-  }
-  if (min === undefined) {
-    return { operator: "<=", value: String(max) };
-  }
-  if (max === undefined) {
-    return { operator: ">=", value: String(min) };
-  }
-  return { operator: "between", value: `${min} - ${max}` };
-}

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

@@ -32,33 +32,113 @@ export type FilterType =
   | "select"
   | "boolean";
 
+export const NULLISH_OPS = ["is_null", "is_not_null"] as const;
+export const MEMBERSHIP_OPS = ["in", "not_in"] as const;
+export const NUMBER_COMPARISON_OPS = [
+  "==",
+  "!=",
+  ">",
+  ">=",
+  "<",
+  "<=",
+] as const;
+export const TEXT_SCALAR_OPS = [
+  "contains",
+  "equals",
+  "does_not_equal",
+  "regex",
+  "starts_with",
+  "ends_with",
+] as const;
+
+export const DATETIME_COMPARISON_OPS = [
+  "==",
+  "!=",
+  ">",
+  ">=",
+  "<",
+  "<=",
+] as const;
+
+export const NUMBER_OPS = [
+  "between",
+  ...NUMBER_COMPARISON_OPS,
+  ...NULLISH_OPS,
+] as const;
+export const TEXT_OPS = [
+  ...TEXT_SCALAR_OPS,
+  ...MEMBERSHIP_OPS,
+  "is_empty",
+  ...NULLISH_OPS,
+] as const;
+export const DATETIME_OPS = [
+  "between",
+  ...DATETIME_COMPARISON_OPS,
+  ...NULLISH_OPS,
+] as const;
+
+export type NullishOp = (typeof NULLISH_OPS)[number];
+export type MembershipOp = (typeof MEMBERSHIP_OPS)[number];
+export type NumberComparisonOp = (typeof NUMBER_COMPARISON_OPS)[number];
+export type TextScalarOp = (typeof TEXT_SCALAR_OPS)[number];
+export type DatetimeComparisonOp = (typeof DATETIME_COMPARISON_OPS)[number];
+
+const makeOpGuard = <T extends OperatorType>(ops: readonly T[]) => {
+  const set = new Set<OperatorType>(ops);
+  return (op: OperatorType): op is T => set.has(op);
+};
+
+export const isNumberComparisonOp = makeOpGuard(NUMBER_COMPARISON_OPS);
+export const isTextScalarOp = makeOpGuard(TEXT_SCALAR_OPS);
+export const isDatetimeComparisonOp = makeOpGuard(DATETIME_COMPARISON_OPS);
+
+interface NullishOpts {
+  operator: NullishOp;
+}
+
+type NumberFilterOpts =
+  | { operator: "between"; min: number; max: number }
+  | { operator: NumberComparisonOp; value: number }
+  | NullishOpts;
+
+type TextFilterOpts =
+  | { operator: TextScalarOp; text: string }
+  | { operator: MembershipOp; values: string[] }
+  | { operator: "is_empty" }
+  | NullishOpts;
+
+type DateLikeFilterOpts =
+  | { operator: "between"; min: Date; max: Date }
+  | { operator: DatetimeComparisonOp; value: Date }
+  | NullishOpts;
+
 // Filter is a factory function that creates a filter object
 export const Filter = {
-  number(opts: { min?: number; max?: number; operator?: OperatorType }) {
+  number(opts: NumberFilterOpts) {
     return {
       type: "number",
       ...opts,
     } as const;
   },
-  text(opts: { text?: string; operator: OperatorType }) {
+  text(opts: TextFilterOpts) {
     return {
       type: "text",
       ...opts,
     } as const;
   },
-  date(opts: { min?: Date; max?: Date; operator?: OperatorType }) {
+  date(opts: DateLikeFilterOpts) {
     return {
       type: "date",
       ...opts,
     } as const;
   },
-  datetime(opts: { min?: Date; max?: Date; operator?: OperatorType }) {
+  datetime(opts: DateLikeFilterOpts) {
     return {
       type: "datetime",
       ...opts,
     } as const;
   },
-  time(opts: { min?: Date; max?: Date; operator?: OperatorType }) {
+  time(opts: DateLikeFilterOpts) {
     return {
       type: "time",
       ...opts,
@@ -84,6 +164,35 @@ export type ColumnFilterForType<T extends FilterType> = T extends FilterType
   ? Extract<ColumnFilterValue, { type: T }>
   : never;
 
+function pad2(n: number): string {
+  return n.toString().padStart(2, "0");
+}
+
+function pad4(n: number): string {
+  return n.toString().padStart(4, "0");
+}
+
+export function dateToISODate(d: Date): string {
+  return `${pad4(d.getFullYear())}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+}
+
+export function dateToISOTime(d: Date): string {
+  return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
+}
+
+export function dateToISODateTime(d: Date): string {
+  return `${dateToISODate(d)}T${dateToISOTime(d)}`;
+}
+
+function isNullishFilter(
+  filter: ColumnFilterValue,
+): filter is Extract<
+  ColumnFilterValue,
+  { operator: "is_null" | "is_not_null" }
+> {
+  return filter.operator === "is_null" || filter.operator === "is_not_null";
+}
+
 export function filterToFilterCondition(
   columnIdString: string,
   filter: ColumnFilterValue | undefined,
@@ -93,12 +202,11 @@ export function filterToFilterCondition(
   }
   const columnId = columnIdString as ColumnId;
 
-  if (filter.operator === "is_null" || filter.operator === "is_not_null") {
+  if (isNullishFilter(filter)) {
     return [
       {
         column_id: columnId,
         operator: filter.operator,
-        value: undefined,
         type: "condition",
         negate: false,
       },
@@ -106,103 +214,114 @@ export function filterToFilterCondition(
   }
 
   switch (filter.type) {
-    case "number": {
-      const conditions: FilterConditionType[] = [];
-      if (filter.min !== undefined) {
-        conditions.push({
-          column_id: columnId,
-          operator: ">=",
-          value: filter.min,
-          type: "condition",
-          negate: false,
-        });
+    case "number":
+      switch (filter.operator) {
+        case "between":
+          return [
+            {
+              column_id: columnId,
+              operator: "between",
+              value: { min: filter.min, max: filter.max },
+              type: "condition",
+              negate: false,
+            },
+          ];
+        case "==":
+        case "!=":
+        case ">":
+        case ">=":
+        case "<":
+        case "<=":
+          return [
+            {
+              column_id: columnId,
+              operator: filter.operator,
+              value: filter.value,
+              type: "condition",
+              negate: false,
+            },
+          ];
+        default:
+          assertNever(filter);
       }
-      if (filter.max !== undefined) {
-        conditions.push({
-          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,
-          type: "condition",
-          negate: false,
-        },
-      ];
-    case "datetime": {
-      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) {
-        conditions.push({
-          column_id: columnId,
-          operator: "<=",
-          value: filter.max.toISOString(),
-          type: "condition",
-          negate: false,
-        });
-      }
-      return conditions;
-    }
-    case "date": {
-      const conditions: FilterConditionType[] = [];
-      if (filter.min !== undefined) {
-        conditions.push({
-          column_id: columnId,
-          operator: ">=",
-          value: filter.min.toISOString(),
-          type: "condition",
-          negate: false,
-        });
+      switch (filter.operator) {
+        case "contains":
+        case "equals":
+        case "does_not_equal":
+        case "regex":
+        case "starts_with":
+        case "ends_with":
+          return [
+            {
+              column_id: columnId,
+              operator: filter.operator,
+              value: filter.text,
+              type: "condition",
+              negate: false,
+            },
+          ];
+        case "in":
+        case "not_in":
+          return [
+            {
+              column_id: columnId,
+              operator: filter.operator,
+              value: filter.values,
+              type: "condition",
+              negate: false,
+            },
+          ];
+        case "is_empty":
+          return [
+            {
+              column_id: columnId,
+              operator: "is_empty",
+              type: "condition",
+              negate: false,
+            },
+          ];
+        default:
+          assertNever(filter);
       }
-      if (filter.max !== undefined) {
-        conditions.push({
-          column_id: columnId,
-          operator: "<=",
-          value: filter.max.toISOString(),
-          type: "condition",
-          negate: false,
-        });
-      }
-      return conditions;
-    }
+    case "date":
+    case "datetime":
     case "time": {
-      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) {
-        conditions.push({
-          column_id: columnId,
-          operator: "<=",
-          value: filter.max.toISOString(),
-          type: "condition",
-          negate: false,
-        });
+      const encode =
+        filter.type === "date"
+          ? dateToISODate
+          : filter.type === "time"
+            ? dateToISOTime
+            : dateToISODateTime;
+      switch (filter.operator) {
+        case "between":
+          return [
+            {
+              column_id: columnId,
+              operator: "between",
+              value: { min: encode(filter.min), max: encode(filter.max) },
+              type: "condition",
+              negate: false,
+            },
+          ];
+        case "==":
+        case "!=":
+        case ">":
+        case ">=":
+        case "<":
+        case "<=":
+          return [
+            {
+              column_id: columnId,
+              operator: filter.operator,
+              value: encode(filter.value),
+              type: "condition",
+              negate: false,
+            },
+          ];
+        default:
+          assertNever(filter);
       }
-      return conditions;
     }
     case "boolean":
       if (filter.value) {
@@ -210,7 +329,6 @@ export function filterToFilterCondition(
           {
             column_id: columnId,
             operator: "is_true",
-            value: undefined,
             type: "condition",
             negate: false,
           },
@@ -221,7 +339,6 @@ export function filterToFilterCondition(
           {
             column_id: columnId,
             operator: "is_false",
-            value: undefined,
             type: "condition",
             negate: false,
           },

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

@@ -328,14 +328,21 @@ export const FilterButtons = ({
   onApply,
   onClear,
   clearButtonDisabled,
+  applyButtonDisabled,
 }: {
   onApply: () => void;
   onClear: () => void;
   clearButtonDisabled?: boolean;
+  applyButtonDisabled?: boolean;
 }) => {
   return (
     <div className="flex gap-2 px-2 justify-between">
-      <Button variant="link" size="sm" onClick={onApply}>
+      <Button
+        variant="link"
+        size="sm"
+        onClick={onApply}
+        disabled={applyButtonDisabled}
+      >
         Apply
       </Button>
       <Button

package/src/components/data-table/operator-labels.ts

@@ -0,0 +1,25 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { OperatorType } from "@/plugins/impl/data-frames/utils/operators";
+
+export const OPERATOR_LABELS: Record<OperatorType | "between", string> = {
+  "==": "Equals",
+  "!=": "Doesn't equal",
+  ">": "Greater than",
+  ">=": "Greater than or equal",
+  "<": "Less than",
+  "<=": "Less than or equal",
+  between: "Between",
+  contains: "Contains",
+  equals: "Equals",
+  does_not_equal: "Doesn't equal",
+  starts_with: "Starts with",
+  ends_with: "Ends with",
+  regex: "Matches regex",
+  in: "Is in",
+  not_in: "Not in",
+  is_empty: "Is empty",
+  is_true: "Is true",
+  is_false: "Is false",
+  is_null: "Is null",
+  is_not_null: "Is not null",
+};

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

@@ -0,0 +1,61 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import React from "react";
+import { cn } from "@/utils/cn";
+import { Input } from "../ui/input";
+
+export interface RegexInputProps {
+  id?: string;
+  value: string;
+  onChange: (next: string) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  className?: string;
+  autoFocus?: boolean;
+  "aria-label"?: string;
+}
+
+export const RegexInput = React.forwardRef<HTMLInputElement, RegexInputProps>(
+  (
+    {
+      id,
+      value,
+      onChange,
+      onKeyDown,
+      placeholder = "pattern",
+      className,
+      autoFocus,
+      "aria-label": ariaLabel,
+    },
+    ref,
+  ) => (
+    <div
+      className={cn(
+        "flex items-stretch h-6 mb-1 rounded-sm border border-input bg-background shadow-xs-solid focus-within:shadow-md-solid focus-within:ring-1 focus-within:ring-ring focus-within:border-primary",
+        className,
+      )}
+    >
+      <Slash />
+      <Input
+        ref={ref}
+        id={id}
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={onKeyDown}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        aria-label={ariaLabel}
+        rootClassName="flex-1 min-w-0"
+        className="border-0 mb-0 h-full shadow-none! hover:shadow-none! focus-visible:shadow-none! focus-visible:ring-0 focus-visible:border-0 rounded-none bg-transparent"
+      />
+      <Slash />
+    </div>
+  ),
+);
+RegexInput.displayName = "RegexInput";
+
+const Slash = () => (
+  <span className="px-1.5 flex items-center text-muted-foreground font-code text-sm select-none">
+    /
+  </span>
+);