Nested Table Example

This example demonstrates how to create nested tables where each parent row can expand to reveal a child table. This pattern is useful for displaying related details and hierarchical data.

Overview

In this example, you will learn how to:

• Define data with nested structures
• Configure the TableGrid to render nested rows
• Manage state for expanding/collapsing rows
• Customize the appearance of nested tables

Example

Key Concepts

• Nested Data Structure: Each parent row contains child data which can be displayed as a nested table.
• Row Expansion: Toggle the visibility of the nested table using state.
• Customization: Style and configure the nested table separately from the parent table.

Customization Tips

• Adjust the max height of the nested table according to your layout needs.
• Customize the row expansion button for better user interaction.

Best Practices

• Ensure that nested data is normalized for consistent rendering.
• Use unique keys for parent and child rows to maintain stability.
• Consider performance implications when rendering many nested rows.

Next Steps

• Experiment with different nested layouts.
• Combine nested tables with pagination for large datasets.