Material React Table with searchable dropdown

Question

I am using material react table for my project. I have a column with dropdown list. But I need to have autocomplete or searchable dropdown inside a Material React Table column. Please refer this link from the official example

  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      // ...
      {
        accessorKey: 'state',
        header: 'State',
        muiTableBodyCellEditTextFieldProps: {
          select: true, //change to select for a dropdown
          children: states.map((state) => (
            <MenuItem key={state} value={state}>
              {state}
            </MenuItem>
          )),
        },
      },
    ],
    [getCommonEditTextFieldProps],
  );

I want select with search option.

Answer 1

I think for Autocomplete would be something like this: where the autoComplete option will filter the values based on the input as you type, at least in JS it works for me:

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

...

{
    accessorKey: 'state', header: 'State',
    Edit: ({row})=> 
        {return <Autocomplete
                options={states}
                autoComplete
                renderInput={(params) => <TextField {...params} label="State" />}
                onChange={(event, value) => {row._valuesCache['state'] = value ; } } />;
        } 
}