@marimo-team/islands 0.23.9-dev3 → 0.23.9-dev4

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

@@ -0,0 +1,51 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { OperatorType } from "@/plugins/impl/data-frames/utils/operators";
+import type { ColumnFilterValue, MembershipFilterType } from "./builders";
+import {
+  COMPARISON_OPS,
+  type MembershipOp,
+  type NullishOp,
+  OPERATORS_BY_TYPE,
+  TEXT_SCALAR_OPS,
+} from "./operators";
+import type { FilterType } from "./types";
+
+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 isComparisonOp = makeOpGuard(COMPARISON_OPS);
+export const isTextScalarOp = makeOpGuard(TEXT_SCALAR_OPS);
+
+export function isMembershipOp(op: OperatorType): op is MembershipOp {
+  return op === "in" || op === "not_in";
+}
+
+export function isNullishFilter(
+  filter: ColumnFilterValue,
+): filter is Extract<ColumnFilterValue, { operator: NullishOp }> {
+  return filter.operator === "is_null" || filter.operator === "is_not_null";
+}
+
+export type DateLikeFilterType = Extract<
+  FilterType,
+  "date" | "datetime" | "time"
+>;
+
+const DATE_LIKE_TYPES: ReadonlySet<FilterType> = new Set([
+  "date",
+  "datetime",
+  "time",
+]);
+
+export const isDateLikeType = (type: FilterType): type is DateLikeFilterType =>
+  DATE_LIKE_TYPES.has(type);
+
+export function isMembershipFilterType(
+  type: FilterType,
+): type is MembershipFilterType {
+  const ops = OPERATORS_BY_TYPE[type];
+  return ops.includes("in") || ops.includes("not_in");
+}

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

@@ -0,0 +1,7 @@
+export * from "./builders";
+export * from "./defaults";
+export * from "./format";
+export * from "./guards";
+export * from "./operators";
+export * from "./serialize";
+export * from "./types";

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

@@ -0,0 +1,76 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { OperatorType } from "@/plugins/impl/data-frames/utils/operators";
+import type { FilterType } from "./types";
+
+// Primitive operator groups — each describes one shape of filter value.
+export const NULLISH_OPS = ["is_null", "is_not_null"] as const;
+export const MEMBERSHIP_OPS = ["in", "not_in"] as const;
+export const COMPARISON_OPS = ["==", "!=", ">", ">=", "<", "<="] as const;
+export const TEXT_SCALAR_OPS = [
+  "contains",
+  "equals",
+  "does_not_equal",
+  "regex",
+  "starts_with",
+  "ends_with",
+] as const;
+export const BOOLEAN_VALUE_OPS = ["is_true", "is_false"] as const;
+export const EMPTY_OPS = ["is_empty"] as const;
+
+// Operators that carry no payload — `{ operator }` with no other field.
+export const UNARY_OPS = [
+  ...NULLISH_OPS,
+  ...BOOLEAN_VALUE_OPS,
+  ...EMPTY_OPS,
+] as const;
+
+// Per-type op lists used by the editor and validators.
+export const BOOLEAN_OPS = [...BOOLEAN_VALUE_OPS, ...NULLISH_OPS] as const;
+export const NUMBER_OPS = [
+  "between",
+  ...COMPARISON_OPS,
+  ...MEMBERSHIP_OPS,
+  ...NULLISH_OPS,
+] as const;
+export const TEXT_OPS = [
+  ...TEXT_SCALAR_OPS,
+  ...MEMBERSHIP_OPS,
+  ...EMPTY_OPS,
+  ...NULLISH_OPS,
+] as const;
+export const DATETIME_OPS = [
+  "between",
+  ...COMPARISON_OPS,
+  ...NULLISH_OPS,
+] as const;
+
+export type NullishOp = (typeof NULLISH_OPS)[number];
+export type MembershipOp = (typeof MEMBERSHIP_OPS)[number];
+export type ComparisonOp = (typeof COMPARISON_OPS)[number];
+export type TextScalarOp = (typeof TEXT_SCALAR_OPS)[number];
+export type BooleanValueOp = (typeof BOOLEAN_VALUE_OPS)[number];
+export type BooleanOp = (typeof BOOLEAN_OPS)[number];
+
+export const OPERATORS_BY_TYPE: Record<
+  FilterType,
+  ReadonlyArray<OperatorType>
+> = {
+  number: NUMBER_OPS,
+  text: TEXT_OPS,
+  boolean: BOOLEAN_OPS,
+  date: DATETIME_OPS,
+  datetime: DATETIME_OPS,
+  time: DATETIME_OPS,
+};
+
+export const DEFAULT_OPERATOR_FOR_TYPE: Record<FilterType, OperatorType> = {
+  number: "between",
+  text: "contains",
+  boolean: "is_true",
+  date: "==",
+  datetime: "==",
+  time: "between",
+};
+
+export const OPERATORS_WITHOUT_VALUE = new Set<OperatorType>(UNARY_OPS);

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

