React Material UI 包装 TableRow

Posted 2023-02-22

【中文标题】React Material UI 包装 TableRow

【英文标题】：React Material UI wrap TableRow

【发布时间】：2020-12-31 07:00:37

【问题描述】：

所以我在下面有这张表，我正在使用 Material UI 和 React-table。我试图了解如何从 TableRow 换行文本，但到目前为止我还没有成功。有谁知道这样做的最佳方法是什么？下面是我的代码。我认为添加 whiteSpace 和 wordWrap 会做到这一点，但似乎并非如此。

import React from "react";
import  useTable from "react-table";
import MaUTable from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";

const data = [
     location: "Location 1", monday: ["8:00 AM","9:00 AM"], tuesday: ["8:00 AM","9:00 AM"], wednesday:["8:00 AM","9:00 AM"], thursday:["8:00 AM","9:00 AM"],friday:["8:00 AM","9:00 AM"] ,
     location: "Location 2", monday: ["8:00 AM","9:00 AM"], tuesday: ["8:00 AM","9:00 AM"], wednesday:["8:00 AM","9:00 AM"], thursday:["8:00 AM","9:00 AM"],friday:["8:00 AM","9:00 AM"] 
];

const columns = [
    
        Header: "Shop",
        columns: [
            
                Header: "Location",
                accessor: "location"
            ,
            
                Header: "Monday",
                accessor: "monday"
            ,
            
                Header: "Tuesday",
                accessor: "tuesday"
            ,
            
                Header: "Wednesday",
                accessor: "wednesday"
            ,
            
                Header: "Thursday",
                accessor: "thursday"
            ,
            
                Header: "Friday",
                accessor: "friday"
            ,
        ]
    
];

const Table = ( columns, data ) => 
    const 
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow
     = useTable(
        columns,
        data
    

    );

    return (
        <MaUTable ...getTableProps()>
            <TableHead>
            headerGroups.map(headerGroup => (
                <TableRow ...headerGroup.getHeaderGroupProps()>
                    headerGroup.headers.map(column => (
                        <TableCell ...column.getHeaderProps()>column.render("Header")</TableCell>
                    ))
                </TableRow>
            ))
            </TableHead>
            <TableBody ...getTableBodyProps()>
            rows.map((row, i) => 
                prepareRow(row);
                return (
                    <TableRow  style=whiteSpace: "normal", wordWrap: "break-word" ...row.getRowProps()>
                        row.cells.map(cell => 
                            return <td ...cell.getCellProps()>cell.render("Cell")</td>;
                        )
                    </TableRow>
                );
            )
            </TableBody>
        </MaUTable>
    );
;

export default function App() 
    return (
        <div className="App">
            <Table columns=columns data=data />
        </div>
    );

【问题讨论】：

它似乎在工作tclqg.csb.app。

这能回答你的问题吗？ How to do word-wrap for data using react-table?

@bertdida 我要做的是获取“星期一”“星期二”等的 td 数据，以便显示“上午 9:00”，然后在底部 10:00 换行上午等。

【参考方案1】：

除了使用whiteSpace 和wordWrap，您可以将每个值包装在span 标记上，并将display 设置为inline-block。

const Cell = ( cell ) => 
  return cell.value.map((value, index) => (
    <span
      key=index
      style= display: "inline-block", marginRight: index === 0 ? 8 : 0 
    >
      value
    </span>
  ));
;

const columns = [
  
    Header: "Shop",
    columns: [
      
        Header: "Location",
        accessor: "location"
      ,
      
        Header: "Monday",
        accessor: "monday",
        Cell: ( cell ) => <Cell cell=cell />
      ,
      
        Header: "Tuesday",
        accessor: "tuesday",
        Cell: ( cell ) => <Cell cell=cell />
      ,
      
        Header: "Wednesday",
        accessor: "wednesday",
        Cell: ( cell ) => <Cell cell=cell />
      ,
      
        Header: "Thursday",
        accessor: "thursday",
        Cell: ( cell ) => <Cell cell=cell />
      ,
      
        Header: "Friday",
        accessor: "friday",
        Cell: ( cell ) => <Cell cell=cell />
      
    ]
  
];

---

我认为 wordWrap 不起作用可能是因为，当您有 8:00 AM 9:00 PM 之类的文本时，8:00、AM、9:00 和 PM 被视为单独的单词。不过不确定。

【讨论】：

太好了，我最终将 inline-block 更改为 grid，这样它就可以将时间包裹在下面。

是的。这也可以，我想你可以使用grid-gap 来给出每次之间的间距。 :)