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

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

@@ -8,10 +8,8 @@ import {
   ArrowUpNarrowWideIcon,
   ChevronsUpDown,
   CopyIcon,
+  EyeOffIcon,
   FilterX,
-  FunnelPlusIcon,
-  ListFilterIcon,
-  ListFilterPlusIcon,
   PinOffIcon,
   WrapTextIcon,
 } from "lucide-react";
@@ -27,7 +25,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";
@@ -143,6 +140,23 @@ export function renderColumnPinning<TData, TValue>(
   );
 }
 
+export function HideColumn<TData, TValue>({
+  column,
+}: {
+  column: Column<TData, TValue>;
+}) {
+  if (!column.getCanHide()) {
+    return null;
+  }
+
+  return (
+    <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+      <EyeOffIcon className="mo-dropdown-icon" />
+      Hide column
+    </DropdownMenuItem>
+  );
+}
+
 export function renderCopyColumn<TData, TValue>(column: Column<TData, TValue>) {
   if (!column.getCanCopy?.()) {
     return null;
@@ -237,31 +251,22 @@ export function renderSorts<TData, TValue>(
         {sortDirection === "desc" && renderSortIndex()}
       </DropdownMenuItem>
       {renderClearSort()}
-      <DropdownMenuSeparator />
     </>
   );
 }
 
-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 +297,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/hooks/use-column-visibility.ts

@@ -0,0 +1,42 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
+
+import { useInternalStateWithSync } from "@/hooks/useInternalStateWithSync";
+import type { Table, VisibilityState } from "@tanstack/react-table";
+import { dequal as isDeepEqual } from "dequal";
+import type React from "react";
+
+interface UseColumnVisibilityResult {
+  columnVisibility: VisibilityState;
+  setColumnVisibility: React.Dispatch<React.SetStateAction<VisibilityState>>;
+}
+
+export function useColumnVisibility(
+  hiddenColumns?: string[],
+): UseColumnVisibilityResult {
+  const [columnVisibility, setColumnVisibility] =
+    useInternalStateWithSync<VisibilityState>(
+      Object.fromEntries((hiddenColumns ?? []).map((c) => [c, false])),
+      isDeepEqual,
+    );
+
+  return { columnVisibility, setColumnVisibility };
+}
+
+interface ColumnVisibilityCounts {
+  total: number;
+  visible: number;
+  hidden: number;
+}
+
+export function getUserColumnVisibilityCounts<TData>(
+  table: Table<TData>,
+): ColumnVisibilityCounts {
+  const userColumns = table.getAllLeafColumns().filter((c) => c.getCanHide());
+  const visible = userColumns.filter((c) => c.getIsVisible()).length;
+  return {
+    total: userColumns.length,
+    visible,
+    hidden: userColumns.length - visible,
+  };
+}

package/src/components/data-table/pagination.tsx

@@ -443,15 +443,28 @@ export function prettifyRowCount(rowCount: number, locale: string): string {
 export const prettifyRowColumnCount = ({
   numRows,
   totalColumns,
+  hiddenColumns,
   locale,
 }: {
   numRows: number | "too_many";
   totalColumns: number;
+  hiddenColumns?: number;
   locale: string;
-}): string => {
+}): { rowsAndColumns: string; hiddenSuffix: string | null } => {
   const rowsLabel =
     numRows === "too_many" ? "Unknown" : prettifyRowCount(numRows, locale);
-  const columnsLabel = `${prettyNumber(totalColumns, locale)} ${new PluralWord("column").pluralize(totalColumns)}`;
 
-  return [rowsLabel, columnsLabel].join(", ");
+  const hidden = hiddenColumns ?? 0;
+  const visibleColumns = totalColumns - hidden;
+
+  const columnsLabel =
+    hidden > 0
+      ? `${prettyNumber(visibleColumns, locale)} visible`
+      : `${prettyNumber(totalColumns, locale)} ${new PluralWord("column").pluralize(totalColumns)}`;
+
+  return {
+    rowsAndColumns: [rowsLabel, columnsLabel].join(", "),
+    hiddenSuffix:
+      hidden > 0 ? `(${prettyNumber(hidden, locale)} hidden)` : null,
+  };
 };

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/plugins/impl/DataTablePlugin.tsx

@@ -190,6 +190,7 @@ interface Data<T> {
   fieldTypes?: FieldTypesWithExternalType | null;
   freezeColumnsLeft?: string[];
   freezeColumnsRight?: string[];
+  hiddenColumns?: string[];
   textJustifyColumns?: Record<string, "left" | "center" | "right">;
   wrappedColumns?: string[];
   headerTooltip?: Record<string, string>;
@@ -265,6 +266,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       rowHeaders: columnToFieldTypesSchema,
       freezeColumnsLeft: z.array(z.string()).optional(),
       freezeColumnsRight: z.array(z.string()).optional(),
+      hiddenColumns: z.array(z.string()).optional(),
       textJustifyColumns: z
         .record(z.string(), z.enum(["left", "center", "right"]))
         .optional(),
@@ -814,6 +816,7 @@ const DataTableComponent = ({
   reloading,
   freezeColumnsLeft,
   freezeColumnsRight,
+  hiddenColumns,
   textJustifyColumns,
   wrappedColumns,
   headerTooltip,
@@ -1090,6 +1093,7 @@ const DataTableComponent = ({
             onRowSelectionChange={handleRowSelectionChange}
             freezeColumnsLeft={freezeColumnsLeft}
             freezeColumnsRight={freezeColumnsRight}
+            hiddenColumns={hiddenColumns}
             onCellSelectionChange={handleCellSelectionChange}
             getRowIds={get_row_ids}
             toggleDisplayHeader={toggleDisplayHeader}