Is rendering the Autocomplete options list with column headers possible?

Question

I would like to know if it is possible to customise the above example so that the list would have column headers such as Title and duration. I have tried to see if I could get it to work using a custom ListBox, but no such luck. Below is a snippet of my own code:

const PopperMy = function (props: PopperProps) {
    return <Popper {...props} style={{ width: 500 }} placement='bottom-start' />;
};

return (
            <Autocomplete
                filterOptions={(x) => x}
                getOptionLabel={(option: Record<string, unknown>) => `${option.order}, ${option.name}, ${option.email}, ${option.phone}, ${option.location}`}
                renderOption={(props, option: any) => {
                    return (
                        <li {...props} key={option.ID} >
                            Order: {option.order}, Name: {option.name}, Email: {option.email}, Phone: {option.phone}, Location: {option.location}, Status: {option.status}
                        </li>

                    );

                }}
                options={results}
                value={selectedValue}
                clearOnBlur={false}
                freeSolo
                PopperComponent={PopperMy}
                disableClearable={true}
                includeInputInList
                onChange={(ev, newValue) => {
                    setSelectedValue(newValue);
                }}
                onInputChange={(ev, newInputValue) => {
                    setInputValue(newInputValue);
                }}
                renderInput={(params) => (
                    <TextField {...params} />
                )} /> )
                        

Answer 1

this is achievable by customizing the popper component. In your case, something like `

const PopperMy = function (props) {
  const { children, ...rest } = props;
  return (
    <Popper {...rest} placement="bottom-start">
      <Box display="flex" justifyContent="space-between" px="16px">
        <Typography variant="h6">Title</Typography>
        <Typography variant="h6">Year</Typography>
        ........... rest of the titles
      </Box>
      {props.children}
    </Popper>
  );
};

` would work. Here is a working example i have created - https://codesandbox.io/s/heuristic-golick-4sv24u?file=/src/App.js:252-614