React Material UI 包装 TableRow

Question

所以我在下面有这个 table，我正在使用 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>
    );
}

Answer 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 被认为是单独的词。虽然不确定。

React Material UI 包装 TableRow

React Material UI wrap TableRow

javascript

reactjs

material-ui

react-table

react-material