@jielga/tmdatagrid 2.0.0-beta.11 → 2.0.0-beta.13

package/src/tmdatagrid/components/TMDataGridTable.module.css

@@ -1,4 +1,4 @@
-/* Anchors the filter panel, which floats over the first body rows. */
+/* Anchors the filter popup, which floats over the first body rows. */
 .tableWrapper {
   position: relative;
   flex: 1;
@@ -7,9 +7,17 @@
   flex-direction: column;
 }
 
+/* The sidebar surface is a second column of the wrapper rather than a layer
+   over the rows, so the wrapper lays its children out side by side. The
+   sidebar's own module decides which side it lands on. */
+.tableWrapper[data-dg-filter-sidebar] {
+  flex-direction: row;
+}
+
 .scrollContainer {
   position: relative;
   flex: 1;
+  min-width: 0;
   min-height: 0;
   overflow: auto;
   /* Lets .messageRow size itself to the scrollport (100cqi) instead of the
@@ -52,46 +60,6 @@
   z-index: var(--dg-z-header, 6);
 }
 
-/* The scrolled-under shadow: a soft band under the header, only while body
-   rows are actually beneath it. On the last header row - the header/body
-   boundary - not on every stacked group row. 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. */
-.headerRow[data-dg-header-last]::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()) {
-  .headerRow[data-dg-header-last]::after {
-    animation: dg-header-shadow 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 dg-header-shadow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 .bodyRow {
   --row-bg: var(--mantine-color-body);
   display: grid;

package/src/tmdatagrid/components/TMDataGridTable.tsx

@@ -24,7 +24,12 @@ import {
 import classes from "./TMDataGridTable.module.css";
 import sticky from "./sticky.module.css";
 import { type TMDataGridRowData, useTMDataGridContext } from "../TMDataGridContext";
-import { TMDataGridFilterPanel } from "./TMDataGridFilterPanel";
+import {
+  TMDataGridFilterPopup,
+  TMDataGridFilterSidebar,
+} from "./TMDataGridFilterSurface";
+import { TMDataGridHeaderFilterRow } from "./TMDataGridHeaderFilterRow";
+import { getGridCapabilities } from "../core/capabilities";
 import {
   TMDataGridHeaderCell,
   type TMDataGridColumnMenuItemsRenderer,
@@ -737,6 +742,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     ui,
     edit,
     features,
+    filters,
     labels,
     rowHeight,
     controlSize,
@@ -900,6 +906,22 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
    * virtualizer needs its height from the first paint.
    */
   const gridElementRef = useRef<HTMLDivElement>(null);
+  /**
+   * Header filters only render where something can be filtered - the row would
+   * otherwise be a band of empty cells on a grid with `enableColumnFilters:
+   * false`. Derived up here because the header measurement below depends on
+   * whether the row is in the DOM.
+   */
+  const hasHeaderFilterRow =
+    filters.inHeader && getGridCapabilities(table, features).canFilterAny;
+  /**
+   * How many rows deep the header is. In the measurement's dependencies
+   * because the rows are found once, by query: a `columns` change that adds or
+   * drops a group level changes which elements have to be measured and given
+   * their sticky inset, and nothing else in the list moves when it does.
+   */
+  const headerDepth = table.getCenterHeaderGroups().length;
+  const tableWrapperRef = useRef<HTMLDivElement>(null);
   const [bodyOffsetTop, setBodyOffsetTop] = useState(0);
   const [stickyCoverTop, setStickyCoverTop] = useState(0);
   const [stickyCoverBottom, setStickyCoverBottom] = useState(0);
@@ -917,10 +939,28 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
     );
     const measure = () => {
       let header = 0;
-      for (const headerRow of headerRows) header += headerRow.offsetHeight;
+      for (const headerRow of headerRows) {
+        // Every header row is sticky, so each one needs the height of the rows
+        // above it as its own inset - otherwise a stacked group and the filter
+        // row all pin to the top edge and paint over each other. Written on the
+        // element because only JS knows where the row before it ended; the
+        // stylesheet's `top` is the pre-measurement fallback.
+        headerRow.style.top = `${header}px`;
+        header += headerRow.offsetHeight;
+      }
       if (newRowCount > 0 || pinnedTopRows.length > 0) {
         grid.style.setProperty("--dg-header-height", `${header}px`);
       }
+      // The whole header's height, on the wrapper rather than on the grid,
+      // because the popup is a sibling of the scroll container and never sees
+      // a property set inside it. A second name rather than reusing
+      // `--dg-header-height`: the header cells read that one for their own
+      // `min-height`, so publishing a stacked total there would feed a
+      // two-row header back in as the height of each of its rows.
+      tableWrapperRef.current?.style.setProperty(
+        "--dg-header-stack-height",
+        `${header}px`,
+      );
       let cover = header;
       for (const block of stickyBlocks) cover += block.offsetHeight;
       let offset = cover;
@@ -934,7 +974,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       observer.observe(element);
     }
     return () => observer.disconnect();
-  }, [newRowCount, pinnedTopRows.length]);
+  }, [newRowCount, pinnedTopRows.length, hasHeaderFilterRow, headerDepth]);
 
   /**
    * The entry block's height, published as `--dg-entry-height` so the pinned
@@ -1282,6 +1322,12 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
   const hasSummaryRow = orderedColumns.some(
     (column) => column.columnDef.footer !== undefined,
   );
+  /**
+   * Rows above the first body row, which is what every `aria-rowindex` in the
+   * body counts from and what `aria-rowcount` adds up. The header groups plus
+   * the filter row, when there is one.
+   */
+  const headerRowCount = headerGroups.length + (hasHeaderFilterRow ? 1 : 0);
 
   /**
    * The summary row's height, published as `--dg-summary-height`, which two
@@ -2384,7 +2430,11 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
       : undefined;
 
   return (
-    <div className={classes.tableWrapper}>
+    <div
+      ref={tableWrapperRef}
+      className={classes.tableWrapper}
+      data-dg-filter-sidebar={filters.surface === "sidebar" || undefined}
+    >
       <div
         ref={scrollContainerRef}
         className={classes.scrollContainer}
@@ -2422,7 +2472,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
           aria-rowcount={
             rows.length +
             pinnedRowCount +
-            headerGroups.length +
+            headerRowCount +
             (hasSummaryRow ? 1 : 0)
           }
           aria-colcount={orderedColumns.length}
@@ -2442,11 +2492,16 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                 data-dg-header-row
                 // The scrolled-under shadow belongs to the boundary between
                 // header and body - the last header row, not every stacked
-                // group row above it. See the stylesheet.
-                data-dg-header-last={
-                  groupIndex === headerGroups.length - 1 || undefined
-                }
-                className={classes.headerRow}
+                // group row above it, and not this one at all when the filter
+                // row is below it. See sticky.module.css.
+                className={[
+                  classes.headerRow,
+                  !hasHeaderFilterRow && groupIndex === headerGroups.length - 1
+                    ? sticky.headerBoundary
+                    : "",
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
               >
                 {headerGroup.headers.map((header) => (
                   <TMDataGridHeaderCell
@@ -2458,6 +2513,14 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                 ))}
               </div>
             ))}
+
+            {hasHeaderFilterRow && (
+              <TMDataGridHeaderFilterRow
+                leafHeaders={leafHeaders}
+                layoutFor={layoutFor}
+                ariaRowIndex={headerRowCount}
+              />
+            )}
           </div>
 
           {/* The leading tab guard, below the header controls and above the
@@ -2914,7 +2977,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                         renderBodyRow(
                           row,
                           -1,
-                          headerGroups.length + index + 1,
+                          headerRowCount + index + 1,
                           "top",
                         ),
                       )}
@@ -2935,7 +2998,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                       row,
                       virtualItem.index,
                       virtualItem.index +
-                        headerGroups.length +
+                        headerRowCount +
                         pinnedTopRows.length +
                         1,
                     );
@@ -2958,7 +3021,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
                         renderBodyRow(
                           row,
                           -1,
-                          headerGroups.length +
+                          headerRowCount +
                             pinnedTopRows.length +
                             rows.length +
                             index +
@@ -3014,7 +3077,7 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
             <div
               role="row"
               aria-rowindex={
-                rows.length + pinnedRowCount + headerGroups.length + 1
+                rows.length + pinnedRowCount + headerRowCount + 1
               }
               // Also what the height measurement above looks for. One
               // attribute serves both now that the part name *is* the
@@ -3084,7 +3147,13 @@ export function TMDataGridTable<TData extends RowData = TMDataGridRowData>({
         </div>
       </div>
 
-      <TMDataGridFilterPanel />
+      {/* The automatic filter surfaces. The popup floats over the first body
+          rows, anchored to the wrapper; the sidebar is a second column of it,
+          which is why the wrapper turns into a flex row for one. Under
+          `filters.surface: "none"` neither renders and the consumer's own
+          `TMDataGrid.FilterPanel` is the only panel on the page. */}
+      {filters.surface === "popup" && <TMDataGridFilterPopup />}
+      {filters.surface === "sidebar" && <TMDataGridFilterSidebar />}
     </div>
   );
 }

