VTable 1.14.0
Tutorials
Contributing
Options
API
FAQ
Changelogs
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 Relationship Explorer plus

It is not only a fully functional graph visualization library, but also an explorer of data relationships.

!!!###!!!title=33.How to implement drag-and-drop adjustment of line-height——VisActor/VTable FAQ documents!!!###!!!!!!###!!!description=---title: VTable usage issue: How to implement drag-and-drop adjustment of line-height</br>key words: VisActor,VChart,VTable,VStrory,VMind,VGrammar,VRender,Visualization,Chart,Data,Table,Graph,Gis,LLM--- !!!###!!!

Question title

How to implement drag-and-drop adjustment of line-height

Problem description

Drag the bottom border of the cell to adjust the line-height of the row.

Solution

Option in the rowResizeMode configuration can enable or disable the line-height adjustment function:

  • All : The entire column, including the cells at the head and body, can adjust the column width/line-height
  • None : Cannot adjust column width/line-height
  • Header : Column width/line-height can only be adjusted in the header unit
  • Body : Column width/line-height can only be adjusted in body cells
    rowResizeType configuration controls the scope of adjustment:
  • Column / row : Default value, only adjust the width of the current column/row;
  • Indicator : Adjust the column width/line-height of the same indicator column together;
  • All : Adjust the column width/line-height of all columns together;
  • Indicator Group : The indicator column of the same group is adjusted together. For example, there are two indicators under the northeast dimension value: sales and profit. When adjusting the column width of sales, the profit column will also be adjusted.

Code example

const option = {
  rowResizeType: 'row',
  rowResizeMode: 'all',
  // ......
};
tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID),option);</br>

Results show

Complete example: https://www.visactor.io/vtable/demo/interaction/resize-row-height

Line-height column width adjustment: https://www.visactor.io/vtable/guide/interaction/resize_column_width
Related api: https://www.visactor.io/vtable/option/ListTable#rowResizeMode
github：https://github.com/VisActor/VTable