Cell editor

Revogrid provides a way to define your own editors. Or you can use predefined column types. In order to do so you have to define your class with render method.

As a Function

function TextEditor(dataSchema, saveCallback, closeCallback) {
  return {
      element: null, // will be setup up after render
      editCell: null, // will be setup up after render
      /**
       * required, define custom component structure
       * @param createElement: (tagName: string, properties?: object, value?: any, children: Array) => VNode
       */
      render(createElement) {
          return createElement('input');
      },
      componentDidRender() {}, // optional, called after component rendered
      disconnectedCallback() {}, // optional, called after component destroyed

  };
};

As a Class

class TextEditor {
    public element: Element|null = null;
    public editCell: EditCell|null = null;

    /**
      *  @dataSchema: {ColumnDataSchemaModel} - data
      *  @editCallback: { (val) => void } - callback for finishing edit
      */

    constructor(
        public dataSchema: ColumnDataSchemaModel,
        saveCallback: (value: any) => void,
        closeCallback: () => void
    ) {}

    // optional, called after editor rendered
    componentDidRender() {}

    // optional, called after editor destroyed
    disconnectedCallback() {}

    /**
     * required, define custom component structure
     * @param createElement: (tagName: string, properties?: object, value?: any, children: Array) => VNode
     */
    render(createComponent: HyperFunc<VNode>) {
        return createComponent('input');
    }
}

Use editor in the grid

const columns = [{
    name: 'Person',
    prop: 'name',

    // define editor name
    editor: 'select',
}];
const grid = div.querySelector('revo-grid');
// define editor component and name
grid.editors = {
    'select': customSelect
};