table with optional index

Author: devhelpr

src/assets/synthetic-data.tsx

@@ -213,14 +213,16 @@ def run():
     setResult(json.dumps(
         {'type': 'heading', 'data': 'Diagnostic Results:'}
     ))
-    setResult(json.dumps({'type': 'table', 'data': json.dumps([
-        {
-            'attribute': key,
-            'ks_stat': values['ks_stat'],
-            'p_value': values['p_value']
-        }
-        for key, values in results['distribution_results'].items()
-    ])}))
+    setResult(json.dumps({'type': 'table', 
+        'showIndex' : False,
+        'data': json.dumps([
+            {
+                'attribute': key,
+                'ks_stat': values['ks_stat'],
+                'p_value': values['p_value']
+            }
+            for key, values in results['distribution_results'].items()
+        ])}))
 
     setResult(json.dumps(
         {'type': 'heading', 'data': 'Correlation difference: ' + str(results['correlation_diff']) }
@@ -229,7 +231,11 @@ def run():
     setResult(json.dumps(
         {'type': 'heading', 'data': '5. Output data'}
     ))
-    setResult(json.dumps({'type': 'table', 'data': synthetic_data.head().to_json(orient="records")}))
+    setResult(json.dumps({
+        'type': 'table', 
+        'showIndex': True,
+        'data': synthetic_data.head().to_json(orient="records")
+        }))
 
 
     # copy dataframe and assign NaN to all values

src/components/SimpleTable.tsx

@@ -12,7 +12,9 @@ import { useTranslation } from 'react-i18next';
 export default function SimpleTable({
     title,
     data,
+    showIndex,
 }: {
+    showIndex: boolean;
     title?: string;
     data: Record<string, string | number>[];
 }) {
@@ -26,6 +28,7 @@ export default function SimpleTable({
                 {title && <TableCaption>{t(title)}</TableCaption>}
                 <TableHeader>
                     <TableRow className="bg-aaLight">
+                        {showIndex && <TableHead></TableHead>}
                         {Object.keys(data[0]).map(key => (
                             <TableHead key={key} className="text-black">
                                 {key}
@@ -36,6 +39,7 @@ export default function SimpleTable({
                 <TableBody>
                     {data.map((row, i) => (
                         <TableRow key={i}>
+                            {showIndex && <TableCell>{i}</TableCell>}
                             {Object.values(row).map((value, i) => (
                                 <TableCell key={i}>{value}</TableCell>
                             ))}

src/components/componentMapper.tsx

@@ -90,6 +90,7 @@ export default function ComponentMapper({
                                     <SimpleTable
                                         data={data.data.slice(0, 5)}
                                         title="datasetPreview"
+                                        showIndex={true}
                                     />
                                 )}
                             </Fragment>
@@ -101,6 +102,7 @@ export default function ComponentMapper({
                                 key={index}
                                 data={JSON.parse(resultItem.data)}
                                 title={t(resultItem.title)}
+                                showIndex={resultItem.showIndex ?? false}
                             />
                         );