download button below table in section 5 and remove on other places

Author: devhelpr

src/assets/synthetic-data.tsx

@@ -354,6 +354,9 @@ def run():
         'data': synthetic_data.head().to_json(orient="records")
     }))
 
+    setResult(json.dumps({
+        'type': 'export-button',
+    }))
 
     setResult(json.dumps({
         'type': 'heading',

src/routes/SyntheticData.tsx

@@ -161,18 +161,22 @@ export default function SyntheticDataGeneration() {
                     loading && 'overflow-hidden'
                 )}
             >
-                {initialised && data.data.length > 0 && result.length > 0 && (
-                    <ExportButton
-                        buttonAlign="right"
-                        clusterInfo={clusterInfo}
+                {result.length > 0 ? (
+                    <ComponentMapper
+                        items={result}
                         data={data}
-                        handleExport={handleExport}
-                        reactToPrintFn={reactToPrintFn}
+                        exportButton={
+                            <div className="flex flex-row gap-2 hideonprint justify-start">
+                                <ExportButton
+                                    buttonAlign={'left'}
+                                    clusterInfo={clusterInfo}
+                                    reactToPrintFn={reactToPrintFn}
+                                    data={data}
+                                    handleExport={handleExport}
+                                />
+                            </div>
+                        }
                     />
-                )}
-
-                {result.length > 0 ? (
-                    <ComponentMapper items={result} data={data} />
                 ) : loading ? (
                     <LoadingState
                         loadingMessageKey={loadingMessage}
@@ -189,16 +193,6 @@ export default function SyntheticDataGeneration() {
                         <div className="flex-1" />
                     </>
                 )}
-
-                {initialised && data.data.length > 0 && result.length > 0 && (
-                    <ExportButton
-                        buttonAlign="center"
-                        clusterInfo={clusterInfo}
-                        data={data}
-                        handleExport={handleExport}
-                        reactToPrintFn={reactToPrintFn}
-                    />
-                )}
             </div>
         </main>
     );