Documentation
Column Alignment
Column alignment allows you to control how content is positioned horizontally within each column, improving readability and visual organization of your data.
Basic Usage
Control column alignment by setting the align
property in your header definitions:
React TSX
1
Alignment Options
align: "left"
(default): Left-align contentalign: "center"
: Center content horizontallyalign: "right"
: Right-align content
Best Practices
Consider these guidelines for optimal column alignment:
Text Content
Left-align text content such as names, descriptions, and other textual data for easier reading.
Numeric Values
Right-align numbers, currencies, and percentages to make decimal points align vertically.
Headers
Match the header alignment with its column content for consistency.
Status Indicators
Center-align status badges, icons, and other indicator elements to create visual focus.