@@ -0,0 +1,186 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { ColumnFiltersState } from "@tanstack/react-table";
+import type {
+  FilterConditionType,
+  FilterGroupType,
+} from "@/plugins/impl/data-frames/schema";
+import type { ColumnId } from "@/plugins/impl/data-frames/types";
+import { assertNever } from "@/utils/assertNever";
+import {
+  dateToLocalISODate,
+  dateToLocalISODateTime,
+  dateToLocalISOTime,
+} from "@/utils/dates";
+import type { ColumnFilterValue } from "./builders";
+import { isNullishFilter } from "./guards";
+
+export function filterToFilterCondition(
+  columnIdString: string,
+  filter: ColumnFilterValue | undefined,
+): FilterConditionType[] {
+  if (!filter) {
+    return [];
+  }
+  const columnId = columnIdString as ColumnId;
+
+  if (isNullishFilter(filter)) {
+    return [
+      {
+        column_id: columnId,
+        operator: filter.operator,
+        type: "condition",
+        negate: false,
+      },
+    ];
+  }
+
+  switch (filter.type) {
+    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,
+            },
+          ];
+        case "in":
+        case "not_in":
+          return [
+            {
+              column_id: columnId,
+              operator: filter.operator,
+              value: filter.values,
+              type: "condition",
+              negate: false,
+            },
+          ];
+        default:
+          assertNever(filter);
+      }
+    case "text":
+      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);
+      }
+    case "date":
+    case "datetime":
+    case "time": {
+      const encode =
+        filter.type === "date"
+          ? dateToLocalISODate
+          : filter.type === "time"
+            ? dateToLocalISOTime
+            : dateToLocalISODateTime;
+      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);
+      }
+    }
+    case "boolean":
+      return [
+        {
+          column_id: columnId,
+          operator: filter.operator,
+          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/data-table/filters/types.ts

@@ -0,0 +1,33 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { RowData } from "@tanstack/react-table";
+import type { DataType } from "@/core/kernel/messages";
+
+declare module "@tanstack/react-table" {
+  //allows us to define custom properties for our columns
+  interface ColumnMeta<TData extends RowData, TValue> {
+    rowHeader?: boolean;
+    dtype?: string;
+    dataType?: DataType;
+    filterType?: FilterType;
+    minFractionDigits?: number;
+  }
+}
+
+const FILTER_TYPES = [
+  "text",
+  "number",
+  "date",
+  "datetime",
+  "time",
+  "boolean",
+] as const;
+export type FilterType = (typeof FILTER_TYPES)[number];
+
+export const EDITABLE_FILTER_TYPES: ReadonlySet<FilterType> = new Set(
+  FILTER_TYPES,
+);
+
+export type FormattedFilter =
+  | { kind: "scalar"; operator: string; value?: string }
+  | { kind: "list"; operator: string; items: string[] };

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

@@ -9,9 +9,6 @@ import {
   ChevronsUpDown,
   CopyIcon,
   FilterX,
-  FunnelPlusIcon,
-  ListFilterIcon,
-  ListFilterPlusIcon,
   PinOffIcon,
   WrapTextIcon,
 } from "lucide-react";
@@ -27,7 +24,6 @@ import type { DataType } from "@/core/kernel/messages";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
 import { DATA_TYPE_ICON } from "../datasets/icons";
-import { Button } from "../ui/button";
 import { formattingExample } from "./column-formatting/feature";
 import { formatOptions } from "./column-formatting/types";
 import { NAMELESS_COLUMN_PREFIX } from "./columns";
@@ -242,26 +238,18 @@ export function renderSorts<TData, TValue>(
   );
 }
 
-export function renderSortFilterIcon<TData, TValue>(
-  column: Column<TData, TValue>,
-) {
+export function renderSortIcon<TData, TValue>(column: Column<TData, TValue>) {
   if (!column.getCanSort()) {
     return null;
   }
 
   const isSorted = column.getIsSorted();
-  const isFiltered = column.getFilterValue() !== undefined;
 
-  let Icon: React.FC<React.SVGProps<SVGSVGElement>>;
-  if (isFiltered && isSorted) {
-    Icon = ListFilterPlusIcon;
-  } else if (isFiltered) {
-    Icon = FunnelPlusIcon;
-  } else if (isSorted) {
-    Icon = isSorted === "desc" ? DescIcon : AscIcon;
-  } else {
-    Icon = ChevronsUpDown;
-  }
+  const Icon: React.FC<React.SVGProps<SVGSVGElement>> = isSorted
+    ? isSorted === "desc"
+      ? DescIcon
+      : AscIcon
+    : ChevronsUpDown;
 
   return <Icon className="h-3 w-3" />;
 }
@@ -292,68 +280,3 @@ export const ClearFilterMenuItem = <TData, TValue>({
     Clear filter
   </DropdownMenuItem>
 );
-
-export function renderFilterByValues<TData, TValue>(
-  column: Column<TData, TValue>,
-  setIsFilterValueOpen: (open: boolean) => void,
-) {
-  const canFilter = column.getCanFilter();
-  if (!canFilter) {
-    return null;
-  }
-
-  const columnType = column.columnDef.meta?.dataType;
-  // skip boolean as this can be easily filtered through normal filters
-  if (columnType === "boolean") {
-    return null;
-  }
-
-  // there are some edge cases which do not support filtering (eg. dicts with None values)
-  const filterType = column.columnDef.meta?.filterType;
-  if (!filterType) {
-    return null;
-  }
-
-  return (
-    <DropdownMenuSub>
-      <DropdownMenuItem onClick={() => setIsFilterValueOpen(true)}>
-        <ListFilterIcon className="mo-dropdown-icon" />
-        Filter by values
-      </DropdownMenuItem>
-    </DropdownMenuSub>
-  );
-}
-
-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}
-        disabled={applyButtonDisabled}
-      >
-        Apply
-      </Button>
-      <Button
-        variant="linkDestructive"
-        size="sm"
-        className=""
-        onClick={onClear}
-        disabled={clearButtonDisabled}
-      >
-        Clear
-      </Button>
-    </div>
-  );
-};