package/src/tmdatagrid/components/TMDataGridToolbar.tsx

@@ -7,7 +7,7 @@ import { getGridCapabilities } from "../core/capabilities";
 import { useSettledTableState } from "../core/useSettledTableState";
 import { isFilterActive } from "../core/filterOperators";
 import { FilterIcon } from "./icons";
-import { openColumnFilter } from "../useTMDataGrid";
+import { seedColumnFilter } from "../useTMDataGrid";
 
 /** Row above the grid. Compose it from the pieces below, or anything else. */
 export function TMDataGridToolbar({ children }: { children?: ReactNode }) {
@@ -49,15 +49,21 @@ export function TMDataGridLoadingIndicator() {
 /**
  * Visible rows over total rows. On a server-driven grid, set
  * `meta.totalRowCount` for the denominator - the client never sees every row.
+ * Without it the count is rendered alone, since the fallback denominator would
+ * be the rows the server sent for the current page: a plausible-looking wrong
+ * total, and on an unfiltered first page the same number twice.
  */
 export function TMDataGridSummaryCount({ children }: { children?: ReactNode }) {
   const { table, controlSize } = useTMDataGridContext();
   useSettledTableState(table.store);
 
+  const serverDriven =
+    table.options.manualFiltering === true ||
+    table.options.manualPagination === true;
   const shown = table.getRowCount();
   const total =
     table.options.meta?.totalRowCount ??
-    table.getPreFilteredRowModel().rows.length;
+    (serverDriven ? undefined : table.getPreFilteredRowModel().rows.length);
 
   return (
     <Text
@@ -67,18 +73,28 @@ export function TMDataGridSummaryCount({ children }: { children?: ReactNode }) {
       className={classes.summaryCount}
       data-dg-part="summary-count"
     >
-      {children !== undefined ? children : `${shown} / ${total}`}
+      {children !== undefined
+        ? children
+        : total === undefined
+          ? `${shown}`
+          : `${shown} / ${total}`}
     </Text>
   );
 }
 
 /**
- * Toggles the filter panel, seeding a filter row on the first filterable column.
- * Renders nothing when no column can be filtered (`enableColumnFilters: false`).
+ * Toggles the grid's filter surface - the popup or the sidebar, whichever
+ * `filters.surface` names - seeding a filter row on the first filterable
+ * column. The count of active filters tints it.
+ *
+ * Renders nothing when no column can be filtered (`enableColumnFilters:
+ * false`), and nothing under `filters.surface: "none"`, where there is no
+ * automatic surface for it to toggle. Read `ui.state.filterPanelOpen` and
+ * render your own control if a hand-placed panel wants one.
  */
 export function TMDataGridFilterButton() {
   const api = useTMDataGridContext();
-  const { table, ui, features, labels, controlSize } = api;
+  const { table, ui, features, filters, labels, controlSize } = api;
   const opened = useSelector(ui, (state) => state.filterPanelOpen);
   const columnFilters = useSelector(
     table.store,
@@ -89,6 +105,7 @@ export function TMDataGridFilterButton() {
   ).length;
 
   if (!getGridCapabilities(table, features).canFilterAny) return null;
+  if (filters.surface === "none") return null;
 
   return (
     <Tooltip label={labels.filters} openDelay={400}>
@@ -105,11 +122,20 @@ export function TMDataGridFilterButton() {
             ui.actions.closeFilterPanel();
             return;
           }
-          const firstFilterable = table
-            .getAllLeafColumns()
-            .find((column) => column.getCanFilter());
-          if (firstFilterable) openColumnFilter(api, firstFilterable.id);
-          else ui.actions.openFilterPanel();
+          // Not `openColumnFilter`: that one honours header filters and
+          // focuses the header control instead of opening anything. This
+          // button's whole job is to open the surface it belongs to, which a
+          // grid may well have alongside header filters.
+          //
+          // Seeded only when the panel would otherwise be empty: with filters
+          // already in state it has rows to show, and seeding would stack a
+          // blank row on the first filterable column on top of them.
+          const seedColumn =
+            columnFilters.length === 0
+              ? table.getAllLeafColumns().find((column) => column.getCanFilter())
+              : undefined;
+          if (seedColumn) seedColumnFilter(api, seedColumn.id);
+          ui.actions.openFilterPanel(seedColumn?.id ?? null);
         }}
       >
         <FilterIcon size={16} stroke={1.6} />

package/src/tmdatagrid/components/filters/DgAutocompleteFilter.tsx

@@ -6,6 +6,7 @@ import {
   operatorTakesArrayValue,
   operatorTakesRangeValue,
 } from "../../core/filterOperators";
+import { filterFieldProps } from "./controlLayout";
 import { TMDataGridFilterValueInput } from "./TMDataGridFilterValueInput";
 
 /**
@@ -31,12 +32,12 @@ export function DgAutocompleteFilter(args: TMDataGridFilterControlArgs) {
 
   return (
     <Autocomplete
-      label={labels.filterValue}
+      {...filterFieldProps(args, { label: labels.filterValue, width: 180 })}
       size={size}
-      w={180}
-      comboboxProps={{ withinPortal: false }}
       disabled={!needsValue}
-      placeholder={needsValue ? labels.filterValuePlaceholder : ""}
+      placeholder={
+        needsValue && args.layout !== "header" ? labels.filterValuePlaceholder : ""
+      }
       data={suggestions.map((option) => option.value)}
       limit={20}
       value={needsValue && typeof value === "string" ? value : ""}

package/src/tmdatagrid/components/filters/DgDateRangeFilter.tsx

@@ -1,6 +1,7 @@
 import { Group, TextInput } from "@mantine/core";
 import type { TMDataGridFilterControlArgs } from "../../core/filterControls";
 import { operatorTakesRangeValue } from "../../core/filterOperators";
+import { filterFieldProps } from "./controlLayout";
 import { TMDataGridFilterValueInput } from "./TMDataGridFilterValueInput";
 
 /**
@@ -16,25 +17,41 @@ export function DgDateRangeFilter(args: TMDataGridFilterControlArgs) {
     return <TMDataGridFilterValueInput {...args} />;
   }
 
+  const fills = args.layout !== "row";
   const pair: [string, string] = Array.isArray(value)
     ? [String(value[0] ?? ""), String(value[1] ?? "")]
     : ["", ""];
 
   return (
-    <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="date"
+        flex={fills ? 1 : undefined}
+        miw={0}
         value={pair[0]}
         onChange={(event) => onChange([event.currentTarget.value, pair[1]])}
       />
       <TextInput
-        label={labels.filterTo}
+        {...filterFieldProps(
+          args,
+          { label: labels.filterTo, width: 88 },
+          labels.filterTo,
+        )}
         size={size}
-        w={88}
         type="date"
+        flex={fills ? 1 : undefined}
+        miw={0}
         value={pair[1]}
         onChange={(event) => onChange([pair[0], event.currentTarget.value])}
       />

package/src/tmdatagrid/components/filters/DgRangeSliderFilter.tsx

@@ -1,6 +1,7 @@
 import { Input, RangeSlider } from "@mantine/core";
 import type { TMDataGridFilterControlArgs } from "../../core/filterControls";
 import { operatorTakesRangeValue } from "../../core/filterOperators";
+import { filterFieldProps } from "./controlLayout";
 import { TMDataGridFilterValueInput } from "./TMDataGridFilterValueInput";
 
 /**
@@ -30,7 +31,10 @@ export function DgRangeSliderFilter(args: TMDataGridFilterControlArgs) {
   const upper = pair[1] === undefined || pair[1] === "" ? max : Number(pair[1]);
 
   return (
-    <Input.Wrapper label={labels.filterValue} size={size} w={180}>
+    <Input.Wrapper
+      {...filterFieldProps(args, { label: labels.filterValue, width: 180 })}
+      size={size}
+    >
       <RangeSlider
         size={size}
         mt={6}

package/src/tmdatagrid/components/filters/DgTriStateFilter.tsx

@@ -5,6 +5,7 @@ import {
   operatorTakesArrayValue,
   operatorTakesRangeValue,
 } from "../../core/filterOperators";
+import { filterFieldProps } from "./controlLayout";
 import { TMDataGridFilterValueInput } from "./TMDataGridFilterValueInput";
 
 /**
@@ -21,7 +22,10 @@ export function DgTriStateFilter(args: TMDataGridFilterControlArgs) {
   const scalar = typeof value === "string" ? value : "";
 
   return (
-    <Input.Wrapper label={labels.filterValue} size={size}>
+    <Input.Wrapper
+      {...filterFieldProps(args, { label: labels.filterValue })}
+      size={size}
+    >
       <SegmentedControl
         size={size}
         disabled={!needsValue}

package/src/tmdatagrid/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/tmdatagrid/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%",
+  };
+}