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

web/src/components/RealtimeTable/RealtimeTable.jsx

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

web/src/components/RealtimeTable/TableHead/TableHead.jsx

@@ -1,3 +1,5 @@
+import CloseIcon from '@mui/icons-material/Close';
+import { IconButton } from '@mui/material';
 import React, { useMemo } from 'react';
 import { getOrderedVisibleColumns } from '../utils/columnLayoutUtils';
 import { formatDeadline } from '../utils/deadlineFormat';
@@ -302,6 +304,7 @@ const FilterCell = ({ column }) => {
 
 			default: // 'text'
 				return (
+					<div style={{ position: 'relative', width: '100%' }}>
 						<input
 							type='text'
 							value={column.getFilterValue() ?? ''}
@@ -309,13 +312,33 @@ const FilterCell = ({ column }) => {
 							placeholder='Поиск...'
 							style={{
 								width: '100%',
-							padding: '0.25rem 0.375rem',
+								padding: '0.25rem 1.75rem 0.25rem 0.375rem',
 								fontSize: '0.6875rem',
 								border: '1px solid #ddd',
 								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>
 				);
 		}
 	};