## Overview

The Grouped Attributes of a Table widget allows you to position the attributes from a table flexibly. It displays and edits attributes from a page selected in a connected table widget, implementing the master-detail pattern where selecting a row in a table automatically displays that row's attributes in a detail panel.

## Core Concept: Master-Detail Pattern

```
+-------------------------------------------------------------------------------+
|                              Master-Detail Pattern                             |
+---------------------------------+---------------------------------------------+
|   Master Table                  |   Connected Attributes Group                |
|                                 |                                             |
|   [Row 1: Item A]               |                                             |
|   [Row 2: Item B] <-- selected  |   +-------------------------------------+   |
|   [Row 3: Item C]               |   | Displays attributes of Item B      |   |
|                                 |   | (the selected row)                  |   |
|                                 |   +-------------------------------------+   |
+---------------------------------+---------------------------------------------+
```

### How It Works

1. User selects a row in the master table
2. The connected attributes group receives the selection event
3. Widget displays attributes from the selected page
4. When selection changes, the widget automatically updates

### Embedded Layout Structure

This widget contains an **embedded layout** - a nested grid of attribute widgets. Each attribute is displayed using a `cf.platform.connectedSingleAttribute` widget, which can be arranged in rows and columns within the panel.

## Display Modes

### Single Attribute Detail

Display one attribute (like a description or notes field) from the selected row. Best for rich content that benefits from more space.

### Multi-Attribute Grid

Display several attributes in a grid layout for a compact overview of the selected item.

### Vertical Stack

All attributes in a single column for a detailed, form-like view.

## Layout Patterns

### Side-by-Side (Most Common)

Table on the left, detail panel on the right. Users can browse the list while seeing details of their selection.

### Stacked

Table spans full width with the detail panel below. Good when both table columns and detail content need horizontal space.

### Dashboard with Multiple Connected Widgets

A single master table can drive multiple detail widgets - attribute panels, charts, and secondary tables all update based on the selection.

## Design Considerations

### Visual Alignment

Match the height of the detail panel to the master table for visual balance. When they're side-by-side, equal heights create a cohesive layout.

### Label Strategy

- **Single attribute with a titled frame**: Hide individual attribute labels to avoid redundancy
- **Multiple attributes in one panel**: Show labels to distinguish each field

### In-Place Editing

Individual attributes can enable in-place editing, allowing users to modify values directly in the detail panel without opening a dialog.

### Empty State

The widget shows nothing until the user selects a row. Consider this in your layout - the panel will appear empty on initial page load.

## When to Use This vs. Alternatives

| Scenario | Recommended Widget |
|----------|-------------------|
| Custom detail layout with specific attributes | **Connected Attributes** |
| Quick detail panel showing all attributes | **Table Detail View** |
| Attributes of the page being viewed | **Grouped Attributes** |
| Need inline editing of selected item | **Connected Attributes** |
| Simple preview without customization | **Table Detail View** |

## Comparison: Connected Attributes vs Grouped Attributes

| Aspect | Connected Attributes | Grouped Attributes |
|--------|----------------------|--------------------|
| Data source | Selected row in a table | The current page |
| Requires table connection | Yes | No |
| Updates dynamically | Yes, on selection change | No |
| Use case | Master-detail patterns | Page detail layouts |

## Related Widgets

- **Embedded Search Table**: The typical master widget that drives selection
- **Grouped Attributes**: Same concept but for the current page's own attributes
- **Table Detail View**: Simpler alternative that shows all attributes automatically
- **Connected charts**: Charts can also connect to tables using the same master-detail pattern