Material React Table with Searchable Dropdown

To add a searchable dropdown functionality to the “State” column in your Material React Table using the Autocomplete component from Material-UI, you can follow these steps. Here’s how you can update your code to replace the MenuItem dropdown with the Autocomplete component:

1. Import the necessary components from Material-UI: Ensure you import Autocomplete and TextField from @mui/material.
2. Update the columns definition: Modify the columns definition to use the Autocomplete component for the “State” column.

Here’s the updated code:

import { useMemo } from 'react';
import {
  MaterialReactTable,
} from 'material-react-table';
import { Autocomplete, TextField, MenuItem } from '@mui/material';

const Example = () => {
  const states = ['California', 'Texas', 'New York', 'Florida', 'Illinois']; // Example states array

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

  return (
    <MaterialReactTable
      columns={columns}
      data={[]} // Your data here
      // Other props...
    />
  );
};

export default Example;

 
In this updated code, the Autocomplete component is used to provide a searchable dropdown for the “State” column. The onChange event handler updates the row’s state value when a new state is selected from the dropdown. This allows users to search for and select a state from the list of options.

By incorporating the Autocomplete component from Material-UI, you can enhance the user experience with a searchable dropdown menu in your table.

Output screenshot: