VTable 1.25.0
Tutorials
Contributing
Options
API
FAQ
Changelogs
Playground
VChart Story Teller

Not only an out-of-the-box multi-terminal chart library, but also a vivid and flexible data storyteller.

VTable Checkered Artist

Not only a high-performance multi-dimensional data analysis form, but also a grid artist created between rows and columns.

VGrammar Data Magician

It is not only a visual grammar that generates thousands of charts, but also a data magician who turns boring into magic.

VRender Visual Rendering

Not only a visual rendering engine with rich functions, but also a handy pen.

VMind Smart Visualization Suit

Not just automatic, but also fantastic.

VStory Data Story Framework

Intelligent visual storytelling, data story creation framework.

VSeed Data Seed

VSeed, an elegant data composer, transforming complexity into simplicity.

!!!###!!!title=23.How to edit a table's cell with VTable?——VisActor/VTable FAQ documents!!!###!!!!!!###!!!description=---title: How to edit a table's cell with VTable?</br>key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM--- !!!###!!!

Title

Can an editable table enter the editing state directly when clicked, instead of double clicking a cell to make it editable?

Description

In the table editing scenario, double-clicking to enter the editing state would be cumbersome, and you need to enter the editing state directly.

Solution

You can configure editCellTrigger to click in the table initialization option. The configuration item is defined as follows:

/** Edit triggering time: double click event | single click event | api to manually start editing. Default is double click 'doubleclick' */
editCellTrigger?: 'doubleclick' | 'click' | 'api';</br>

Code Example

  const option = {
    records,
    columns,
    autoWrapText: true,
    limitMaxAutoWidth: 600,
    heightMode: 'autoHeight',
    editCellTrigger: 'click' // Set the edit trigger timing
  };
  const tableInstance = new VTable.ListTable(container, option);</br>

Results

Online effect reference: https://visactor.io/vtable/demo/edit/edit-cell

Edit table demo: https://visactor.io/vtable/demo/edit/edit-cell
Edit table tutorial: https://visactor.io/vtable/guide/edit/edit_cell
Related API: https://visactor.io/vtable/option/ListTable#editCellTrigger
github: https://github.com/VisActor/VTable