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 content
  • align: "center": Center content horizontally
  • align: "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.