[AnalyticalTable-tree table]: [UI5 AnalyticalTable tree table lacks a way to control expand icon visibility independent of data loading. ]

[dp1704]

Describe the bug

Current Problematic Behavior

• Expand icons only show when subRows contains actual data
• For async loading, we must provide placeholder data to show expand icons
• This creates a timing/state synchronization issue between clicks and data loading
• Results in confusing double-click requirement

Root Problem

The UI5 AnalyticalTable lacks a way to control expand icon visibility independent of data loading.

We should be able to say "show expand icon when hasSubcurricula: true" without having to populate subRows with placeholder data.

Expected Behavior

1. Expand icon visibility controlled by business logic (e.g., hasSubcurricula flag)
2. Single click on expand icon triggers onRowExpandChange
3. Row shows loading state while data loads asynchronously
4. Once data loads, subcurricula display in expanded rows
5. No placeholder data manipulation required

Actual Behavior

1. Must populate subRows with placeholder data to show expand icons
2. First click triggers onRowExpandChange but visual expansion fails due to state sync issues
3. Second click required to actually expand and show cached data ❌
4. Complex workarounds needed for basic async tree functionality

Isolated Example

No response

Reproduction steps

🔄 Reproduction Steps

1. Setup Component

import { AnalyticalTable } from "@ui5/webcomponents-react";

const [subcurriculaCache, setSubcurriculaCache] = useState<Record<string, CurriculumItem[]>>({});

// Transform data to show expand icons for items with subcurricula
const transformTreeData = useCallback((items: CurriculumItem[]): any[] => {
  return items.map((curriculum) => ({
    ...curriculum,
    subRows: curriculum.hasSubcurricula 
      ? (subcurriculaCache[curriculum.curriculaId] 
          ? transformTreeData(subcurriculaCache[curriculum.curriculaId])
          : [{ _isPlaceholder: true, curriculaId: `placeholder-${curriculum.curriculaId}` }])
      : undefined
  }));
}, [subcurriculaCache]);

2. Async Data Loading Handler

const handleRowExpansion = useCallback(async (event: any) => {
  const { row } = event.detail;
  const curriculum = row.original as CurriculumItem;
  
  if (curriculum.hasSubcurricula && !subcurriculaCache[curriculum.curriculaId]) {
    // This successfully loads data but row doesn't expand
    const subcurricula = await loadSubcurriculaAPI(curriculum.curriculaId);
    setSubcurriculaCache(prev => ({ ...prev, [curriculum.curriculaId]: subcurricula }));
  }
}, [subcurriculaCache]);

3. Table Configuration

<AnalyticalTable
  data={transformTreeData(data)}
  columns={columns}
  isTreeTable={true}
  subRowsKey="subRows"
  onRowExpandChange={handleRowExpansion}
/>

4. Reproduce Bug

1. Load page with curricula data
2. Click expand icon on any row with hasSubcurricula: true
3. Observe: Row doesn't expand (but network request succeeds)
4. Click expand icon again
5. Observe: Row now expands and shows loaded data

---

🔍 Root Cause Analysis

The issue appears to be a state synchronization problem between:

1. UI5's internal expansion state management
2. External React state updates from async operations
3. Event timing between onRowExpandChange and data loading

Technical Details

• onRowExpandChange fires correctly on first click ✅
• Async data loading completes successfully ✅
• subcurriculaCache state updates properly ✅
• UI5's internal expansion state doesn't sync with external state changes ❌
• Table's visual expansion state remains out of sync until second interaction

---

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

2.15.0

UI5 Web Components Version

2.15.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[dp1704]

any update on this?

[Lukas742]

@dp1704 To help us process the issue faster, please add an isolated, reproducible example preferably by editing this StackBlitz template.