Sometimes, we want to make a React Material UI TableRow column span multiple columns.

In this article, we’ll look at how to make a React Material UI TableRow column span multiple columns.

How to make a React Material UI TableRow column span multiple columns?

To make a React Material UI TableRow column span multiple columns, we set the colSpan prop of the TableCell component.

For instance, we write:

import * as React from "react";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";

export default function App() {
  return (
    <div>
      <Table>
        <TableBody>
          <TableRow>
            <TableCell>Data 1</TableCell>
            <TableCell>Data 2</TableCell>
          </TableRow>
          <TableRow>
            <TableCell colSpan={2}>Data Two Columns</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  );
}

We set the colSpan of the TableCell in the 2nd TableRow to 2.

As a result, the cell should span 2 columns instead of 1.

Conclusion

To make a React Material UI TableRow column span multiple columns, we set the colSpan prop of the TableCell component.