Skip to content

The column filter overlay is unlocalizable and Column has no filterElement seam #155

Description

@woksin

What happens

Two separate gaps in DataTables, both in the column filter overlay.

1. ColumnFilterMenu hardcodes English. From dist/esm/DataTables/ColumnFilterMenu.js:

const BOOLEAN_OPTIONS = [
    { label: 'True',  value: true },
    { label: 'False', value: false },
];

<Popover.Trigger aria-label={`Filter by ${field}`} >

<Button variant="outlined" onClick={}><span>Clear</span></Button>
<Button onClick={}><span>Apply</span></Button>

"Clear", "Apply", `Filter by ${field}` and the boolean dropdown's "True" / "False" are literals in
the component, with no prop and no locale lookup.

2. Column has no filterElement. ColumnProps (dist/esm/DataTables/Column.d.ts) exposes filter,
filterField, filterPlaceholder, dataType and showFilterMatchModes, so the overlay renders one of four
built-in inputs (text / numeric / date / boolean). A custom filter control is not expressible.

Evidence

@cratis/components 3.4.0, primereact 11.1.0; both read directly from the published package.

We ship English and Norwegian. A Norwegian user gets an English filter overlay, and unlike a v10 theme string
this is Components-authored chrome we cannot reach.

Our previous (PrimeReact 10) tables offered role and status dropdowns in the filter overlay. After the
migration, the roles column is a text match against localized role labels via a registerMatcher custom match
mode, and status uses dataType='boolean' — so the localization gap and the missing render seam compound: the
boolean filter renders the untranslatable "True" / "False".

For comparison, Toaster already takes a dismissAriaLabel prop and TablePaginator already takes an
ariaLabels object — so per-component label props are an established shape in this package; the filter overlay
just has none.

What it costs a consumer

A degraded filter experience plus English text in a non-English UI. Concretely: two filter dropdowns replaced by
a text match and a boolean, and five untranslatable strings visible to every non-English user.

Suggested fix — the seam

  • Accept a locale/labels prop for the overlay chrome, or read PrimeReactProps.locale when one is configured.
  • Restore a filterElement-equivalent render seam on Column, so a consumer can supply the filter control.

What is explicitly not being asked for

Not asking Components to adopt a localization framework or to ship translations — a labels prop is enough. Not
asking for the four built-in filter types to change; only for an escape hatch beside them.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions