React Material UI Grid

Question

Is there any correct and easy way to create kind of table with Material UI ?. direction="column" or direction="row" are not working if I want to have different height columns. Any suggestions?

Answer 1

If you want to use Material-ui built-in Grid system you can do it by using 2 grid containers, one with direction="row" (default) and second (child) with direction="column". It needs a bit of individual styling, might look "hacky", but I don't know other way:

import React from "react";
import ReactDOM from "react-dom";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  box: {
    height: "100%",
    width: "100%"
  },
  container: {
    height: "400px"
  },
  innerContainer: {
    height: "100%"
  },
  item: {
    flex: 1
  }
});

function App() {
  const classes = useStyles();
  return (
    <Grid spacing={4} className={classes.container} container>
      <Grid xs={4} item>
        <Grid
          spacing={4}
          direction="column"
          className={classes.container}
          container
        >
          <Grid className={classes.item} item>
            <Box className={classes.box} bgcolor="blue" />
          </Grid>
          <Grid className={classes.item} item>
            <Box className={classes.box} bgcolor="red" />
          </Grid>
        </Grid>
      </Grid>
      <Grid xs={8} item>
        <Box className={classes.box} bgcolor="green" />
      </Grid>
    </Grid>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

LIVE EXAMPlE

Other option is to use CSS Grid. It requires much less elements, and (at least for me) is simplier. However, it doesn't work in Internet Explorer, if you care about such thing.

import React from "react";
import ReactDOM from "react-dom";
import Box from "@material-ui/core/Box";
import { makeStyles } from "@material-ui/styles";


const useStyles = makeStyles({
  container: {
    height: '400px',
    width: "100%",
    display: 'grid',
    gridTemplateColumns: '1fr 2fr',
    gridTemplateRows: '1fr 1fr',
    gridGap: "20px",

  },
  firstChild: {
    gridRow: '1 / 2',
    gridColumn: '1 / 2',
  },
  secondChild: {
    gridRow: '1 / 3',
    gridColumn: '2 / 3',
  },
  thirdChild: {
    gridRow: '2 / 3',
    gridColumn: '1 / 2',
  },
});

function App() {
  const classes = useStyles();
  return (
    <Box className={classes.container}>
      <Box className={classes.firstChild} bgcolor="blue" />
      <Box className={classes.secondChild} bgcolor="red" />
      <Box className={classes.secondThird} bgcolor="green" />
    </Box>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

LIVE EXAMPLE