Quick implementation of autocompletion into ag-Grid cell using autocompleter package.
npm install --save ag-grid-autocomplete-editor
The goal of this package is to provide an easy way to have autocompleted cellEditor into ag-Grid.
This package provide a new cellEditor named: AutocompleteSelectCellEditor
.
You can configure and customize the cell and behavior with the following cellEditorParams
:
selectData
: is a list of data matching the type {value: string, label: string, group?: string}
. Or a function type: ((params: IAutocompleteSelectCellEditorParams) => Array<DataFormat>)
.
If no other parameters provided the autcompletion will use this data with a simple .filter
. Basically, if you already have local data, you probably don't need anything else.placeholder
: the placeholder is a string
who will be put onto the input field.required
: (boolean = false
) To know if editor should cancel change if the value is undefined (no selection made).autocomplete
: please see autocompleter for more details about the following parameters
render
: (same as classical autocompleter
) function, except that it take the current cellEditor as first parameter.renderGroup
: (same as classical autocompleter
) function, except that it take the current cellEditor as first parameter.className
: (same as classical autocompleter
) default 'ag-cell-editor-autocomplete'minLength
: (same as classical autocompleter
) default 1. User has to edit the input to trigger data fetch. Which means if minLength = 0
and used with fetch, user has to delete input value to be able to show the list. If you just want to show list on focus without any editing action, use showOnFocus
instead.showOnFocus
: (same as classical autocompleter
) default false trigger first fetch call when input is focusedemptyMsg
: (same as classical autocompleter
) default 'None'strict
: (decide if the user can put free text or not
) default true.autoselectfirst
: (decide the default behavior of the select (if the first row must be automatically selected or not)
): default trueonFreeTextSelect
: (function called only if the selected text does not exist on the actual select options. Must be use with strict=false
): optional Must be use with strict=false.onSelect
: (same as classical autocompleter
) function, except that it take the current cellEditor as first parameter.fetch
: (same as classical autocompleter
) function, except that it take the current cellEditor as first parameter.debounceWaitMs
: (same as classical autocompleter
) default 200customize
: (same as classical autocompleter
) function, except that it take the current cellEditor as first parameter.cellEditor
.import {AutocompleteSelectCellEditor} from 'ag-grid-autocomplete-editor';
import 'ag-grid-autocomplete-editor/dist/main.css';
...
{
headerName: "Already present data selector",
field: "data",
cellEditor: AutocompleteSelectCellEditor,
cellEditorParams: {
selectData: [
{ label: 'Canada', value: 'CA', group: 'North America' },
{ label: 'United States', value: 'US', group: 'North America' },
{ label: 'Uzbekistan', value: 'UZ', group: 'Asia' },
],
placeholder: 'Select an option',
},
valueFormatter: (params) => {
if (params.value) {
return params.value.label || params.value.value || params.value;
}
return "";
},
editable: true,
}
import {AutocompleteSelectCellEditor} from 'ag-grid-autocomplete-editor';
import 'ag-grid-autocomplete-editor/dist/main.css';
...
{
headerName: "Autocomplete with API Country based",
field: "data",
cellEditor: AutocompleteSelectCellEditor,
cellEditorParams: {
autocomplete: {
fetch: (cellEditor, text, update) => {
let match = text.toLowerCase() || cellEditor.eInput.value.toLowerCase();
let xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = () => {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
let data = JSON.parse(xmlHttp.responseText);
let items = data.map(d => ({ value: d.numericCode, label: d.name, group: d.region }));
update(items);
}
if (xmlHttp.status === 404) {
update(false);
}
};
xmlHttp.open("GET", `https://restcountries.eu/rest/v2/name/${match}`, true);
xmlHttp.send(null);
},
}
placeholder: 'Select a Country',
},
valueFormatter: (params) => {
if (params.value) {
return params.value.label || params.value.value || params.value;
}
return "";
},
editable: true,
}
import {AutocompleteSelectCellEditor} from 'ag-grid-autocomplete-editor';
import 'ag-grid-autocomplete-editor/dist/main.css';
...
{
headerName: "Already present data selector",
field: "data",
cellEditor: AutocompleteSelectCellEditor,
cellEditorParams: {
selectData: [
{ label: 'Canada', value: 'CA', group: 'North America' },
{ label: 'United States', value: 'US', group: 'North America' },
{ label: 'Uzbekistan', value: 'UZ', group: 'Asia' },
],
placeholder: 'Select an option',
autocomplete: {
strict: false,
autoselectfirst: false,
}
},
valueFormatter: (params) => {
if (params.value) {
return params.value.label || params.value.value || params.value;
}
return "";
},
editable: true,
}
This project is onto MIT license see LICENSE file.