Category: React

Sometimes, we want to make React Material UI table row and columns sticky.

In this article, we’ll look at how to make React Material UI table row and columns sticky.

How to make React Material UI table row and columns sticky?

To make React Material UI table row and columns sticky, we can add our own styles to the existing table cell components and return the new component with the styles.

For instance, we write:

import React from "react";
import {
  makeStyles,
  TableContainer,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Table,
  withStyles
} from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%",
    marginTop: theme.spacing(3)
  },
  head: {
    backgroundColor: "#fff",
    minWidth: "50px"
  },
  tableContainer: {
    maxHeight: "400px"
  },
  cell: {
    minWidth: "100px"
  }
}));

const StickyTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
    left: 0,
    position: "sticky",
    zIndex: theme.zIndex.appBar + 2
  },
  body: {
    backgroundColor: "#ddd",
    minWidth: "50px",
    left: 0,
    position: "sticky",
    zIndex: theme.zIndex.appBar + 1
  }
}))(TableCell);

const StyledTableCell = withStyles((theme) => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white
  },
  body: {
    fontSize: 14
  }
}))(TableCell);

const StyledTableRow = withStyles((theme) => ({
  root: {
    "&:nth-of-type(odd)": {
      backgroundColor: theme.palette.action.hover
    }
  }
}))(TableRow);

let id = 0;
const createData = (name, calories, fat, carbs, protein) => {
  id += 1;
  return { id, name, calories, fat, carbs, protein };
};

const data = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Eclair", 262, 16.0, 24, 6.0)
];

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <TableContainer className={classes.tableContainer}>
        <Table stickyHeader>
          <TableHead>
            <TableRow>
              <StickyTableCell className={classes.head}>
                <StyledTableCell className={classes.head} numeric>
                  Dessert (100g serving)
                </StyledTableCell>
                <StyledTableCell className={classes.head} numeric>
                  Calories
                </StyledTableCell>
              </StickyTableCell>
              <StyledTableCell className={classes.head} numeric>
                Calories
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Fat (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Carbs (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
              <StyledTableCell className={classes.head} numeric>
                Protein (g)
              </StyledTableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map((n) => {
              return (
                <StyledTableRow key={n.id}>
                  <StickyTableCell>
                    <StyledTableCell
                      numeric
                      align="right"
                      className={classes.cell}
                    >
                      {n.name}
                    </StyledTableCell>
                    <StyledTableCell
                      numeric
                      align="right"
                      className={classes.cell}
                    >
                      {n.calories}
                    </StyledTableCell>
                  </StickyTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.fat}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.carbs}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.protein}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.calories}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.fat}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.carbs}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.protein}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.calories}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.fat}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.carbs}
                  </StyledTableCell>
                  <StyledTableCell
                    numeric
                    align="center"
                    className={classes.cell}
                  >
                    {n.protein}
                  </StyledTableCell>
                </StyledTableRow>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

We call makeStyles with a function that returns some styles for various parts of the table.

Next, we call withStyles with a function with the styles for the cells.

We set the position CSS property to 'sticky' to make the component that we apply the styles to sticky.

Then we call the returned higher order component with TableCell and assign the returned component to StickyTableCell.

Similarly, we call withStyles with TableCell again and TableRow to return styled table cells and table row components.

Next, in App, we call the useStyles hook to return the classes object.

And we apply the styles that we added with makeStyles to various components.

We add the stickyHeader to Table to make the table header row sticky.

And then we use the StickyTableCell we created earlier to add sticky columns.

As a result, we see that the header row of the table and the leftmost 2 columns of the table being sticky.

Conclusion

To make React Material UI table row and columns sticky, we can add our own styles to the existing table cell components and return the new component with the styles.

Sometimes, we want to fix the custom color to Badge component not working with React Material UI.

In this article, we’ll look at how to fix the custom color to Badge component not working with React Material UI.

How to fix the custom color to Badge component not working with React Material UI?

To fix the custom color to Badge component not working with React Material UI, we can use the styled function to create a badge component with custom styling.

For instance, we write:

import React from "react";
import Badge from "@material-ui/core/Badge";
import MailIcon from "@material-ui/icons/Mail";
import { styled } from "@material-ui/core";

const StyledBadge = styled(Badge)({
  "& .MuiBadge-badge": {
    color: "yellow",
    backgroundColor: "green"
  }
});

export default function App() {
  return (
    <StyledBadge badgeContent={130}>
      <MailIcon />
    </StyledBadge>
  );
}

We call styled with Badge to return a function that we call with an object that has the custom badge styles.

We select the badge with the "& .MuiBadge-badge" selector.

And we set the color to 'yellow' and backgroundColor to 'green'.

Finally, we use the StyledBadge component that’s returned by styled with the badgeContent prop to add content into the badge.

And we should see that the badge text is yellow and the badge background is green.

Conclusion

To fix the custom color to Badge component not working with React Material UI, we can use the styled function to create a badge component with custom styling.

Sometimes, we want to remove underline from input component with React Material UI.

In this article, we’ll look at how to remove underline from input component with React Material UI.

How to remove underline from input component with React Material UI?

To remove underline from input component with React Material UI, we can set the disableUnderline prop to true.

For instance, we write:

import React from "react";
import Input from "@material-ui/core/Input";

export default function App() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Input
      disableUnderline
      value={age}
      onChange={handleChange}
      placeholder="age"
    />
  );
}

to add the disableUnderline to the Input component.

As a result, we wouldn’t see the underline of the input now.

Conclusion

To remove underline from input component with React Material UI, we can set the disableUnderline prop to true.

Sometimes, we want to change the dropdown icon in React Material UI select field.

In this article, we’ll look at how to change the dropdown icon in React Material UI select field.

How to change the dropdown icon in React Material UI select field?

To change the dropdown icon in React Material UI select field, we can set the IconComponent prop to a function that returns the icon component we want to render.

For instance, we write:

import React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Person from "@material-ui/icons/Person";

export default function App() {
  const [age, setAge] = React.useState("");

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Select
      value={age}
      onChange={handleChange}
      IconComponent={() => <Person />}
    >
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  );
}

We set the Select‘s IconComponent prop to a function that returns the Person icon component.

And we add some MenuItem components to add some choices.

Now we should see the person icon as the drop down’s icon on the right.

Conclusion

To change the dropdown icon in React Material UI select field, we can set the IconComponent prop to a function that returns the icon component we want to render.

Sometimes, we want to change the height of the drawer with React Material UI.

In this article, we’ll look at how to change the height of the drawer with React Material UI.

How to change the height of the drawer with React Material UI?

To change the height of the drawer with React Material UI, we can set the PaperProps prop to an object with the style property.

For instance, we write:

import React from "react";
import Drawer from "@material-ui/core/Drawer";
import MenuItem from "@material-ui/core/MenuItem";

export default function App() {
  return (
    <Drawer open PaperProps={{ style: { height: "90vh" } }}>
      <MenuItem>Menu Item</MenuItem>
      <MenuItem>Menu Item 2</MenuItem>
    </Drawer>
  );
}

We add the drawer by adding the Drawer component.

Then we set the PaperProps prop to { style: { height: "90vh" } } to set the drawer’s height to 90vh.

Finally, we add some MenuItems in the Drawer to add some content into the drawer.

Conclusion

To change the height of the drawer with React Material UI, we can set the PaperProps prop to an object with the style property.