Header Groups Example

This example demonstrates how to group related columns under a common header. Grouping headers can help organize data and improve readability by visually categorizing columns.

Overview

In this example, you will learn how to:

• Define columns with a group property
• Organize columns into header groups (e.g., grouping personal information separately from contact information)
• Enable header groups using the headerGroups prop

Example

Key Concepts

• Grouping: Use the group property to categorize columns under a common header.
• Activation: Enable header grouping by setting headerGroups to true in the TableGrid component.

Customization Tips

• Adjust the styling of group headers via the styleConfig prop for better visual distinction.
• Group only related columns to maintain clarity.

Best Practices

1. Organization: Use header groups to logically separate different types of data (e.g., personal vs. contact info).
2. Clarity: Avoid overly complex groupings that can confuse users.

Next Steps

• Explore the Basic Table Example for a simple setup.
• Try the Nested Table Example to learn about hierarchical data display.