feat: improve pluralization logic for data table filters

- Added `pluralDisplayName` to `ColumnConfig` to allow manual pluralization.
- Implemented `pluralize` helper in `lib/i18n` using `Intl.PluralRules`.
- Enhanced automatic pluralization for English (y-endings, sibilants) and disabled pluralization for languages without plurals (e.g. CJK).
- Updated `FilterValueOptionDisplay` and `FilterValueMultiOptionDisplay` to use the new logic.

Co-authored-by: jaruesink <4207065+jaruesink@users.noreply.github.com>

Author: google-labs-jules[bot]

packages/components/src/ui/data-table-filter/components/filter-value.tsx

@@ -31,7 +31,7 @@ import type {
 import { useDebounceCallback } from '../hooks/use-debounce-callback';
 import { take } from '../lib/array';
 import { createNumberRange } from '../lib/helpers';
-import { type Locale, t } from '../lib/i18n';
+import { type Locale, pluralize, t } from '../lib/i18n';
 
 interface FilterValueProps<TData, TType extends ColumnDataType> {
   filter: FilterModel<TType>;
@@ -137,7 +137,7 @@ export function FilterValueOptionDisplay<TData>({
   filter,
   column,
   actions,
-  locale: _locale = 'en',
+  locale = 'en',
 }: FilterValueDisplayProps<TData, 'option'>) {
   const options = useMemo(() => column.getOptions(), [column]);
   const selected = options.filter((o) => filter?.values.includes(o.value));
@@ -160,8 +160,7 @@ export function FilterValueOptionDisplay<TData>({
     );
   }
   const name = column.displayName.toLowerCase();
-  // TODO: Better pluralization for different languages
-  const pluralName = name.endsWith('s') ? `${name}es` : `${name}s`;
+  const pluralName = column.pluralDisplayName ?? pluralize(name, locale);
 
   const hasOptionIcons = !options?.some((o) => !o.icon);
 
@@ -183,7 +182,7 @@ export function FilterValueMultiOptionDisplay<TData>({
   filter,
   column,
   actions,
-  locale: _locale = 'en',
+  locale = 'en',
 }: FilterValueDisplayProps<TData, 'multiOption'>) {
   const options = useMemo(() => column.getOptions(), [column]);
   const selected = options.filter((o) => filter.values.includes(o.value));
@@ -201,6 +200,7 @@ export function FilterValueMultiOptionDisplay<TData>({
   }
 
   const name = column.displayName.toLowerCase();
+  const pluralName = column.pluralDisplayName ?? pluralize(name, locale);
 
   const hasOptionIcons = !options?.some((o) => !o.icon);
 
@@ -215,7 +215,7 @@ export function FilterValueMultiOptionDisplay<TData>({
         </div>
       )}
       <span>
-        {selected.length} {name}
+        {selected.length} {pluralName}
       </span>
     </div>
   );

packages/components/src/ui/data-table-filter/core/types.ts

@@ -95,6 +95,7 @@ export type ColumnConfig<TData, TType extends ColumnDataType = any, TVal = unkno
   id: TId;
   accessor: TAccessorFn<TData, TVal>;
   displayName: string;
+  pluralDisplayName?: string;
   icon: ReactElementType;
   type: TType;
   options?: TType extends OptionBasedColumnDataType ? ColumnOption[] : never;

packages/components/src/ui/data-table-filter/lib/i18n.test.ts

@@ -0,0 +1,43 @@
+import assert from 'node:assert';
+import { describe, it } from 'node:test';
+import { pluralize } from './i18n';
+
+describe('pluralize', () => {
+  it('pluralizes English words correctly', () => {
+    assert.strictEqual(pluralize('box', 'en'), 'boxes');
+    assert.strictEqual(pluralize('category', 'en'), 'categories');
+    assert.strictEqual(pluralize('dog', 'en'), 'dogs');
+    assert.strictEqual(pluralize('watch', 'en'), 'watches');
+    assert.strictEqual(pluralize('bus', 'en'), 'buses');
+    assert.strictEqual(pluralize('wish', 'en'), 'wishes');
+    // Simple words
+    assert.strictEqual(pluralize('column', 'en'), 'columns');
+  });
+
+  it('does not pluralize for languages with no plural form', () => {
+    assert.strictEqual(pluralize('数据', 'zh'), '数据'); // Chinese
+    assert.strictEqual(pluralize('データ', 'ja'), 'データ'); // Japanese
+  });
+
+  it('falls back to appending s for other languages', () => {
+    // Spanish has plurals. "dato" -> "datos".
+    assert.strictEqual(pluralize('dato', 'es'), 'datos');
+
+    // "papel" -> "papeles" in proper Spanish, but our fallback is naive
+    // So we expect "papels" because we only improved 'en'.
+    // If we passed 'en' it would handle 'papel' -> 'papels' anyway unless it hit sibilant?
+    // 'papel' ends in 'l', so 's'.
+    assert.strictEqual(pluralize('papel', 'es'), 'papels');
+  });
+
+  it('handles defaults when locale is missing', () => {
+    // @ts-ignore
+    assert.strictEqual(pluralize('cat', undefined), 'cats');
+  });
+
+  it('handles y endings correctly for English', () => {
+    assert.strictEqual(pluralize('boy', 'en'), 'boys'); // Vowel + y -> s
+    assert.strictEqual(pluralize('day', 'en'), 'days');
+    assert.strictEqual(pluralize('city', 'en'), 'cities'); // Consonant + y -> ies
+  });
+});

packages/components/src/ui/data-table-filter/lib/i18n.ts

@@ -1,13 +1,48 @@
 import en from '../locales/en.json';
 
-export type Locale = 'en';
+export type Locale = 'en' | string;
 
 type Translations = Record<string, string>;
 
-const translations: Record<Locale, Translations> = {
+const translations: Record<string, Translations> = {
   en,
 };
 
 export function t(key: string, locale: Locale): string {
-  return translations[locale][key] ?? key;
+  return translations[locale]?.[key] ?? translations.en[key] ?? key;
+}
+
+export function pluralize(text: string, locale: Locale): string {
+  // If no locale provided, default to english behavior
+  const loc = locale || 'en';
+
+  try {
+    const rules = new Intl.PluralRules(loc);
+    const options = rules.resolvedOptions();
+
+    // If the language has only one category (e.g. 'other'), it doesn't distinguish plural forms (like Japanese, Chinese)
+    if (options.pluralCategories.length === 1) {
+      return text;
+    }
+  } catch (e) {
+    // Fallback if Intl.PluralRules fails or locale is invalid
+    console.warn(`[i18n] Invalid locale for PluralRules: ${loc}`, e);
+  }
+
+  // Improved English pluralization
+  if (loc.startsWith('en')) {
+    // Handle 'y' ending (e.g. category -> categories, but boy -> boys)
+    if (text.endsWith('y') && !/[aeiou]y/i.test(text)) {
+      return `${text.slice(0, -1)}ies`;
+    }
+
+    // Handle sibilants (e.g. box -> boxes, bus -> buses, watch -> watches)
+    if (/[sxz]$/i.test(text) || /[cs]h$/i.test(text)) {
+      return `${text}es`;
+    }
+  }
+
+  // Default: append 's'
+  // This matches the original behavior but is now safer for non-plural languages (checked above)
+  return `${text}s`;
 }