package/src/components/data-table/value-chips.tsx

@@ -0,0 +1,52 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type React from "react";
+
+export const Chip = ({ children }: { children: React.ReactNode }) => (
+  <span className="inline-flex items-center rounded-sm bg-muted/50 px-1 font-mono text-xs font-normal leading-tight text-foreground">
+    {children}
+  </span>
+);
+
+export const MoreChip = ({ count }: { count: number }) => (
+  <span className="inline-flex items-center px-1 text-xs italic text-muted-foreground">
+    +{count}
+  </span>
+);
+
+interface ChipWithCommaProps {
+  value: string;
+  showComma: boolean;
+}
+
+export const ChipWithComma = ({ value, showComma }: ChipWithCommaProps) => (
+  <span className="inline-flex items-center">
+    <Chip>{value}</Chip>
+    {showComma && <span className="text-muted-foreground">,</span>}
+  </span>
+);
+
+interface CompactChipRowProps {
+  items: string[];
+  max?: number;
+}
+
+export const CompactChipRow = ({ items, max = 3 }: CompactChipRowProps) => {
+  if (items.length === 0) {
+    return null;
+  }
+  const visible = items.slice(0, max);
+  const hidden = Math.max(0, items.length - max);
+  return (
+    <span className="inline-flex items-center gap-1">
+      {visible.map((item, i) => (
+        <ChipWithComma
+          key={i}
+          value={item}
+          showComma={i < visible.length - 1}
+        />
+      ))}
+      {hidden > 0 && <MoreChip count={hidden} />}
+    </span>
+  );
+};

