I have successfully made the row header of the Material UI Table component sticky by utilizing the stickyHeader attribute.
<Table stickyHeader className={classes.table}></Table>
Above this table, there are two drop-downs that are created using the ReactSelect component.
const DropDown = props => (
<div className={[props.divClasses, props.error ? 'error-class' : ''].join(' ')}>
<ReactSelect
{...props}
classNamePrefix="normal-select"
disabled={props.disabled ? props.disabled : false}
multi={props.multi}
placeholder={props.placeholder ? props.placeholder : 'Select'}
closeOnSelect={props.closeOnSelect}
clearable={props.clearable}
searchable={props.searchable}
options={props.options ? props.options : []}
value={props.simpleValue ? props.options.filter(
({ value }) => value === props.value) : props.value}
isLoading={props.isLoading}
className={` ${props.className ? props.className : ''}`}
onChange={option => props.onChange(props.property, props.simpleValue ? option?.value : option)}
onBlur={props.onBlur}/>
{props.error && <FormHelperText style={{ color: '#f44336' }}>{props.error}</FormHelperText>}
</div>
);
However, due to the sticky nature of the table header, it is causing some display issues with the drop-downs.
Currently, the view looks like this: https://i.sstatic.net/v3Zy5.png
The expected behavior should resemble this: https://i.sstatic.net/xp1dg.png
I would appreciate any assistance in resolving this matter.