React Material UI包装表行

问题描述

所以我下面有这个表，我正在使用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",wednesday:["8:00 AM",thursday:["8:00 AM",friday:["8:00 AM","9:00 AM"] },{ location: "Location 2","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>
    );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）