DEV Community

Ray
Ray

Posted on

VTable usage issue: How to implement drag-and-drop adjustment of line-height

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

Optionin the rowResizeModeconfiguration 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

rowResizeTypeconfiguration 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);
Enter fullscreen mode Exit fullscreen mode

Results show

Image description

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

Related Documents

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

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay