Table - Highlight & Style

Through table properties and column configuration, implement row highlight, column highlight, header icons, content wrapping and overflow style control.

Highlight Row

After setting highlight-current-row, clicking a table row will highlight it.

Click a row to highlight it. Clicking another row switches the highlight.

Name	Age	Department	Salary	Address

John	28	Engineering	15000	88 Jianguo Rd, SOHO Modern City, Chaoyang, Beijing
Jane	32	Product	18000	100 Century Ave, Shanghai World Financial Center, Pudong, Shanghai
Mike	25	Design	14000	385 Tianhe Rd, Taikoo Hui Tower 1, Tianhe, Guangzhou
Sarah	35	Operations	22000	9966 Shennan Blvd, VIA Technologies Building, Nanshan, Shenzhen
Tom W.	29	Marketing	16000	398 Wensan Rd, Dongxin Building B, Xihu, Hangzhou

Highlight Current Row

Highlight Column

Dynamically set column className to is-column-highlight through the cell-click event to highlight the entire column when clicking a cell.

Click a cell to highlight the entire column.

Name	Age	Department	Salary	Address

John	28	Engineering	15000	88 Jianguo Rd, SOHO Modern City, Chaoyang, Beijing
Jane	32	Product	18000	100 Century Ave, Shanghai World Financial Center, Pudong, Shanghai
Mike	25	Design	14000	385 Tianhe Rd, Taikoo Hui Tower 1, Tianhe, Guangzhou
Sarah	35	Operations	22000	9966 Shennan Blvd, VIA Technologies Building, Nanshan, Shenzhen
Tom W.	29	Marketing	16000	398 Wensan Rd, Dongxin Building B, Xihu, Hangzhou

Highlight Column

Header Prefix Icon

Add icons before header text through column config headerPrefixIcon property. Supports passing Vue components (such as SVG icon components).

Name	Age	Department	Address

John	28	Engineering	88 Jianguo Rd, SOHO Modern City, Chaoyang, Beijing
Jane	32	Product	100 Century Ave, Shanghai World Financial Center, Pudong, Shanghai
Mike	25	Design	385 Tianhe Rd, Taikoo Hui Tower 1, Tianhe, Guangzhou

Header Prefix Icon

Header Suffix Icon

Add icons after header text through column config headerSuffixIcon property, commonly used to mark required fields or hint information.

Name*	Age	Department	Salary*	Address

John	28	Engineering	15000	88 Jianguo Rd, SOHO Modern City, Chaoyang, Beijing
Jane	32	Product	18000	100 Century Ave, Shanghai World Financial Center, Pudong, Shanghai
Mike	25	Design	14000	385 Tianhe Rd, Taikoo Hui Tower 1, Tianhe, Guangzhou

Header Suffix Icon

Auto Wrap

Add class="is-auto-wrap" to yh-table to enable automatic cell content wrapping, suitable for scenarios displaying long text.

Name	Content Description	Status

John	This is a very long text content used to test the auto-wrap effect of cells. You can see that the text wraps automatically instead of being truncated. Long descriptions are often needed in real projects.	In Progress
Jane	Short text	Completed
Mike	This is also a longer content with various detail descriptions, such as project requirements analysis, feature design specs, and testing acceptance criteria.	Pending Review

Auto Wrap

Overflow Hidden

Configure column with showOverflowTooltip: true to automatically ellipsis content that exceeds column width, showing a full content Tooltip on hover.

Name	Address (Overflow Hidden + Tooltip)	Department

John	88 Jianguo Rd, SOHO Modern City, Chaoyang, Beijing	Engineering
Jane	100 Century Ave, Shanghai World Financial Center, Pudong, Shanghai	Product
Mike	385 Tianhe Rd, Taikoo Hui Tower 1, Tianhe, Guangzhou	Design
Sarah	9966 Shennan Blvd, VIA Technologies Building, Nanshan, Shenzhen	Operations
Tom W.	398 Wensan Rd, Dongxin Building B, Xihu, Hangzhou	Marketing

Overflow Hidden + Tooltip

API

Highlight Properties

Property	Description	Type	Default
highlight-current-row	Whether to highlight the currently clicked row	boolean	false
current-row-key / v-model:current-row-key	Key value of the currently highlighted row	string | number	—

Highlight Events

Event	Description	Parameters
current-change	Triggered when the current row changes	(currentRow, oldRow)

Column Highlight

Implement column highlight by dynamically setting the is-column-highlight class name through the column className property.

Property	Description	Type	Default
className	Custom class name for the column	string	—

Header Icon Properties

Property	Description	Type	Default
headerPrefixIcon	Header prefix icon (Vue component or string)	string | Component	—
headerSuffixIcon	Header suffix icon (Vue component or string)	string | Component	—

Wrapping & Overflow

Usage	Description	Type
class="is-auto-wrap"	Table-level auto wrap (add to yh-table)	string
showOverflowTooltip	Column-level overflow hidden, show tooltip on hover	boolean | TooltipConfig
ellipsis	Column-level ellipsis	boolean | EllipsisConfig

showOverflowTooltip Config (TooltipConfig)

Property	Description	Type	Default
effect	Tooltip theme	'dark' | 'light'	'dark'
placement	Tooltip placement	string	'top'
offset	Tooltip offset	number	—

ellipsis Config (EllipsisConfig)

Property	Description	Type	Default
tooltip	Whether to show tooltip when truncated	boolean	false
lineClamp	Limit the number of displayed rows	number	—