Alteraçao no modal para que as colunas de mensagem não seja ordenadas

frontend/src/components/Report/MTable/index.js

@@ -23,9 +23,11 @@ const MTable = (props) => {
   return ( <div style={{ maxWidth: "100%", fontSize:10}}>
           
              <MaterialTable
-                title='Relatorio'    
+                title= {props.table_title}    
                 columns={columnsLoad} 
                 data={dataLoad}  
+
+                
                 
 
                 onRowClick={(evt, selectedRow) => { 
@@ -34,8 +36,12 @@ const MTable = (props) => {
                   console.log(selectedRow);  
                   console.log(selectedRow.messages); 
                   setSelectedRow(selectedRow.tableData.id)  
-                
+
-                  render(<Modal data={selectedRow.messages}/>)  
+                  if(props.hasChild) { 
+                    render(<Modal data={selectedRow.messages} hasChild={false} modal_header={'Chat do atendimento pelo Whatsapp'}/>)  
+                  }
+                  
+                  console.log('props.hasChild: ', props.hasChild)
 
                   //evt.stopPropagation() 
                   }
@@ -46,6 +52,7 @@ const MTable = (props) => {
                   selection: false,
                   paging: false,
                   padding: 'dense',  
+                  sorting: true ? props.hasChild: false,
                   //loadingType: 'linear',
                   searchFieldStyle: {
                     width: 300,
@@ -53,8 +60,7 @@ const MTable = (props) => {
                   
                   rowStyle: rowData => ({
                     fontSize: 12, 
-                    backgroundColor:
+                    backgroundColor: selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'  
-                    selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'
                 })
              }}  
              />   

frontend/src/components/Report/Modal/index.js

@@ -3,6 +3,10 @@ import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions'; 
  
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+ 
 import DataGridTable from '../Table';
 import MTable from "../MTable";   
 
@@ -10,12 +14,13 @@ let columns = [
   { 
     title: 'Atendente/Cliente', 
     field: 'fromMe', 
+    
   },
   
   {
     title: 'Mensagem', 
     field: 'body', 
-    cellStyle: {whiteSpace: 'nowrap'},
+    //cellStyle: {whiteSpace: 'nowrap'},
   },
 
   { title: 'Criado', field: 'createdAt' }
@@ -73,10 +78,21 @@ const Modal = (props) => {
         scroll={scroll}
         aria-labelledby="scroll-dialog-title"
         aria-describedby="scroll-dialog-description"
-      > 
+      >   
 
-        <MTable data={dataChat} columns={columns} />  
+        <DialogTitle id="scroll-dialog-title">{props.modal_header}</DialogTitle>
+        <DialogContent dividers={scroll === 'paper'}>
+          <DialogContentText
+            id="scroll-dialog-description"
+            ref={descriptionElementRef}
+            tabIndex={-1}
+          >
+            <MTable data={dataChat} columns={columns} table_title={''} hasChild={false}/> 
+
+          </DialogContentText>
+        </DialogContent>
         
+ 
         <DialogActions>
           <Button onClick={handleClose}>Ok</Button> 
         </DialogActions>

frontend/src/pages/Report/index.js

@@ -296,7 +296,7 @@ console.log('XXXXXXXXX: ', query)
               display: 'grid',  
             }}>
             <Item  sx={{ gridColumn: '1', gridRow: 'span 1' }}> 
-              <MTable data={query} columns={columnsData}/> 
+              <MTable data={query} columns={columnsData} hasChild={true} table_title={'Relatório de atendimento por atendentes'}/> 
             </Item> 
           </Box>