make test page expandable rows interactive

cloudscape-design · Jan 20, 2025 · b58991d · b58991d
1 parent dc6d8ed
commit b58991d
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/pages/table/editable.page.tsx b/pages/table/editable.page.tsx
@@ -272,6 +272,8 @@ const Demo = forwardRef(
       setClean();
     };
 
+    const [expandedItems, setExpandedItems] = useState<DistributionInfo[]>([]);
+
     return (
       <Table
         ref={tableRef}
@@ -297,10 +299,19 @@ const Demo = forwardRef(
         expandableRows={
           expandableRows
             ? {
-                getItemChildren: () => [],
-                isItemExpandable: () => true,
-                expandedItems: [],
-                onExpandableItemToggle: () => {},
+                getItemChildren: item => [
+                  { ...item, Id: item.Id + '-1' },
+                  { ...item, Id: item.Id + '-2' },
+                ],
+                isItemExpandable: item => !item.Id.endsWith('-1') && !item.Id.endsWith('-2'),
+                expandedItems,
+                onExpandableItemToggle: ({ detail }) => {
+                  if (detail.expanded) {
+                    return setExpandedItems(prev => [...prev, detail.item]);
+                  } else {
+                    return setExpandedItems(prev => prev.filter(item => item !== detail.item));
+                  }
+                },
               }
             : undefined
         }