feat(data-table): friendlier date filter operators (exact date / after / before / between)

Date columns now offer a slimmer, plainer operator set instead of the numeric
comparators:
- eq → "exact date"
- gte → "after"  (inclusive)
- lte → "before" (inclusive)
- between → "between"
- dropped gt, lt, and ne (the inclusive after/before cover the intent)

Scoped to `date` columns only — number/datetime/time keep the full numeric
operator set and labels. Labels added for en + ja; chip labels and both the
add-filter and edit-chip operator selects use them.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: interacsean

packages/core/src/components/data-table/i18n.ts

@@ -50,6 +50,11 @@ export const dataTableLabels = defineI18nLabels({
     filterOperator_between: "between",
     filterOperator_in: "in",
     filterOperator_nin: "not in",
+    // Date-specific operator labels (date filters drop gt/lt/ne and treat the
+    // boundary as inclusive).
+    filterDateOperator_eq: "exact date",
+    filterDateOperator_gte: "after",
+    filterDateOperator_lte: "before",
     filterBetweenFrom: "From",
     filterBetweenTo: "To",
     filterBetweenMin: "Min",
@@ -102,6 +107,9 @@ export const dataTableLabels = defineI18nLabels({
     filterOperator_between: "の範囲内",
     filterOperator_in: "次のいずれか",
     filterOperator_nin: "次のいずれでもない",
+    filterDateOperator_eq: "指定日",
+    filterDateOperator_gte: "以降",
+    filterDateOperator_lte: "以前",
     filterBetweenFrom: "開始",
     filterBetweenTo: "終了",
     filterBetweenMin: "最小",

packages/core/src/components/data-table/toolbar.test.tsx

@@ -502,7 +502,7 @@ describe("DateFilterEditor", () => {
       wrapper,
     });
 
-    await user.click(screen.getByRole("button", { name: /Created At equals 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date 2025-01-01/ }));
 
     expect(await screen.findByRole("button", { name: "Apply" })).toBeDefined();
   });
@@ -514,7 +514,7 @@ describe("DateFilterEditor", () => {
     });
     render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
-    await user.click(screen.getByRole("button", { name: /Created At equals 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date 2025-01-01/ }));
 
     // The editor uses the app-shell DatePicker: a labelled group of spinbuttons.
     expect(
@@ -529,7 +529,7 @@ describe("DateFilterEditor", () => {
     });
     render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
-    await user.click(screen.getByRole("button", { name: /Created At equals 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date 2025-01-01/ }));
     await screen.findByRole("button", { name: "Apply" });
 
     await typeDateInto(user, 0, "2026-06-15");
@@ -545,14 +545,51 @@ describe("DateFilterEditor", () => {
     });
     render(<TestFilters control={control} columns={[dateColumn]} />, { wrapper });
 
-    await user.click(screen.getByRole("button", { name: /Created At equals 2025-01-01/ }));
+    await user.click(screen.getByRole("button", { name: /Created At exact date 2025-01-01/ }));
     await screen.findByRole("button", { name: "Apply" });
 
     await clearDateIn(user, 0);
     await user.click(screen.getByRole("button", { name: "Apply" }));
 
     expect(control.removeFilter).toHaveBeenCalledWith("createdAt");
   });
+
+  it("labels date operators as exact date / after / before", () => {
+    const control = makeControl({
+      filters: [
+        { field: "createdAt", operator: "eq", value: "2025-01-01" },
+        { field: "createdAt", operator: "gte", value: "2025-02-01" },
+        { field: "createdAt", operator: "lte", value: "2025-03-01" },
+      ],
+    });
+    // Render each via its own chip; assert the friendly date labels appear and
+    // the numeric labels do not.
+    const { rerender } = render(
+      <TestFilters
+        control={makeControl({ filters: [control.filters[0]] })}
+        columns={[dateColumn]}
+      />,
+      { wrapper },
+    );
+    expect(screen.getByText(/Created At exact date 2025-01-01/)).toBeDefined();
+
+    rerender(
+      <TestFilters
+        control={makeControl({ filters: [control.filters[1]] })}
+        columns={[dateColumn]}
+      />,
+    );
+    expect(screen.getByText(/Created At after 2025-02-01/)).toBeDefined();
+    expect(screen.queryByText(/greater than/)).toBeNull();
+
+    rerender(
+      <TestFilters
+        control={makeControl({ filters: [control.filters[2]] })}
+        columns={[dateColumn]}
+      />,
+    );
+    expect(screen.getByText(/Created At before 2025-03-01/)).toBeDefined();
+  });
 });
 
 // ---------------------------------------------------------------------------

packages/core/src/components/data-table/toolbar.tsx

