Usage issues of the editing cell ability of the VTable component: How to configure the editor and whether it can be reused?

#visactor #vtable #visiualization #webdev

Problem Description

In business scenarios, there are many columns in the table. If each column needs to be configured with an editor, it will be more cumbersome. Is there a simple way to define it?

Solution

You can decide which way to configure the editor according to the specific degree of business reuse:

Only configure a global editor and use it for all cells:

import { DateInputEditor, InputEditor, ListEditor, TextAreaEditor } from '@visactor/vtable-editors';
const option={
  editor: new InputEditor()
}

After configuration, you can click on any cell to edit it.

If a few columns can share the same editor, you can declare the same editor name in the columns column configuration for reuse.

import { DateInputEditor, InputEditor, ListEditor, TextAreaEditor } from '@visactor/vtable-editors';
const input_editor = new InputEditor();
VTable.register.editor('input-editor', input_editor);

const option={
  columns:[
      {field:'id',title: 'ID'},
      {field:'name',title: 'NAME',editor:'input-editor'},
      {field:'address',title: 'ADDRESS',editor:'input-editor'},
  ]
}

After configuration, you will find that the cells in this column can all be edited.