Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 1x 1x 1x 1x 1x 13x 13x 13x 5x 13x 13x 5x 5x 5x 5x 5x 5x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x 13x | import TextField from '@mui/material/TextField';
import { ChangeEvent, useEffect, useState } from 'react';
/**
* 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.filterPlaceholder` for hinting. Keystrokes update local
* state immediately; the table's filter is updated via the column's
* debounced setter so typing doesn't thrash.
* @component
* @param props - Component props.
* - `column` - A TanStack column with `meta.filterVariant === "text"`.
* @returns A 32px-tall `TextField` bound to the column's debounced filter.
* @example
* ```tsx
* // 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.
* ```
* @source
*/
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() } }}
/>
);
}
|