package/src/components/ui/number-field.tsx

@@ -15,10 +15,17 @@ import { maxFractionalDigits } from "@/utils/numbers";
 export interface NumberFieldProps extends AriaNumberFieldProps {
   placeholder?: string;
   variant?: "default" | "xs";
+  /**
+   * Fires on every keystroke with the raw text currently in the input.
+   * React-aria's `onChange` only fires on commit (blur/Enter/stepper); use this
+   * when callers need to peek at the in-progress value, e.g. to enable an Apply
+   * button while the user is still typing.
+   */
+  onInputText?: (text: string) => void;
 }
 
 export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
-  ({ placeholder, variant = "default", ...props }, ref) => {
+  ({ placeholder, variant = "default", onInputText, ...props }, ref) => {
     const { locale } = useLocale();
     return (
       <AriaNumberField
@@ -48,6 +55,11 @@ export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
                 e.stopPropagation();
               }
             }}
+            onInput={
+              onInputText
+                ? (e) => onInputText(e.currentTarget.value)
+                : undefined
+            }
             className={cn(
               "flex-1",
               "w-full",

package/src/utils/dates.ts

@@ -134,6 +134,45 @@ export function timeAgo(
   return value.toString();
 }
 
+function pad2(n: number): string {
+  return n.toString().padStart(2, "0");
+}
+
+function pad4(n: number): string {
+  return n.toString().padStart(4, "0");
+}
+
+/**
+ * Format a Date as `YYYY-MM-DD` using the date's local-time fields.
+ *
+ * The output reflects what the user sees in their own timezone (the calendar
+ * day on their clock), not the UTC day. Use this when round-tripping values
+ * that originated from local-time inputs — date pickers, "filter on this
+ * day", calendar UI — so the displayed and serialized days agree.
+ *
+ * Not suitable for cross-timezone storage; use `Date.toISOString()` for that.
+ */
+export function dateToLocalISODate(d: Date): string {
+  return `${pad4(d.getFullYear())}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+}
+
+/**
+ * Format a Date as `HH:MM:SS` using the date's local-time fields.
+ *
+ * See `dateToLocalISODate` for the rationale on local vs UTC.
+ */
+export function dateToLocalISOTime(d: Date): string {
+  return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
+}
+
+/**
+ * Format a Date as `YYYY-MM-DDTHH:MM:SS` (no timezone suffix) using local
+ * fields. See `dateToLocalISODate` for the rationale on local vs UTC.
+ */
+export function dateToLocalISODateTime(d: Date): string {
+  return `${dateToLocalISODate(d)}T${dateToLocalISOTime(d)}`;
+}
+
 export const supportedDateFormats = ["yyyy", "yyyy-MM", "yyyy-MM-dd"] as const;
 export type DateFormat = (typeof supportedDateFormats)[number];