如何拆分MUIDataTable列单元格内容

Question

const columns = [
    {
      name: "id", // field name in the row object
      label: "S.No.", // column title that will be shown in table
      options: {
       
        customHeadRender: ({index, ...column}) =>{
          return (
            <TableCell key={index} style={columnStyleWithWidth}>  
              <span style={{marginLeft:18}}>S.NO.</span> 
            </TableCell>
          )
       },
       setCellProps: () => ({
        align: "center",
        
      })
      }
    },
    {
      name: "name",
      label: "Company Name",
      options: {
       
        customHeadRender: ({index, ...column}) =>{
          return (
            <TableCell key={index} style={columnStyleWithWidth1}>  
              <span style={{marginLeft:18}}>COMPANY NAME</span> 
            </TableCell>
          )
       },
       setCellProps: () => ({
        align: "center",

        
      })
      }
    },
    {
      name: "paid_date",
      label: "COMMENT",
     
      options : {
            
        customHeadRender: ({index, ...column}) =>{
          return (
            <TableCell key={index} style={{textAlign:"center",position: "sticky",overflowWrap:'break-word'}} >  
              <span style={{"word-wrap": "break-word"}}>COMMENT</span> 
            </TableCell>
          )
       },
        setCellProps:()=>({
          align:"center",
          style: { overflowWrap: "break-word" },
         
        }),
        
            }
    },
    {
      name: "paid_date",
      label: "DIVISION",
      options : {
            
        customHeadRender: ({index, ...column}) =>{
          return (
            <TableCell key={index} style={{textAlign:"center",position: "sticky"}}>  
              <span style={{marginLeft:18}}>DIVISION</span> 
            </TableCell>
          )
       },
        setCellProps:()=>({
          align:"center"
        })
            }
    },
    {
      name: "paid_date",
      label: "PAID DATE",
      options : {

            
        customHeadRender: ({index, ...column}) =>{
          return (
            <TableCell key={index} style={{textAlign:"center",position: "sticky"}}>  
              <span style={{marginLeft:18}}>PAID DATE</span> 
            </TableCell>
          )
       },
       setCellProps:()=>({
        align:"center"
      })
    }
            
    },
    {
      name: "amount",
      label: "AMOUNT",
      className:"text-right",
      
      options: {
       
        customHeadRender: ({index, ...column}) =>{
          return (
            <TableCell key={index} style={{textAlign:"right",position: "sticky"}}>  
              <span style={{marginLeft:18}}>AMOUNT</span> 
            </TableCell>
          )
       },
        setCellProps: () => ({
          align: "right",
          
        })
      },
    },
    {
      name: "id",
      label: "ACTION",
      options: {
       
        customHeadRender: ({index, ...column}) =>{
          return (
            <TableCell key={index} style={{textAlign:"right",position: "sticky"}} className="pr-8">  
              <span >ACTION</span> 
            </TableCell>
          )
       },
        customBodyRender: (value, tableMeta, updateValue) => {
          return (
            <div style={{textAlign:"right"}} className="pr-8" >
            {/* <Link to={"/invoice/" + tableMeta.rowData[4]}> */}
              <Tooltip title="View More">
                <Icon color="error" onClick={e=>removeData(tableMeta.rowData[6])}>delete</Icon>
             </Tooltip>
             <Tooltip title="View More">
                <Icon color="secondary" onClick={e=>setreceiptid(tableMeta.rowData[6])}>edit</Icon>
             </Tooltip>
             <Link to={"/SingleReceipts/" + tableMeta.rowData[6]}>
             <Tooltip title="View More">
                <Icon color="primary">remove_red_eye</Icon>
             </Tooltip>
            </Link>
           
          </div >

          )

        },
      },
    },
   
  ];

如何在MUIDataTable列单元格中显示下一行的单词。我已经尝试过style={{overflowWrap: "break-word"}}，但它对我不起作用。在上面的代码setCellprops:() where style: { overflowWrap: "break-word" }中，定义了它不工作。

​

​

Answer 1

通过代码示例中提到的以下代码解决了MuiDatatable单元格内容断字符。MuiTableCell: { head: { fontSize: "13px", padding: "12px 0px", }, root: { fontSize: "14px", whiteSpace: "pre-wrap", wordBreak: "break-word", padding: "12px 8px 12px 0px", }, },