Component props.
FilterVariantInputProps interface for filter variant input component
Additional props
Column to filter
A 32px-tall TextField bound to the column's debounced filter.
// TableColumns.tsx declared meta.filterPlaceholder = "Description..."
<TextColumnFilter column={descriptionColumn} />
// Renders: <input placeholder="Description..." aria-label="Description" />
// User types "acid" → column.setFilterValueDebounced("acid") after 250ms,
// which filters the table via TanStack's string-includes filter.
export default function TextColumnFilter({ column }: FilterVariantInputProps) {
const filterValue = column.getFilterValue();
const [columnFilterValue, setColumnFilterValue] = useState<string>(String(filterValue ?? ""));
useEffect(() => {
setColumnFilterValue(String(filterValue ?? ""));
}, [filterValue]);
const handleColumnTextFilterChange = (event: ChangeEvent<HTMLInputElement>) => {
const {
target: { value },
} = event;
setColumnFilterValue(value);
column.setFilterValueDebounced(value);
};
return (
<TextField
id={column.id}
size="small"
fullWidth
placeholder={column.columnDef.meta?.filterPlaceholder}
value={columnFilterValue}
onChange={handleColumnTextFilterChange}
sx={{
m: 0,
mr: 0.5,
"& .MuiInputBase-root": { height: 32, fontSize: "inherit" },
"& .MuiInputBase-input": { padding: "4px 8px", fontSize: "inherit" },
}}
slotProps={{ htmlInput: { "aria-label": column.getHeaderText() } }}
/>
);
}
Compact text filter input for the results-table header row. The column header is shown in the row above, so we drop the redundant input label and lean on
meta.filterPlaceholderfor hinting. Keystrokes update local state immediately; the table's filter is updated via the column's debounced setter so typing doesn't thrash.