I am struggling to align the labels of options in the AutoComplete component with their respective column headers in the popper component:
https://i.stack.imgur.com/0VMLe.png
const CustomPopper = function (props: PopperProps) {
const { children, ...rest } = props;
return (
<Popper {...rest} placement="bottom-start">
<Box sx={{
display: 'grid',
gridTemplateColumns: 'repeat(4, 1fr)',
gap: 1,
gridTemplateRows: 'auto',
gridTemplateAreas: `"date order name items"
"date order name items"`,
}}>
<Box sx={{ gridArea: 'date' }}><Typography>Created Date</Typography></Box>
<Box sx={{ gridArea: 'order' }}><Typography>Order</Typography></Box>
<Box sx={{ gridArea: 'name' }}><Typography>Name (email/phone)</Typography></Box>
<Box sx={{ gridArea: 'items' }}><Typography>Items</Typography></Box>
</Box>
{children}
</Popper>
);
};
<Autocomplete
PopperComponent={CustomPopper}
renderOption={(props, option: any) => {
return (
<li {...props} key={option.id} >
<Box sx={{ gridArea: 'items' }}>{convertToDateTime(option.createdtime).toFormat('d MMM HH:mm')}</Box>
<Box sx={{ gridArea: 'order' }}>{option.order}</Box>
<Box sx={{ gridArea: 'name' }}>{option.name} ({option.email}/{option.phone})</Box>
<Box sx={{ gridArea: 'date' }}>{option.itemlist}</Box>
</li>
);
}
/>