some styling improvements

src/components/OutputsTable/index.tsx

@@ -11,18 +11,29 @@ type TableRow = {
   scenario: NonNullable<RouterOutputs["scenarios"]["list"]>[0];
 } & Record<string, CellData>;
 
-export default function OutputsTable({ experimentId }: { experimentId: string }) {
-  const experiment = api.experiments.get.useQuery({ id: experimentId });
+export default function OutputsTable({ experimentId }: { experimentId: string | undefined }) {
+  const experiment = api.experiments.get.useQuery(
+    { id: experimentId as string },
+    { enabled: !!experimentId }
+  );
 
-  const variants = api.promptVariants.list.useQuery({ experimentId: experimentId });
+  const variants = api.promptVariants.list.useQuery(
+    { experimentId: experimentId as string },
+    { enabled: !!experimentId }
+  );
 
-  const scenarios = api.scenarios.list.useQuery({ experimentId: experimentId });
+  const scenarios = api.scenarios.list.useQuery(
+    { experimentId: experimentId as string },
+    { enabled: !!experimentId }
+  );
 
   const columns = useMemo<MRT_ColumnDef<TableRow>[]>(
     () => [
       {
         id: "scenario",
         header: "Scenario",
+        enableColumnDragging: false,
+        size: 200,
         Cell: ({ row }) => {
           return <div>{JSON.stringify(row.original.scenario.variableValues)}</div>;
         },
@@ -31,6 +42,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string })
         (variant): MRT_ColumnDef<TableRow> => ({
           id: variant.id,
           header: variant.label,
+          // size: 300,
           Cell: ({ row }) => {
             const cellData = row.original[variant.id];
             return (
@@ -50,15 +62,29 @@ export default function OutputsTable({ experimentId }: { experimentId: string })
       scenarios.data?.map((scenario) => {
         return {
           scenario,
-          // ...variants.data?.reduce(
-          //   (acc, variant) => ({ ...acc, [variant.id]: { variant, scenario } }),
-          //   {} as Record<string, CellData>
-          // ),
         } as TableRow;
       }) ?? [],
     [variants.data, scenarios.data]
   );
 
-  return <MantineReactTable columns={columns} data={tableData} enableFullScreenToggle={false} />;
+  return (
+    <MantineReactTable
+      mantinePaperProps={{
+        withBorder: false,
+        shadow: "none",
+      }}
+      columns={columns}
+      data={tableData}
+      enableBottomToolbar={false}
+      enableTopToolbar={false}
+      enableColumnDragging
+      enableGlobalFilter={false}
+      enableFilters={false}
+      enableDensityToggle={false}
+      enableFullScreenToggle={false}
+      enableHiding={false}
+      enableRowDragging
+    />
+  );
   // return <div>OutputsTable</div>;
 }