Table - Dynamic Column Rendering

In many business scenarios, the table's column configuration is not predefined but dynamically generated based on business logic or backend API responses. This chapter demonstrates how to implement flexible dynamic column rendering using reactive APIs.

Async Column Fetching

The most common scenario is entering a page, first calling an API to get the user's personalized column configuration, then rendering the table.

Name

John

Jane

Async Column Config Loading

Mixed Mode (Fixed + Dynamic)

In complex admin systems, "selection checkbox", "ID", and "action column" are typically hardcoded as fixed columns on the frontend, while the middle business data columns are dynamically arranged based on API responses.

	ID

	101
	102

Fixed Columns + Dynamic Multi-level Headers

Dynamic Grouped Header

Sometimes we need to dynamically generate complex nested headers on the frontend based on structured data (e.g., years, quarter lists) returned from the backend.

Loop-Generated Nested Headers

Horizontal Dimension Rendering (Pivot)

Horizontal rendering is typically used to display "timelines" or "dynamic attributes". The backend returns a series of dimensions (e.g., date lists), and the frontend dynamically generates columns based on these dimensions, paired with corresponding dynamic keys in data objects.

Region

East Region

North Region

Horizontal Time Dimension Rendering

Vertical Data Rendering (Transpose)

Vertical rendering is primarily used to display detailed information for a single record. By converting an object's Key-Value pairs into a table's Row-Column structure, you can achieve a "detail card" effect within a table layout.

User ID	U001
Nickname	Dev Wang
Contact Email	wang@example.com
Member Level	VIP

Vertical Property View

Best Practices

1. Skeleton Screen: During async column config fetching, it is recommended to use a skeleton screen as placeholder to avoid table structure jumping.
2. Key Management: When dynamically changing the columns array, if you encounter rendering not updating, try binding a key generated based on column config to yh-table.
3. Fixed Column Conflicts: Ensure the fixed property in dynamically generated columns has consistent order logic with hardcoded fixed columns on the frontend, avoiding fixed columns being sandwiched in the middle.