implement scrollable feature for PreviewTable

liberty-rising · Feb 6, 2024 · 344311b · 344311b
1 parent dd520bd
commit 344311b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/frontend/src/components/layouts/AppLayout.jsx b/frontend/src/components/layouts/AppLayout.jsx
@@ -17,7 +17,17 @@ const AppLayout = ({ children }) => {
     <Box sx={{ display: "flex" }}>
       <Header navLinks={navLinks} />
       <Navigation />
-      <Box component="main" sx={{ flexGrow: 1, p: 6, marginTop: "10px" }}>
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          p: 6,
+          marginTop: "10px",
+          marginTop: "10px",
+          maxWidth: "100vw", // Ensures the main content does not exceed the viewport width
+          overflowX: "hidden",
+        }}
+      >
         <Toolbar />
         {children}
       </Box>

diff --git a/frontend/src/pages/upload/PreviewTable.jsx b/frontend/src/pages/upload/PreviewTable.jsx
@@ -49,6 +49,8 @@ function PreviewTable({ columnNames, previewData, onChangePreviewData }) {
       emptyMessage="Upload your files and click preview to see the data"
       editMode="cell"
       resizableColumns
+      scrollable
+      scrollHeight="flex"
       showGridlines
       tableStyle={{ minWidth: "150px" }}
     >

diff --git a/frontend/src/pages/upload/UploadPage.jsx b/frontend/src/pages/upload/UploadPage.jsx
@@ -219,7 +219,7 @@ function UploadPage() {
         <FileUploader setFiles={setUploadFiles} id="upload-page-uploader" />
       </Box>
 
-      <Box mt={2}>
+      <Box mt={2} sx={{ width: "100%", maxWidth: "100%" }}>
         {((columnNames && columnNames.length > 0) || previewData) && (
           <PreviewTable
             columnNames={columnNames}