@@ -54,6 +54,15 @@ const DEFAULT_OPERATOR: Record<FilterConfig["type"], FilterOperator> = {
 const NUMERIC_TEMPORAL_OPERATORS = ["eq", "ne", "gt", "gte", "lt", "lte", "between"] as const;
 type NumericTemporalOperator = (typeof NUMERIC_TEMPORAL_OPERATORS)[number];
 
+// Date filters use a slimmer, friendlier operator set: an exact date, inclusive
+// "after"/"before" (gte/lte), and a between range. No gt/lt/ne.
+const DATE_OPERATORS = ["eq", "gte", "lte", "between"] as const;
+
+/** Operators offered for a temporal editor, narrowed for `date` columns. */
+function temporalOperatorsFor(type: FilterConfig["type"]): readonly NumericTemporalOperator[] {
+  return type === "date" ? DATE_OPERATORS : NUMERIC_TEMPORAL_OPERATORS;
+}
+
 /** String operators available in the operator selector. */
 const STRING_OPERATORS = ["eq", "ne", "contains", "notContains", "hasPrefix", "hasSuffix"] as const;
 type StringOperator = (typeof STRING_OPERATORS)[number];
@@ -489,7 +498,7 @@ function AddFilterPopover({
                   }}
                   mapItem={(op) => ({
                     value: op,
-                    label: getOperatorLabel(op, t),
+                    label: getOperatorLabel(op, t, selectedColumn?.filter.type),
                   })}
                   className="astw:h-8 astw:text-sm"
                 />
@@ -920,8 +929,9 @@ function NumericFilterEditor({
   onClose: () => void;
 }) {
   const t = useDataTableT();
+  const operatorItems = temporalOperatorsFor(config.type);
   const [localOp, setLocalOp] = useState<NumericTemporalOperator>(
-    NUMERIC_TEMPORAL_OPERATORS.includes(filter.operator as NumericTemporalOperator)
+    operatorItems.includes(filter.operator as NumericTemporalOperator)
       ? (filter.operator as NumericTemporalOperator)
       : "eq",
   );
@@ -985,12 +995,12 @@ function NumericFilterEditor({
       className="astw:flex astw:flex-col astw:gap-2 astw:p-2"
     >
       <Select
-        items={[...NUMERIC_TEMPORAL_OPERATORS]}
+        items={[...operatorItems]}
         value={localOp}
         onValueChange={(v) => {
           if (v) setLocalOp(v);
         }}
-        mapItem={(op) => ({ value: op, label: t(`filterOperator_${op}`) })}
+        mapItem={(op) => ({ value: op, label: getOperatorLabel(op, t, config.type) })}
         className="astw:h-8 astw:text-sm"
       />
       {localOp === "between" ? (
@@ -1036,8 +1046,9 @@ function TemporalFilterEditor({
   onClose: () => void;
 }) {
   const t = useDataTableT();
+  const operatorItems = temporalOperatorsFor(config.type);
   const [localOp, setLocalOp] = useState<NumericTemporalOperator>(
-    NUMERIC_TEMPORAL_OPERATORS.includes(filter.operator as NumericTemporalOperator)
+    operatorItems.includes(filter.operator as NumericTemporalOperator)
       ? (filter.operator as NumericTemporalOperator)
       : "eq",
   );
@@ -1151,12 +1162,12 @@ function TemporalFilterEditor({
       className="astw:flex astw:flex-col astw:gap-2 astw:p-2"
     >
       <Select
-        items={[...NUMERIC_TEMPORAL_OPERATORS]}
+        items={[...operatorItems]}
         value={localOp}
         onValueChange={(v) => {
           if (v) setLocalOp(v);
         }}
-        mapItem={(op) => ({ value: op, label: t(`filterOperator_${op}`) })}
+        mapItem={(op) => ({ value: op, label: getOperatorLabel(op, t, config.type) })}
         className="astw:h-8 astw:text-sm"
       />
       {valueInput}
@@ -1175,9 +1186,10 @@ function getAddFilterOperators(type: FilterConfig["type"]): FilterOperator[] {
   switch (type) {
     case "string":
       return [...STRING_OPERATORS];
+    case "date":
+      return [...DATE_OPERATORS];
     case "number":
     case "datetime":
-    case "date":
     case "time":
       return [...NUMERIC_TEMPORAL_OPERATORS];
     case "enum":
@@ -1311,7 +1323,17 @@ function getTemporalInputProps(type: "datetime" | "date" | "time") {
   }
 }
 
-function getOperatorLabel(operator: FilterOperator, t: ReturnType<typeof useDataTableT>): string {
+function getOperatorLabel(
+  operator: FilterOperator,
+  t: ReturnType<typeof useDataTableT>,
+  type?: FilterConfig["type"],
+): string {
+  // Date columns relabel the comparison operators (exact date / after / before).
+  if (type === "date") {
+    if (operator === "eq") return t("filterDateOperator_eq");
+    if (operator === "gte") return t("filterDateOperator_gte");
+    if (operator === "lte") return t("filterDateOperator_lte");
+  }
   switch (operator) {
     case "eq":
       return t("filterOperator_eq");
@@ -1397,7 +1419,7 @@ function getChipDisplayLabel(
   const valueLabel = formatFilterValue(filter, config, t);
   if (!valueLabel) return columnLabel;
 
-  const operatorLabel = getOperatorLabel(filter.operator, t);
+  const operatorLabel = getOperatorLabel(filter.operator, t, config.type);
   const ciSuffix = filter.caseSensitive ? " (Aa)" : "";
 
   if (config.type === "enum") {