This question was asked on GitHub, so I’m posting it here to make it easier to find. This isn’t in the Dash AG Grid docs yet, but it’s available in Dash AG Grid >= 31.0.0
Note that the Rich Select Cell Editor is an AG Grid Enterprise feature. Find out more information on AG Grid Licensing and pricing in the AG Grid Doc.
Note that the cool color cell renderer (and many many other great features) ares available in the Free AG Grid Community version 
Rich Select Cell Editor
An AG Grid Enterprise Feature
An alternative to using the browser’s select popup for dropdowns inside the grid.
The Rich Select Cell Editor allows users to enter a cell value from a list of provided values by searching or filtering the list.
Allow Typing
The editor input can be configured to allow text input, which is used to match different parts of the editor list items as shown below:
from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd
app = Dash(__name__)
colors = [
'AliceBlue',
'AntiqueWhite',
'Aqua',
'Aquamarine',
'Azure',
'Beige',
'Bisque',
'Black',
'BlanchedAlmond',
'Blue',
'BlueViolet',
'Brown',
'BurlyWood',
'CadetBlue',
'Chartreuse',
'Chocolate',
'Coral',
'CornflowerBlue',
'Cornsilk',
'Crimson',
'Cyan',
'DarkBlue',
'DarkCyan',
'DarkGoldenrod',
'DarkGray',
'DarkGreen',
'DarkGrey',
'DarkKhaki',
'DarkMagenta',
'DarkOliveGreen',
'DarkOrange',
'DarkOrchid',
'DarkRed',
'DarkSalmon',
'DarkSeaGreen',
'DarkSlateBlue',
'DarkSlateGray',
'DarkSlateGrey',
'DarkTurquoise',
'DarkViolet',
'DeepPink',
'DeepSkyBlue',
'DimGray',
'DodgerBlue',
'FireBrick',
'FloralWhite',
'ForestGreen',
'Fuchsia',
'Gainsboro',
'GhostWhite',
'Gold',
'Goldenrod',
'Gray',
'Green',
'GreenYellow',
'Grey',
'Honeydew',
'HotPink',
'IndianRed',
'Indigo',
'Ivory',
'Khaki',
'Lavender',
'LavenderBlush',
'LawnGreen',
'LemonChiffon',
'LightBlue',
'LightCoral',
'LightCyan',
'LightGoldenrodYellow',
'LightGray',
'LightGreen',
'LightGrey',
'LightPink',
'LightSalmon',
'LightSeaGreen',
'LightSkyBlue',
'LightSlateGray',
'LightSlateGrey',
'LightSteelBlue',
'LightYellow',
'Lime',
'LimeGreen',
'Linen',
'Magenta',
'Maroon',
'MediumAquamarine',
'MediumBlue',
'MediumOrchid',
'MediumPurple',
'MediumSeaGreen',
'MediumSlateBlue',
'MediumSpringGreen',
'MediumTurquoise',
'MediumVioletRed',
'MidnightBlue',
'MintCream',
'MistyRose',
'Moccasin',
'NavajoWhite',
'Navy',
'OldLace',
'Olive',
'OliveDrab',
'Orange',
'OrangeRed',
'Orchid',
'PaleGoldenrod',
'PaleGreen',
'PaleTurquoise',
'PaleVioletRed',
'PapayaWhip',
'PeachPuff',
'Peru',
'Pink',
'Plum',
'PowderBlue',
'Purple',
'Rebeccapurple',
'Red',
'RosyBrown',
'RoyalBlue',
'SaddleBrown',
'Salmon',
'SandyBrown',
'SeaGreen',
'Seashell',
'Sienna',
'Silver',
'SkyBlue',
'SlateBlue',
'SlateGray',
'SlateGrey',
'Snow',
'SpringGreen',
'SteelBlue',
'Tan',
'Teal',
'Thistle',
'Tomato',
'Turquoise',
'Violet',
'Wheat',
'White',
'WhiteSmoke',
'Yellow',
'YellowGreen',
]
df = pd.DataFrame({"color": colors})
columnDefs = [
{
'headerName': 'Allow Typing (Match)',
'field': 'color',
'cellRenderer': 'ColourCellRenderer',
'cellEditor': 'agRichSelectCellEditor',
'cellEditorParams': {
'values': colors,
'searchType': 'match',
'allowTyping': True,
'filterList': True,
'highlightMatch': True,
'valueListMaxHeight': 220,
},
},
{
'headerName': 'Allow Typing (MatchAny)',
'field': 'color',
'cellRenderer': 'ColourCellRenderer',
'cellEditor': 'agRichSelectCellEditor',
'cellEditorParams': {
'values': colors,
'searchType': 'matchAny',
'allowTyping': True,
'filterList': True,
'highlightMatch': True,
'valueListMaxHeight': 220,
},
}
]
app.layout = html.Div(
[
dag.AgGrid(
enableEnterpriseModules=True,
# licenseKey = Your license key here
columnDefs=columnDefs,
defaultColDef={"editable": True},
rowData=df.to_dict('records'),
columnSize="sizeToFit",
dashGridOptions={"animateRows": False}
),
]
)
if __name__ == "__main__":
app.run(debug=True)
"""
Add the following to the dashAgGridComponentFunctions.js file in the assets folder:
var dagcomponentfuncs = (window.dashAgGridComponentFunctions =
window.dashAgGridComponentFunctions || {});
dagcomponentfuncs.ColourCellRenderer = (props) => {
const styles = {
verticalAlign: "middle",
border: "1px solid black",
margin: 3,
display: "inline-block",
width: 20,
height: 10,
backgroundColor: props.value.toLowerCase(),
};
return React.createElement("div", {}, [
React.createElement("span", { style: styles }),
React.createElement("span", {}, props.value),
]);
};
"""
dag-docs
