@marimo-team/islands 0.23.9-dev1 → 0.23.9-dev10

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,56 @@
+/* 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,
+  };
+}
+
+// When columns are clipped server-side, the TanStack instance only holds the
+// rendered subset, so visible/hidden math must use that subset's total. The
+// dataset-wide value is still correct for the no-hidden "N columns" label.
+export function getColumnCountForDisplay<TData>(
+  table: Table<TData>,
+  datasetTotalColumns: number,
+): { totalColumns: number; hiddenColumns: number } {
+  const counts = getUserColumnVisibilityCounts(table);
+  return {
+    totalColumns: counts.hidden > 0 ? counts.total : datasetTotalColumns,
+    hiddenColumns: counts.hidden,
+  };
+}

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/table-explorer-panel/table-explorer-panel.tsx

@@ -1,8 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+"use no memo";
+
+// tanstack/table is not compatible with React compiler
+// https://github.com/TanStack/table/issues/5567
 
 import { Fill } from "@marimo-team/react-slotz";
-import type { OnChangeFn, RowSelectionState } from "@tanstack/react-table";
-import type React from "react";
+import type {
+  OnChangeFn,
+  RowSelectionState,
+  Table,
+} from "@tanstack/react-table";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent } from "@/components/ui/tabs";
 import { SlotNames } from "@/core/slots/slots";
@@ -19,7 +26,7 @@ import { ColumnExplorerPanel } from "../column-explorer-panel/column-explorer";
 import { RowViewerPanel } from "../row-viewer-panel/row-viewer";
 import type { FieldTypesWithExternalType, TooManyRows } from "../types";
 
-export interface TableExplorerPanelProps {
+export interface TableExplorerPanelProps<TData> {
   // Row viewer props
   rowIdx: number;
   setRowIdx: (rowIdx: number) => void;
@@ -33,6 +40,7 @@ export interface TableExplorerPanelProps {
   previewColumn?: PreviewColumn;
   totalColumns: number;
   tableId: string;
+  table: Table<TData>;
   // Visibility flags
   showRowExplorer: boolean;
   showColumnExplorer: boolean;
@@ -46,7 +54,7 @@ const tabTriggerClassName =
 const activeClassName = "text-primary";
 const inactiveClassName = "hover:text-foreground";
 
-export const TableExplorerPanel: React.FC<TableExplorerPanelProps> = ({
+export function TableExplorerPanel<TData>({
   // Row viewer
   rowIdx,
   setRowIdx,
@@ -60,13 +68,14 @@ export const TableExplorerPanel: React.FC<TableExplorerPanelProps> = ({
   previewColumn,
   totalColumns,
   tableId,
+  table,
   // Visibility
   showRowExplorer,
   showColumnExplorer,
   // Tab state
   activeTab,
   onTabChange,
-}) => {
+}: TableExplorerPanelProps<TData>) {
   const showTabs = showRowExplorer && showColumnExplorer;
 
   const rowViewer = (
@@ -89,6 +98,7 @@ export const TableExplorerPanel: React.FC<TableExplorerPanelProps> = ({
       totalRows={totalRows}
       totalColumns={totalColumns}
       tableId={tableId}
+      table={table}
     />
   );
 
@@ -158,4 +168,4 @@ export const TableExplorerPanel: React.FC<TableExplorerPanelProps> = ({
       </TabsContent>
     </Tabs>
   );
-};
+}