Need searchable dropdown (AutoComplete) inside the column cell

[Dhamayandhi]

In My project we are using Material React Table. We have a column which is of type dropdown . That column has more values. Hence we need searchable dropdown (Auto Complete).I searched multiple posts and didn't get any example for this case.

[KevinVandy]

You can render a custom Filter component

[Dhamayandhi]

Can you provide an example for the same

[Dhamayandhi]

I am getting example where you can use custom filter to a column . But i need to use inside dropdown which is in edit mode ..
{
accessorKey: "RevisedPositionLevel",
header: "Revised Position Level",
enableColumnActions: false,
//Edit: ({ cell, column, table }) => ,
muiTableBodyCellProps: ({ cell, column }) => ({
sx: {
//backgroundColor: colors.brandColorSupport[800],
backgroundColor: colors.brandColorSupport[600],
//backgroundClip: "content-box" /* <---- /,
boxShadow: "inset 0 0 0 1px #D5D8DC" / <-- 10px spread radius */,
},
}),
muiTableBodyCellEditTextFieldProps: {
select: true, //change to select for a dropdown

    children: proposedGripList.map((state) => (
      <MenuItem key={state.label} value={state.label}>
        {state.label}
      </MenuItem>
    )),
  },
},  for this column how to use autocomplete or how can i use filter for dropdown . Can you provide with example

[Dhamayandhi]

Hi ,

Can you give an example for filtering a dropdown inside edit mode ..
muiTableBodyCellEditTextFieldProps: {
select: true, //change to select for a dropdown

children: proposedGripList.map((state) => (
  <MenuItem key={state.label} value={state.label}>
    {state.label}
  </MenuItem>
)),

}, for this column i have a dropdown which has more than 50 + values.. During edit it is difficult to scroll all 50 records of dropdown .Is it possible to have searchable (Autocomplete) in this dropdown.

[KevinVandy]

Auto complete filterVariant is now available in v2 https://www.material-react-table.com/docs/examples/faceted-values

[karsumir]

'Auto complete' only can select one item and what I want is a way for multiple selection with text-field that can search item and choose multiple items.

https://www.material-react-table.com/docs/guides/column-filtering#custom-filter-components
Maybe some example to do this could be a big help for me...
Could you give me some help please?

[Yuki-Izuna]

Hello.
I too am in need of a filter that will work with both multiple selections and autocomplete.

[BigSamu]

Hi,

Also the same here! Is there a way to have an autocomplete with multiple select? Or someone can you give an example of how to create this?

[Yuki-Izuna]

Sorry for my poor English.

I was stuck on this extension for a while, but I finally figured out a solution.
I created a custom filter that looks like autocomplete, allowing text-based filtering and multiple selections.
I apologize for the delayed submission.

Please feel free to modify the code as needed.

import React, { useState, useEffect } from 'react'
import { TextField, Autocomplete, Chip } from '@mui/material'
import { Column, Table, Row } from '@tanstack/react-table'

interface CustomAutocompleteFilterProps<TData extends object> {
  column: Column<TData, unknown>
  table: Table<TData>
}

type Options = {
  label: string
  value: string
}

export const CustomAutocompleteFilter = <TData extends object>({
  column,
  table,
}: CustomAutocompleteFilterProps<TData>) => {
  const [options, setOptions] = useState<Options[]>([])
  const [selectedValues, setSelectedValues] = useState<Options[]>(
    (table.getColumn(column.id)?.getFilterValue() as Options[] | undefined) ?? [],
  )

  useEffect(() => {
    // selected options
    const filterValue = column.getFilterValue() as string[] | undefined
    if (filterValue) {
      const selectedOptions: Options[] = filterValue.map((value) => ({
        label: value,
        value: value,
      }))
      setSelectedValues(selectedOptions)
    } else {
      setSelectedValues([])
    }

    // options list
    const allData = table.options.data
    const uniqueValues = new Set<string>()
    allData.forEach((row: TData) => {
      const rowValue = row[column.id as keyof TData]
      if (rowValue !== undefined) {
        uniqueValues.add(rowValue as string)
      }
    })

    const newOptions: Options[] = Array.from(uniqueValues, (value) => ({
      label: value,
      value: value,
    }))
    setOptions(newOptions)
  }, [column, table])

  const handleFilterChange = (values: string[]) => {
    const selectedOptions: Options[] = values.map((value) => ({
      label: value,
      value: value,
    }))

    setSelectedValues(selectedOptions)
    table.getColumn(column.id)?.setFilterValue(values)
  }

  return (
    <Autocomplete
      multiple
      id='selectBox'
      fullWidth
      options={options}
      defaultValue={[]}
      value={selectedValues}
      sx={{
        '& .MuiInputBase-root': {
          padding: 0,
          margin: 0,
        },
        '& .MuiAutocomplete-inputRoot': {
          flexWrap: 'nowrap',
          overflow: 'hidden',
          whiteSpace: 'nowrap',
        },
      }}
      onChange={(_, values) => handleFilterChange(values.map((value) => value.value))}
      renderInput={(params) => (
        <TextField
          {...params}
          label='Filter'
          size='small'
          variant='standard'
          InputLabelProps={{
            shrink: true,
            sx: {
              display: selectedValues.length > 0 || params.inputProps.value ? 'none' : 'block',
            },
          }}
        />
      )}
      renderOption={(props, option) => {
        // Need to add "any" type to avoid compiler errors
        const { key, ...restProps }: any = props
        return (
          // Separating key from props to avoid console warnings when spreading props including key
          // <li {...props}>
          <li key={option.value} {...restProps}>
            {option.label}
          </li>
        )
      }}
      renderTags={(tagValue, getTagProps) =>
        tagValue.map((option, index) => {
          const { key, onDelete, ...tagProps } = getTagProps({ index })
          return <Chip key={key} label={option.label} onDelete={onDelete} {...tagProps} />
        })
      }
      isOptionEqualToValue={(option, value) => option.value === value.value}
      getOptionLabel={(option) => option.label || ''}
    />
  )
}

// Separating key from props to avoid console warnings when spreading props including key
export const customAutocompleteFilterFn = (row: Row<any>, columnId: string, value: string[]) => {
  return value.length === 0 || value.includes(row.getValue(columnId))
}

To make it work, you just need to inject the filter and filterFn into your column definition.

export const columns = [
  {
    accessorKey: 'hogehoge',
    header: 'ColumnHeaderText',
    Filter: CustomAutocompleteFilter,
    filterFn: customAutocompleteFilterFn,
    size: 110,
    enableSorting: false,
    enableColumnActions: false,
    enableColumnFilter: true,
  }
]