
Table wrapping example
When the content of the header or the cell in the row is too long, the effect of omitting, wrapping, etc. can be realized by changing the style
Note:Because the Table
component has realized the function of adapting to the mobile terminal, this demo needs to be viewed on the computer side
In some special cases, the header may be relatively long, and the header needs to be controlled within a fixed width. When the mouse moves over the header, Tooltip
is displayed to display the complete header information.
Demo
You can drag the window size, and the horizontal scroll bar will automatically appear when the window is too small
Wrap the super long header by setting HeaderTextWrap
Demo
You can drag the window size. When the window is too small, the horizontal scroll bar will automatically appear, and the header will automatically wrap.
In some special cases, the cell content may be long and need to be wrapped
Demo
- You can drag the window size, the address column will be automatically wrapped when the window is too small
- Enable word wrapping by setting
TextWrap
- Note: It is recommended to use
Width
to set the column width
In some special cases, the content of the cell may be relatively long, and it needs to be omitted.
Demo
- You can drag the window size, and the address column will be automatically omitted if the window is too small
- Enable text ellipsis by setting
TextEllipsis
- Note: It is recommended to use
Width
to set the column width. If the column width is not set, it will automatically use 200px width inside - After the text in the cell is omitted, you can use the
ShowTips
property to control whether to display all the text on mouse hover, the default isfalse
- Drag the address column, the cell display content will automatically increase and decrease
Use templates for special layout of in-cell data
Demo
B station related video link
交流群