Quick implementation of autocompletion into ag-Grid cell using autocompleter package.
npm install --save ag-grid-autocomplete-editorThe 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 astringwho 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 parametersrender: (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 ifminLength = 0and 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, useshowOnFocusinstead.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.
- ... all the classical arguments taken by a ag-Grid
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,
}- Thank's to ag-grid-auto-complete who was aiming AngularJS and was inspirational source for this package.
- Thank's to autocompleter for the easy and really customizable autocompletion logic.
- Thank's to ag-Grid for the great ag-Grid package.
This project is onto MIT license see LICENSE file.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent