Hide Material UI grid column on certain breakpoints

Question

I'm trying to hide some columns on certain breakpoints, like this:

<Grid container>
  <Grid item sm={1} md={0} />
  <Grid item sm={10} md={12}>
    {/* some content goes here */}
  </Grid>
  <Grid item sm={1} md={0} />
</Grid>

So in this example first and last columns should not show on medium breakpoint and bigger. I wrote md={0}, but that's not a correct code. Does anyone know the correct way of doing that?

Answer 1

You can use the Material Ui System's display (hiding elements) feature.

The display is not available with Grid, so you can use Box and use component prop and provide Grid

Working demo in codesandbox

code snippet

      <Grid container spacing={3}>
        <Box
          component={Grid}
          className={classes.one}
          item
          xs={1}
          display={{ md: "none" }}
        >
          One
        </Box>
        <Grid className={classes.two} item sm={10} md={12}>
          Two
        </Grid>
        <Box
          component={Grid}
          className={classes.three}
          item
          xs={1}
          display={{ md: "none" }}
        >
          Three
        </Box>
      </Grid>

Answer 2

You can use Material UI's useMediaQuery

import { DataGrid } from "@mui/x-data-grid";
import useMediaQuery from "@mui/material/useMediaQuery";

const data = [
  {
    id: 1,
    column1: "abc",
    column2: "xyz",
  },
  {
    id: 2,
    column1: "abc2",
    column2: "xyz2",
  },
  {
    id: 3,
    column1: "abc3",
    column2: "xyz3",
  },
];
const Hide = () => {
  const matches = useMediaQuery("(max-width:600px)");
  const columns = [
    {
      field: "column1",
      headerName: "Column1",
    },
    {
      field: "column2",
      headerName: "Column2",
      hide: matches,
    },
  ];

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid rows={data} columns={columns} />
    </div>
  );
};

export default Hide;