React Material UI wrap TableRow

Question

SO I have this table below, I am using Material UI and React-table. I trying to see how to wrap text from TableRow but so far I have been unsuccessful. Does anyone know what is the best way to do this? Below is my code. I would figure that adding whiteSpace and wordWrap would do it, but that doesnt seem to be the case.

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

Instead of using whiteSpace and wordWrap, you can wrap each value on a span tag with display set to 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} />
      }
    ]
  }
];

---

I think wordWrap does not work maybe because, when you have text like 8:00 AM 9:00 PM — 8:00, AM, 9:00 and PM are considered separate words. Not sure though.