Table - Alignment

Control the alignment of table content and headers through the align and headerAlign properties in column configuration.

Basic Alignment

Set content alignment via the column align property, supporting left (default), center, and right.

Basic Alignment

Header Independent Alignment

Use the headerAlign property to set header alignment separately from content alignment. If headerAlign is not set, the header follows align by default.

Header & Content Separate Alignment

All Center

Set all columns' align to center to achieve full table center alignment.

All Center

Numeric Right Alignment

For numeric columns like quantities and amounts, right alignment is recommended for easy digit-by-digit comparison.

Numeric Right Alignment

Mixed Alignment

In real scenarios, different columns typically need different alignment — status columns centered, numeric columns right-aligned, text columns left-aligned.

Mixed Alignment

API

TableColumn Alignment Properties

Property	Description	Type	Default
align	Column content alignment	'left' | 'center' | 'right'	'left'
headerAlign	Header alignment (follows align if not set)	'left' | 'center' | 'right'	'left'

Alignment Values

Value	Description	Use Cases
left	Left align (default)	Text content (name, address, description, etc.)
center	Center align	Status tags, levels, action buttons, etc.
right	Right align	Numeric content (amounts, quantities, scores, etc.)

Best Practices

1. Right-align numeric columns: Right-align amounts, quantities, and other numeric data for easy digit-by-digit comparison.
2. Center-align status columns: Short content like status tags and icons look better centered.
3. Left-align text columns: Long text like names and addresses should remain left-aligned for natural reading.
4. Center-align headers: Even when content columns have different alignments, centering all headers usually looks better — use headerAlign: 'center' with different align values.