VTable 1.13.2
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=auto wrap text——VisActor/VTable tutorial documents!!!###!!!!!!###!!!description=Line wrapping is especially meaningful for long content or cell content that contains transitions, which can effectively improve the overall layout and readability of the table. For example, when there is a column containing long content such as a work introduction, comments, or user feedback, the readability of the table may be reduced. Therefore, the automatic line wrapping function came into being.Next, we'll learn about the configuration of line wrapping and how to use it.!!!###!!!

line wrapping

Line wrapping is especially meaningful for long content or cell content that contains transitions, which can effectively improve the overall layout and readability of the table. For example, when there is a column containing long content such as a work introduction, comments, or user feedback, the readability of the table may be reduced. Therefore, the automatic line wrapping function came into being.

Next, we'll learn about the configuration of line wrapping and how to use it.

In VTable, the setting of line wrapping is relatively simple. If each column requires line wrapping, you can use the global configuration itemautoWrapTextIf you don't want to specify wrapping globally, you can set it by column. The specific configuration items are incolumns.style.autoWrapText.

  • autoWrapText: boolean: Whether the global configuration allows line wrapping, the default value isfalseIf set totrue, the cells in the current column are wrapped according to their contents.

Other related configuration items that will affect the function change are:

  • columns.style.lineClamp: number | string: Set the maximum number of rows in a cell, support numbers or'auto'Value. If set to'auto', the number of rows is automatically calculated based on the cell content length.

Next, we'll demonstrate how to use the line wrap feature with a practical example.

example

Example 1: Basic use of line wrapping

In this example, we'll show how to set a line wrap feature for columns that contain longer text content.

As shown above,introductionThe text content of the column is automatically wrapped according to the column, improving table readability.

Example 2: Setting a line wrap for the maximum number of lines

In this example, we will set a maximum number of rows limit, and when the cell content exceeds the maximum number of rows, it will be displayed with an ellipsis.

As shown above, the firstintroductionColumn sets the maximum number of rows to 2 rows, the secondintroductionThe maximum number of rows is set to 3 rows. Text content beyond the maximum row will be displayed with an ellipsis. This can effectively avoid table layout problems caused by too long cell content, and maintain the consistency of table row heights.

So far, we have introduced the meaning of the line wrapping function in VTable in detail, related configurations and usage examples. By using the line wrapping function correctly, you can better optimize the table layout and improve the effect of data lake visualization. It not only improves the efficiency of data analytics, but also brings users a more comfortable reading experience.