@jielga/tmdatagrid 2.0.0-beta.2 → 2.0.0-beta.21

package/src/{tmdatagrid/components → components}/filters/TMDataGridFilterValueInput.tsx

@@ -7,30 +7,39 @@ import {
   operatorTakesArrayValue,
   operatorTakesRangeValue,
 } from "../../core/filterOperators";
+import { filterFieldProps } from "./controlLayout";
 
 /**
- * The built-in value control of a filter-panel row - what renders when a
- * column declares no `meta.filter.control`. Shaped by the operator: a
- * multi-select for the set operators, a From/To pair for `between`, a Yes/No
- * dropdown for booleans, a typed input otherwise.
+ * The built-in value control of a filter row - what renders when a column
+ * declares no `meta.filter.control`. Shaped by the operator: a multi-select
+ * for the set operators, a From/To pair for `between`, a Yes/No dropdown for
+ * booleans, a typed input otherwise.
+ *
+ * Shaped by `layout` as well: in a header cell the fields drop their labels,
+ * fill the column's width and name themselves through `aria-label`.
  *
  * Exported so a custom control can fall back to it for the operators it does
  * not care about, instead of rebuilding them.
  */
-export function TMDataGridFilterValueInput({
-  column,
-  operator,
-  value,
-  onChange,
-  options,
-  size,
-  labels,
-}: TMDataGridFilterControlArgs) {
+export function TMDataGridFilterValueInput(args: TMDataGridFilterControlArgs) {
+  const { column, operator, value, onChange, options, size, labels, layout } =
+    args;
   const type = getColumnType(column);
   const needsValue = operatorNeedsValue(operator);
   const scalarValue = typeof value === "string" ? value : "";
   const inputType =
     type === "number" ? "number" : type === "date" ? "date" : "text";
+  const inHeader = layout === "header";
+  const fills = layout !== "row";
+  // Portalled everywhere: drawn inline, the dropdown is clipped - by the
+  // header cell, by the grid frame's `overflow: hidden` (its corner radius)
+  // under the popup, or by the sidebar's scroller. The popup's click-away
+  // exempts portal nodes, so picking an option does not read as a click away.
+  const comboboxProps = { withinPortal: true };
+  // No placeholder in a header cell: the column name is directly above the
+  // field, and "Filter value" only ever fits a wide column anyway.
+  const placeholder =
+    needsValue && !inHeader ? labels.filterValuePlaceholder : "";
 
   if (operatorTakesRangeValue(operator)) {
     const rangeValue: [string, string] = Array.isArray(value)
@@ -39,12 +48,17 @@ export function TMDataGridFilterValueInput({
     return (
       // The interval's two ends. Either may stay empty (an open end), and
       // each writes its slot of the `[min, max]` pair.
-      <Group gap={4} wrap="nowrap" align="flex-start">
+      <Group gap={4} wrap="nowrap" align="flex-start" w={fills ? "100%" : undefined}>
         <TextInput
-          label={labels.filterFrom}
+          {...filterFieldProps(
+            args,
+            { label: labels.filterFrom, width: 88 },
+            labels.filterFrom,
+          )}
           size={size}
-          w={88}
           type={inputType}
+          flex={fills ? 1 : undefined}
+          miw={0}
           data-dg-part="filter-value-from"
           value={rangeValue[0]}
           onChange={(event) =>
@@ -52,10 +66,15 @@ export function TMDataGridFilterValueInput({
           }
         />
         <TextInput
-          label={labels.filterTo}
+          {...filterFieldProps(
+            args,
+            { label: labels.filterTo, width: 88 },
+            labels.filterTo,
+          )}
           size={size}
-          w={88}
           type={inputType}
+          flex={fills ? 1 : undefined}
+          miw={0}
           data-dg-part="filter-value-to"
           value={rangeValue[1]}
           onChange={(event) =>
@@ -72,10 +91,9 @@ export function TMDataGridFilterValueInput({
     // the data, via the faceted index.
     return (
       <MultiSelect
-        label={labels.filterValue}
+        {...filterFieldProps(args, { label: labels.filterValue, width: 180 })}
         size={size}
-        w={180}
-        comboboxProps={{ withinPortal: false }}
+        comboboxProps={comboboxProps}
         searchable
         data-dg-part="filter-value"
         data={optionsToComboboxData(options)}
@@ -88,14 +106,13 @@ export function TMDataGridFilterValueInput({
   if (type === "boolean") {
     return (
       <Select
-        label={labels.filterValue}
+        {...filterFieldProps(args, { label: labels.filterValue, width: 180 })}
         size={size}
-        w={180}
-        comboboxProps={{ withinPortal: false }}
+        comboboxProps={comboboxProps}
         data-dg-part="filter-value"
         disabled={!needsValue}
         clearable
-        placeholder={needsValue ? labels.filterValuePlaceholder : ""}
+        placeholder={placeholder}
         data={[
           { value: "true", label: labels.booleanTrue },
           { value: "false", label: labels.booleanFalse },
@@ -108,13 +125,12 @@ export function TMDataGridFilterValueInput({
 
   return (
     <TextInput
-      label={labels.filterValue}
+      {...filterFieldProps(args, { label: labels.filterValue, width: 180 })}
       size={size}
-      w={180}
       type={needsValue ? inputType : "text"}
       data-dg-part="filter-value"
       disabled={!needsValue}
-      placeholder={needsValue ? labels.filterValuePlaceholder : ""}
+      placeholder={placeholder}
       value={needsValue ? scalarValue : ""}
       onChange={(event) => onChange(event.currentTarget.value)}
     />

package/src/components/filters/controlLayout.ts

@@ -0,0 +1,32 @@
+import { getColumnLabel } from "../../core/columnUtils";
+import type { TMDataGridFilterControlArgs } from "../../core/filterControls";
+
+type LayoutArgs = Pick<
+  TMDataGridFilterControlArgs,
+  "column" | "layout" | "labels"
+>;
+
+/**
+ * The label and width props a filter control's field takes, by layout.
+ *
+ * Side by side in a panel row a field is a labelled control of a fixed
+ * comfortable width. Stacked in a narrow host it keeps the label and fills the
+ * host instead. In a header cell there is no room for a label above it at all,
+ * so the field names itself to assistive tech and fills the column.
+ *
+ * `qualifier` distinguishes the two ends of a pair, which would otherwise both
+ * read as the column's name.
+ */
+export function filterFieldProps(
+  args: LayoutArgs,
+  panel: { label: string; width?: number | string },
+  qualifier?: string,
+): { label?: string; "aria-label"?: string; w?: number | string } {
+  if (args.layout === "row") return { label: panel.label, w: panel.width };
+  if (args.layout === "stacked") return { label: panel.label, w: "100%" };
+  const name = args.labels.filterOn(getColumnLabel(args.column));
+  return {
+    "aria-label": qualifier === undefined ? name : `${name} ${qualifier}`,
+    w: "100%",
+  };
+}

package/src/components/filters/filterControlFor.ts

@@ -0,0 +1,65 @@
+import type { Column } from "@tanstack/react-table";
+import { resolveColumnOptions, type TMDataGridOption } from "../../core/columnOptions";
+import { getColumnFilterControl, getColumnType } from "../../core/columnUtils";
+import type { TMDataGridFilterControlComponent } from "../../core/filterControls";
+import type { TMDataGridRowData } from "../../TMDataGridContext";
+import type { TMDataGridFeatures, TMDataGridTable } from "../../useTMDataGrid";
+import { TMDataGridFilterValueInput } from "./TMDataGridFilterValueInput";
+
+type FilterColumn = Column<TMDataGridFeatures, TMDataGridRowData, unknown>;
+
+/** One array, so "this column has no options" never changes identity. */
+const NO_OPTIONS: ReadonlyArray<TMDataGridOption> = [];
+
+/**
+ * Whether resolving this column's options would read the faceted index -
+ * which is what makes the resolution worth memoizing, and what it goes stale
+ * against.
+ */
+export function filterOptionsUseFacets(column: FilterColumn): boolean {
+  const declared = column.columnDef.meta?.options;
+  return (
+    columnNeedsFilterOptions(column) &&
+    (declared === undefined || declared === "faceted")
+  );
+}
+
+/**
+ * Whether a column's filter control is offered a list of options at all.
+ *
+ * Only where options mean something out of the box - a declared set, or a
+ * select-shaped column's faceted values. A custom control wanting faceted
+ * values on some other column resolves them itself; resolving here would build
+ * the faceted index for every filtered column.
+ */
+function columnNeedsFilterOptions(column: FilterColumn): boolean {
+  const type = getColumnType(column);
+  return (
+    column.columnDef.meta?.options !== undefined ||
+    type === "select" ||
+    type === "multiSelect"
+  );
+}
+
+/**
+ * What a column's filter control is, and what options it is handed - the one
+ * decision the panel row and the header cell make identically.
+ *
+ * Not a hook: the panel resolves this inside a `map` over its rows, where a
+ * hook cannot go. The header row memoizes the call itself, because it
+ * re-renders with the table on every scroll frame.
+ */
+export function filterControlFor(
+  table: TMDataGridTable<TMDataGridRowData>,
+  column: FilterColumn,
+): {
+  options: ReadonlyArray<TMDataGridOption>;
+  ValueControl: TMDataGridFilterControlComponent;
+} {
+  return {
+    options: columnNeedsFilterOptions(column)
+      ? resolveColumnOptions({ table, column, fallback: "faceted" })
+      : NO_OPTIONS,
+    ValueControl: getColumnFilterControl(column) ?? TMDataGridFilterValueInput,
+  };
+}

package/src/{tmdatagrid/components → components}/icons.ts

@@ -16,6 +16,7 @@ export {
   IconChevronRight as ChevronRightIcon,
   IconColumns3 as ColumnsIcon,
   IconDotsVertical as DotsVerticalIcon,
+  IconDownload as DownloadIcon,
   IconEyeOff as EyeOffIcon,
   IconFilter as FilterIcon,
   IconFoldDown as ExpandAllIcon,

package/src/{tmdatagrid/components → components}/sticky.module.css

@@ -104,3 +104,47 @@
     opacity: 0;
   }
 }
+
+/* The scrolled-under shadow: a soft band under the header, only while body
+   rows are actually beneath it. Worn by the last header row - the header/body
+   boundary - which is the filter row under `filters.inHeader` and the last
+   group row otherwise. Lives here rather than in either row's own module
+   because the two are in different modules and the boundary moves between
+   them.
+
+   A scroll-driven animation, like the pinned-lane gradients: the shadow tracks
+   the scroll on the compositor with no listener and no render, and an inactive
+   timeline (nothing to scroll) leaves `opacity: 0` standing, so a grid that
+   fits shows nothing. Where unsupported there is simply no shadow - the
+   header's border already draws the boundary. */
+.headerBoundary::after {
+  content: "";
+  position: absolute;
+  inset: 100% 0 auto 0;
+  height: 6px;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom,
+    var(--dg-header-shadow-color, rgba(0, 0, 0, 0.14)),
+    transparent
+  );
+  opacity: 0;
+}
+
+@supports (animation-timeline: scroll()) {
+  .headerBoundary::after {
+    animation: dgHeaderShadow linear both;
+    animation-timeline: scroll(nearest block);
+    /* Arrives over the first rows leaving, reads as depth not as a fade. */
+    animation-range: 0px 24px;
+  }
+}
+
+@keyframes dgHeaderShadow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/src/components/useHideableColumns.ts

@@ -0,0 +1,52 @@
+import { useSelector } from "@tanstack/react-store";
+import { useTMDataGridContext } from "../TMDataGridContext";
+
+/**
+ * The columns a column chooser may list, and the two writes it makes.
+ *
+ * Shared by `TMDataGridColumnsPanel` (plain controls) and
+ * `TMDataGrid.Menu.Columns` (menu items), so the two always list the same
+ * columns and hide them the same way.
+ */
+export function useHideableColumns() {
+  const { table } = useTMDataGridContext();
+
+  const columnVisibility = useSelector(
+    table.store,
+    (state) => state.columnVisibility,
+  );
+
+  // Only what can actually be hidden. A column with `enableHiding: false` is
+  // left out rather than listed and disabled: a box that cannot be ticked only
+  // invites the question, and every generated lane is one - the checkbox and
+  // edit lanes hold the controls the grid needs, the tree column follows the
+  // grouping state, the row-number gutter follows `enableRowNumbers`. None of
+  // them is a setting.
+  const columns = table
+    .getAllLeafColumns()
+    .filter((column) => column.getCanHide());
+
+  const shownCount = columns.filter(
+    (column) => columnVisibility[column.id] !== false,
+  ).length;
+
+  /**
+   * Show or hide every listed column.
+   *
+   * Not `table.toggleAllColumnsVisible`, which writes a visibility entry for
+   * *every* leaf column: showing all would publish the tree column - hidden
+   * because nothing is grouped, not because the user hid it - and hiding all
+   * would force the same column visible, since it writes `!getCanHide()` for
+   * the columns it will not touch. Either way a lane the panel never listed
+   * changes state, and persistence then keeps it that way.
+   */
+  const setAllVisible = (visible: boolean) => {
+    table.setColumnVisibility((previous) => {
+      const next = { ...previous };
+      for (const column of columns) next[column.id] = visible;
+      return next;
+    });
+  };
+
+  return { columns, columnVisibility, shownCount, setAllVisible };
+}

package/src/{tmdatagrid/core → core}/autosize.ts

@@ -1,6 +1,7 @@
 import type { RowData } from "@tanstack/react-table";
 import type { TMDataGridRowData } from "../TMDataGridContext";
 import type { TMDataGridTable } from "../useTMDataGrid";
+import { isHTMLElement } from "./dom";
 
 /**
  * Room the header keeps for its hover-revealed actions (sort arrow, menu) and
@@ -26,7 +27,9 @@ const CONTENT_ALLOWANCE = 2;
  * measure (jsdom reports 0 there).
  */
 function contentSpanWidth(content: HTMLElement): number {
-  const range = document.createRange();
+  // The cell's own document, not the global one: a Range from the opener's
+  // document cannot select nodes in a window opened with `window.open`.
+  const range = content.ownerDocument.createRange();
   range.selectNodeContents(content);
   // jsdom's Range has no getBoundingClientRect at all, hence the guard
   // rather than a zero-check alone.
@@ -84,7 +87,7 @@ export function measureColumnContentWidth({
 
   for (const cell of mountedCells(container, columnId)) {
     const content = cell.firstElementChild;
-    if (!(content instanceof HTMLElement)) continue;
+    if (!isHTMLElement(content)) continue;
     const styles = getComputedStyle(cell);
     const padding =
       (Number.parseFloat(styles.paddingLeft) || 0) +

package/src/{tmdatagrid/core → core}/capabilities.ts

@@ -120,13 +120,20 @@ export type TMDataGridFeatureFlags = {
   grouping: boolean;
   /** Whether cells can be edited at all - the `editing` option was set. */
   editing: boolean;
-  /** The commit policy, or `null` while editing is off. */
+  /** What counts as a commit, or `null` while editing is off. */
   editMode: TMDataGridEditMode | null;
   /**
-   * Whether a confirmed entry row stays pinned in the sticky entry block
-   * until Save all - `editing.newRowsSticky`, draft mode only. Off by
-   * default: a confirmed row joins the scrolling flow instead, so entering
-   * many rows cannot fill the viewport with sticky chrome.
+   * Where a commit goes - `editing.draft`. On, commits park in the grid's
+   * draft store and leave through `edit.saveDrafts()`; off, each one reaches
+   * the consumer as it happens.
+   */
+  editDraft: boolean;
+  /**
+   * Whether a committed entry row stays pinned in the sticky entry block
+   * until the draft store is saved - `editing.newRowsSticky`, which needs
+   * `editing.draft`. Off by default: a committed row joins the body rows
+   * instead, sorted and filtered with them, so entering many rows cannot
+   * fill the viewport with sticky chrome.
    */
   editNewRowsSticky: boolean;
   /** The generated row-number gutter - `enableRowNumbers`. Off by default. */
@@ -211,8 +218,9 @@ export function readFeatureFlags<TData extends RowData>(
     grouping: options.enableGrouping ?? options.manualPagination !== true,
     editing: options.editing !== undefined,
     editMode: options.editing?.mode ?? null,
+    editDraft: options.editing?.draft === true,
     editNewRowsSticky:
-      options.editing?.mode === "draft" &&
+      options.editing?.draft === true &&
       options.editing.newRowsSticky === true,
     rowNumbers: options.enableRowNumbers === true,
     // A predicate counts as on - some rows may still pin.

package/src/{tmdatagrid/core → core}/columnOptions.ts

@@ -45,6 +45,51 @@ export type TMDataGridOptionsSource =
   | "faceted"
   | ((args: TMDataGridOptionsArgs) => ReadonlyArray<TMDataGridOption | string>);
 
+/**
+ * Columns already warned about, per grid - so a warning fires once and a
+ * test's grid is not silenced by another test's. Keyed on `table.store`, not
+ * on the table: `useTable` returns a fresh table object every render, while
+ * the store is created once and shared by every render's copy.
+ */
+const warnedFaceted = new WeakMap<object, Set<string>>();
+
+/**
+ * Faceted options read the distinct values in `data`, which under
+ * `manualFiltering` or `manualPagination` is whatever the server sent for the
+ * current page. The dropdown then offers the values that happen to be on the
+ * page the user is looking at, and looks correct while being wrong - so it is
+ * said out loud, once per column.
+ *
+ * Fires from render, unlike the library's other warnings: the fallback form
+ * of `"faceted"` only exists at resolve time, which is render. The guard
+ * makes it once per grid regardless - a StrictMode double render or a
+ * discarded concurrent render marks the set the same way a committed one
+ * does. H3 in the backlog folds it into the diagnostics mechanism with the
+ * rest.
+ */
+function warnFacetedUnderManualMode(
+  table: TMDataGridTable<TMDataGridRowData>,
+  columnId: string,
+): void {
+  if (
+    table.options.manualFiltering !== true &&
+    table.options.manualPagination !== true
+  ) {
+    return;
+  }
+  const store = table.store as object;
+  let warned = warnedFaceted.get(store);
+  if (warned === undefined) {
+    warned = new Set();
+    warnedFaceted.set(store, warned);
+  }
+  if (warned.has(columnId)) return;
+  warned.add(columnId);
+  console.warn(
+    `TMDataGrid: column "${columnId}" resolves faceted options while the server owns the rows - the distinct values of one page are not the distinct values of the result set. Pass meta.options as a list or a function instead.`,
+  );
+}
+
 function addFacetValue(target: Set<string>, value: unknown): void {
   if (value === null || value === undefined || value === "") return;
   target.add(String(value));
@@ -68,6 +113,7 @@ export function resolveColumnOptions({
   if (!source) return [];
 
   if (source === "faceted") {
+    warnFacetedUnderManualMode(table, column.id);
     const values = new Set<string>();
     for (const key of column.getFacetedUniqueValues().keys()) {
       if (Array.isArray(key)) {

package/src/{tmdatagrid/core → core}/columnOrdering.ts

@@ -1,4 +1,8 @@
-import type { Column, ColumnPinningState } from "@tanstack/react-table";
+import type {
+  Column,
+  ColumnPinningPosition,
+  ColumnPinningState,
+} from "@tanstack/react-table";
 import type { TMDataGridRowData } from "../TMDataGridContext";
 import { isColumnReorderable, isGeneratedColumn } from "./columnUtils";
 import type { TMDataGridFeatures, TMDataGridTable } from "../useTMDataGrid";
@@ -10,11 +14,11 @@ type GridTable = TMDataGridTable<TMDataGridRowData>;
  * The lane a column renders in.
  *
  * Pinning splits the grid into three, and TanStack sequences them from two
- * different state slices: `columnPinning.left` / `.right` order the pinned
+ * different state slices: `columnPinning.start` / `.end` order the pinned
  * lanes, `columnOrder` orders the centre. A move therefore always stays inside
  * one lane - moving a column into another one would be a pin, not a reorder.
  */
-export type TMDataGridColumnRegion = "left" | "center" | "right";
+export type TMDataGridColumnRegion = "start" | "center" | "end";
 
 /** Which edge of the column under the pointer a dragged column lands on. */
 export type TMDataGridDropSide = "before" | "after";
@@ -23,11 +27,26 @@ export function getColumnRegion(
   columnPinning: ColumnPinningState,
   columnId: string,
 ): TMDataGridColumnRegion {
-  if (columnPinning.left.includes(columnId)) return "left";
-  if (columnPinning.right.includes(columnId)) return "right";
+  if (columnPinning.start.includes(columnId)) return "start";
+  if (columnPinning.end.includes(columnId)) return "end";
   return "center";
 }
 
+/**
+ * TanStack's pinned regions are logical: `start` and `end` follow the writing
+ * direction. The grid's own vocabulary - its sticky CSS, the `data-pinned`
+ * attribute, the column menu's "Pin left" and "Pin right" - is physical, and
+ * the grid renders left to right only. This translates between the pair:
+ * `left` maps to `start` and `right` to `end`.
+ */
+export function pinningPositionOfSide(
+  side: "left" | "right" | false,
+): ColumnPinningPosition {
+  if (side === "left") return "start";
+  if (side === "right") return "end";
+  return false;
+}
+
 /** Moves one id next to another, leaving every other id in place. */
 function moveInList(
   ids: ReadonlyArray<string>,
@@ -87,7 +106,7 @@ export function moveColumn({
  * Puts the generated lanes back on the outside of both pinned lanes: the ones
  * on the left before every consumer column, the edit lane after all of them.
  *
- * `column.pin("right")` appends, so pinning a column right would otherwise drop
+ * `column.pin("end")` appends, so pinning a column right would otherwise drop
  * it outside the edit lane, so the row's Save and Delete would no longer be
  * last in the row. Pinning left appends too, which is already correct there,
  * but the same pass keeps both lanes in place whatever a consumer writes into
@@ -101,13 +120,13 @@ export function keepGeneratedColumnsOutermost(
 ): ColumnPinningState {
   const generated = (id: string) => isGeneratedColumn(id);
   return {
-    left: [
-      ...pinning.left.filter(generated),
-      ...pinning.left.filter((id) => !generated(id)),
+    start: [
+      ...pinning.start.filter(generated),
+      ...pinning.start.filter((id) => !generated(id)),
     ],
-    right: [
-      ...pinning.right.filter((id) => !generated(id)),
-      ...pinning.right.filter(generated),
+    end: [
+      ...pinning.end.filter((id) => !generated(id)),
+      ...pinning.end.filter(generated),
     ],
   };
 }
@@ -117,8 +136,8 @@ function getRegionColumns(
   table: GridTable,
   region: TMDataGridColumnRegion,
 ): Array<GridColumn> {
-  if (region === "left") return table.getLeftVisibleLeafColumns();
-  if (region === "right") return table.getRightVisibleLeafColumns();
+  if (region === "start") return table.getStartVisibleLeafColumns();
+  if (region === "end") return table.getEndVisibleLeafColumns();
   return table.getCenterVisibleLeafColumns();
 }
 

package/src/{tmdatagrid/core → core}/columnUtils.ts

@@ -1,6 +1,7 @@
 import type { Row } from "@tanstack/react-table";
 import {
   getDefaultOperator,
+  getOperatorsForType,
   type TMDataGridColumnType,
   type TMDataGridFilterOperator,
 } from "./filterOperators";
@@ -37,17 +38,36 @@ export function getColumnType(column: ColumnLike): TMDataGridColumnType {
   return column.columnDef.meta?.type ?? "string";
 }
 
+/**
+ * The operators this column offers: the type's list, narrowed to
+ * `meta.filter.operators` when the column declares one. The type's order is
+ * kept so the menu reads the same on every column; an operator the type does
+ * not offer is dropped, and an allowlist that leaves nothing falls back to the
+ * type's full list rather than an empty menu.
+ */
+export function getColumnOperators(
+  column: ColumnLike,
+): readonly TMDataGridFilterOperator[] {
+  const offered = getOperatorsForType(getColumnType(column));
+  const allowed = column.columnDef.meta?.filter?.operators;
+  if (!allowed) return offered;
+  const narrowed = offered.filter((operator) => allowed.includes(operator));
+  return narrowed.length > 0 ? narrowed : offered;
+}
+
 /**
  * The operator a fresh filter on this column starts with -
- * `meta.filter.defaultOperator`, else the type's default.
+ * `meta.filter.defaultOperator`, else the type's default where the column
+ * offers it, else the first operator it does offer.
  */
 export function getColumnDefaultOperator(
   column: ColumnLike,
 ): TMDataGridFilterOperator {
-  return (
-    column.columnDef.meta?.filter?.defaultOperator ??
-    getDefaultOperator(getColumnType(column))
-  );
+  const declared = column.columnDef.meta?.filter?.defaultOperator;
+  if (declared) return declared;
+  const offered = getColumnOperators(column);
+  const typeDefault = getDefaultOperator(getColumnType(column));
+  return offered.includes(typeDefault) ? typeDefault : offered[0];
 }
 
 /**
@@ -139,3 +159,22 @@ export function isColumnReorderable(column: ColumnLike): boolean {
   if (column.columnDef.meta?.enableOrdering === false) return false;
   return column.parent === undefined;
 }
+
+/** The list length from which a column chooser shows its search box. */
+export const COLUMN_SEARCH_MIN = 6;
+
+/** `"auto"` shows the search box from `COLUMN_SEARCH_MIN` columns. */
+export type TMDataGridColumnSearchable = boolean | "auto";
+
+/**
+ * Whether a column list shows a search box. A handful of columns is read at
+ * a glance, so `"auto"` keeps the input out of the way until the list is long
+ * enough to need one.
+ */
+export function showColumnSearch(
+  searchable: TMDataGridColumnSearchable,
+  count: number,
+): boolean {
+  if (searchable === "auto") return count >= COLUMN_SEARCH_MIN;
+  return searchable;
+}