ag-grid-autocomplete-editor

Quick implementation of autocompletion into ag-Grid cell using autocompleter package.

Install

npm install --save ag-grid-autocomplete-editor

Description

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}. 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
- showOnFocus: (same as classical autocompleter) default false trigger first fetch call when input is focused
- emptyMsg: (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 true
- onFreeTextSelect: (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 200
- customize: (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

ag-Grid

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.

harshagowda/ag-grid-autocomplete-editor