Merge pull request #852 from neo4j-labs/issue/789-wrap-text-table

#789 wrap text table

Author: mariusconjeaud

public/style.css

@@ -125,17 +125,13 @@
   margin-top: -10px;
 }
 
-.MuiDataGrid-virtualScroller {
-  overflow-y: hidden !important;
-}
-
-.MuiDataGrid-panel{
+.MuiDataGrid-panel {
   translate: 0px -152%;
 }
 
 .MuiCard-root {
-  box-shadow: 0 0 #0000,0 0 #0000,var(--tw-shadow) !important;
-  box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow) !important;
+  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow) !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
 
 .white-text {
@@ -188,7 +184,6 @@
   text-align: center;
 }
 
-
 .card-view.expanded {
   position: absolute;
   top: 0;
@@ -218,24 +213,23 @@
 
 .card-view .MuiTablePagination-root {
   margin-top: 0px;
-
 }
 
 @keyframes pulse {
-	0% {
-		transform: scale(0.95);
-		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
-	}
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+  }
 
-	70% {
-		transform: scale(1);
-		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
-	}
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+  }
 
-	100% {
-		transform: scale(0.95);
-		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
-	}
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
 }
 
 /* Workaround for Needle not handling menu placement of dropdowns on modals */
@@ -247,14 +241,14 @@
 /* End workaround */
 
 /* Workaround for cleaning the Gantt chart UI */
-.gantt-wrapper > div > div:first-child > div:first-child > div:first-child > div> div:not(:first-child) {
+.gantt-wrapper > div > div:first-child > div:first-child > div:first-child > div > div:not(:first-child) {
   display: none;
 }
-.gantt-wrapper > div > div > div > div> div>  div> div:not(:first-child)  {
+.gantt-wrapper > div > div > div > div > div > div > div:not(:first-child) {
   display: none;
 }
 /* End Gantt chart workaround */
 
 .markdown-widget a {
   text-decoration: underline;
-}
+}

src/chart/table/TableChart.tsx

@@ -271,7 +271,8 @@ export const NeoTableChart = (props: ChartProps) => {
         <DataGrid
           key={'tableKey'}
           headerHeight={32}
-          rowHeight={tableRowHeight}
+          density={compact ? 'compact' : 'standard'}
+          getRowHeight={() => 'auto'}
           rows={rows}
           columns={columns}
           columnVisibilityModel={columnVisibilityModel}
@@ -314,6 +315,12 @@ export const NeoTableChart = (props: ChartProps) => {
               })
               .join(' ');
           }}
+          sx={{
+            '&.MuiDataGrid-root--densityCompact .MuiDataGrid-cell': { py: '3px' },
+            '&.MuiDataGrid-root--densityStandard .MuiDataGrid-cell': { py: '15px' },
+            '&.MuiDataGrid-root--densityComfortable .MuiDataGrid-cell': { py: '22px' },
+            '&.MuiDataGrid-root .MuiDataGrid-cell': { wordBreak: 'break-word' },
+          }}
         />
       </div>
     </ThemeProvider>