добавление крестиков у поиска по столбцам

This commit is contained in:
PotapovaA 2026-11-11 17:12:59 +03:00
parent 5a91f35ab2
commit 32e697193e
2 changed files with 42 additions and 15 deletions

View File

@ -619,6 +619,10 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
); );
const table = useMaterialReactTable(tableConfig); const table = useMaterialReactTable(tableConfig);
const handleChangeShowColumnFilters = useCallback((showFilters) => {
if (!showFilters) table.setColumnFilters([]);
setShowColumnFilters(showFilters);
}, [table]);
const isLoadingData = columns.length > 0; const isLoadingData = columns.length > 0;
const handleNavigateToColumn = useCallback( const handleNavigateToColumn = useCallback(
@ -1093,7 +1097,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
searchMatchCount={searchMatches.length} searchMatchCount={searchMatches.length}
searchMatchIndex={searchMatchIndex} searchMatchIndex={searchMatchIndex}
sizeMult={sizeMult} sizeMult={sizeMult}
onChangeShowColumnFilters={setShowColumnFilters} onChangeShowColumnFilters={handleChangeShowColumnFilters}
showColumnFilters={showColumnFilters} showColumnFilters={showColumnFilters}
onAddRow={addRow} onAddRow={addRow}
onAddProgram={addProgram} onAddProgram={addProgram}

View File

@ -1,3 +1,5 @@
import CloseIcon from '@mui/icons-material/Close';
import { IconButton } from '@mui/material';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { getOrderedVisibleColumns } from '../utils/columnLayoutUtils'; import { getOrderedVisibleColumns } from '../utils/columnLayoutUtils';
import { formatDeadline } from '../utils/deadlineFormat'; import { formatDeadline } from '../utils/deadlineFormat';
@ -302,20 +304,41 @@ const FilterCell = ({ column }) => {
default: // 'text' default: // 'text'
return ( return (
<input <div style={{ position: 'relative', width: '100%' }}>
type='text' <input
value={column.getFilterValue() ?? ''} type='text'
onChange={(e) => handleFilterChange(e.target.value)} value={column.getFilterValue() ?? ''}
placeholder='Поиск...' onChange={(e) => handleFilterChange(e.target.value)}
style={{ placeholder='Поиск...'
width: '100%', style={{
padding: '0.25rem 0.375rem', width: '100%',
fontSize: '0.6875rem', padding: '0.25rem 1.75rem 0.25rem 0.375rem',
border: '1px solid #ddd', fontSize: '0.6875rem',
borderRadius: '0.25rem', border: '1px solid #ddd',
boxSizing: 'border-box', borderRadius: '0.25rem',
}} boxSizing: 'border-box',
/> }}
/>
{column.getFilterValue() && (
<IconButton
aria-label='Очистить фильтр колонки'
size='small'
onMouseDown={(event) => event.preventDefault()}
onClick={() => column.setFilterValue(undefined)}
sx={{
position: 'absolute',
right: '0.25rem',
top: '50%',
transform: 'translateY(-50%)',
width: '1.25rem',
height: '1.25rem',
padding: 0,
color: '#99a1af',
}}>
<CloseIcon sx={{ fontSize: '1rem' }} />
</IconButton>
)}
</div>
); );
} }
}; };