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.

Index	Name (Left)	Age (Center)	Salary (Right)	Dept (Center)	Notes

1	John	28	15000	Engineering	Outstanding Employee
2	Jane	32	18000	Product	Best of Year
3	Mike	25	14000	Design	Creative Star
4	Sarah	35	22000	Operations	Management Expert
5	Tom	29	16000	Marketing	Pioneer

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 and content can have separate alignment settings.

Index	Name	Age	Salary	Department	Notes

1	John	28	15000	Engineering	Outstanding Employee
2	Jane	32	18000	Product	Best of Year
3	Mike	25	14000	Design	Creative Star

Header & Content Separate Alignment

All Center

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

Name	Age	Department	Salary	Notes

John	28	Engineering	15000	Outstanding Employee
Jane	32	Product	18000	Best of Year
Mike	25	Design	14000	Creative Star

All Center

Numeric Right Alignment

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

Right alignment is recommended for numeric data to allow easy digit-by-digit comparison.

Index	Product Name	Quantity	Unit Price	Total Amount

1	Laptop	156	5999	935844
2	Mechanical Keyboard	342	399	136458
3	Wireless Mouse	520	129	67080
4	Monitor	89	2499	222411
5	Headphone	267	699	186633

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.

Status	Name	Score	Level	Comment

✅ Passed	John	95	A+	Excellent performance, received multiple praises
✅ Passed	Jane	88	A	Diligent work, innovative thinking
❌ Failed	Mike	56	D	Needs to improve professional skills
✅ Passed	Sarah	72	B	Strong communication and collaboration skills
⚠️ Pending	Tom	65	C	Room for improvement

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.