Add ScrollArea to main M&E Data Entry table along with sticky header

client/src/components/Canvas/views/AdminTabs/MEDataEntry.jsx

@@ -111,6 +111,20 @@ const items = [
       female: 550,
       total: 1100,
     },
+    {
+        id: "r6",
+        section: "Gas",
+        volcano: "Ranier",
+        country: "US",
+        start: "2024-07-02",
+        end: "2027-05-12",
+        type: "Deployment",
+        vpi10: "Yes",
+        downstream: 1200,
+        male: 570,
+        female: 570,
+        total: 1400,
+      },
   ];
  
 export function MEDataEntry() {
@@ -123,22 +137,7 @@ export function MEDataEntry() {
         reset,
         watch,
         formState: { errors },
-    } = useForm({
-        defaultValues: {
-            id: "",
-            section: "",
-            volcano: "",
-            country: "",
-            start: "",
-            end: "",
-            type: "",
-            vpi10: "",
-            downstream: 0,
-            male: 0,
-            female: 0,
-            total: 0,
-        }
-    });
+    } = useForm();
     
     const onSubmit = (data) => {
         console.log("Form submitted:", data);
@@ -201,16 +200,16 @@ export function MEDataEntry() {
             
             <Box m={4} mt={1} border="1px solid" borderRadius="sm" borderColor="gray.500">
                 <Box m={4} border="1px solid">
-                    <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.400" overflow="hidden">
+                    <Box pl={1} bg="gray.200" border="1px solid" borderColor="gray.400">
                         Number of people benefitting from VDAP activities, disaggregate by sex
                     </Box>
                     
                     {/* <Box overflowX="auto">  */}
-                        <Table.ScrollArea borderWidth="1px"height="200px">
-                            <Table.Root variant="outline" size="sm" stickyHeader interactive>
+                        <Table.ScrollArea height="240px">
+                            <Table.Root variant="outline" overflow="initial" size="sm" stickyHeader interactive>
                                 <Table.Header>
-                                    <Table.Row>
-                                        <Table.ColumnHeader /> {/* padding for checkboxes */}
+                                    <Table.Row bg="bg.subtle">
+                                        <Table.ColumnHeader w="40px"/> 
                                         <Table.ColumnHeader>Section</Table.ColumnHeader>
                                         <Table.ColumnHeader>Volcano</Table.ColumnHeader>
                                         <Table.ColumnHeader>Country</Table.ColumnHeader>