ag-grid-autocomplete-editor
Quick implementation of autocompletion into ag-Grid cell using autocompleter package.
Install
npm install --save ag-grid-autocomplete-editorDescription
The goal of this package is to provide an easy way to have autocompleted cellEditor into ag-Grid.
Demo
Usage
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}, 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.requred: (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 1showOnFocus: (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.
Example
Simple autocompletion from datasource
import {AutocompleteSelectCellEditor} from 'ag-grid-autocomplete-editor';
import 'ag-grid-autocomplete-editor/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,
}Autocompletion with Ajax request
import {AutocompleteSelectCellEditor} from 'ag-grid-autocomplete-editor';
import 'ag-grid-autocomplete-editor/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,
}Simple autocompletion who allow user to enter any text
import {AutocompleteSelectCellEditor} from 'ag-grid-autocomplete-editor';
import 'ag-grid-autocomplete-editor/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,
}Dependencies
Thank's to
- 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.
LICENSE
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