Material-UI Tables

Our Material-ui Tables are designed to be opt-in due to the widespread use of tables across third-party widgets like calendars and date pickers.
Keep reading some Material-ui Tables examples to see how these tables work.

Examples

Project Budget Status Users Completion
Image placeholder
Argon Design System
$2500 USD pending
Image placeholder Image placeholder Image placeholder Image placeholder
60%
Action Another action Something else here
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
Image placeholder Image placeholder Image placeholder Image placeholder
100%
Action Another action Something else here
Image placeholder
Black Dashboard
$3150 USD delayed
Image placeholder Image placeholder Image placeholder Image placeholder
72%
Action Another action Something else here
Image placeholder
React Material Dashboard
$4400 USD on schedule
Image placeholder Image placeholder Image placeholder Image placeholder
90%
Action Another action Something else here
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
Image placeholder Image placeholder Image placeholder Image placeholder
100%
Action Another action Something else here
Image placeholder
Argon Design System
$2500 USD pending
Image placeholder Image placeholder Image placeholder Image placeholder
60%
Action Another action Something else here
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
Image placeholder Image placeholder Image placeholder Image placeholder
100%
Action Another action Something else here
Image placeholder
Black Dashboard
$3150 USD delayed
Image placeholder Image placeholder Image placeholder Image placeholder
72%
Action Another action Something else here
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
Image placeholder Image placeholder Image placeholder Image placeholder
100%
Action Another action Something else here
Image placeholder
Black Dashboard
$3150 USD delayed
Image placeholder Image placeholder Image placeholder Image placeholder
72%
Action Another action Something else here
Image placeholder
React Material Dashboard
$4400 USD on schedule
Image placeholder Image placeholder Image placeholder Image placeholder
90%
Action Another action Something else here 
import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import LinearProgress from "@material-ui/core/LinearProgress";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Tooltip from "@material-ui/core/Tooltip";
// @material-ui/lab components
import AvatarGroup from "@material-ui/lab/AvatarGroup";
// @material-ui/icons components
import MoreVert from "@material-ui/icons/MoreVert";

// core components

import componentStyles from "assets/theme/views/admin/tables.js";

const useStyles = makeStyles(componentStyles);

const Example = () => {
  const classes = useStyles();
  const theme = useTheme();
  const [anchorEl1, setAnchorEl1] = React.useState(null);
  const [anchorEl2, setAnchorEl2] = React.useState(null);
  const [anchorEl3, setAnchorEl3] = React.useState(null);
  const [anchorEl4, setAnchorEl4] = React.useState(null);
  const [anchorEl5, setAnchorEl5] = React.useState(null);
  const handleClick = (event) => {
    switch (event.currentTarget.getAttribute("aria-controls")) {
      case "simple-menu-1":
        setAnchorEl1(event.currentTarget);
        break;
      case "simple-menu-2":
        setAnchorEl2(event.currentTarget);
        break;
      case "simple-menu-3":
        setAnchorEl3(event.currentTarget);
        break;
      case "simple-menu-4":
        setAnchorEl4(event.currentTarget);
        break;
      case "simple-menu-5":
        setAnchorEl5(event.currentTarget);
        break;
      default:
    }
  };
  const handleClose = () => {
    setAnchorEl1(null);
    setAnchorEl2(null);
    setAnchorEl3(null);
    setAnchorEl4(null);
    setAnchorEl5(null);
  };
  const tableCellHeadTableHeadClassesObj = {
    root: classes.tableCellRoot + " " + classes.tableCellRootHead,
  };
  const tableCellBodyTableHeadClassesObj = {
    root: classes.tableCellRoot + " " + classes.tableCellRootBodyHead,
  };
  const tableCellBodyTableCellClassesObjs = {
    root: classes.tableCellRoot,
  };
  const avatarRootClasses = {
    root: classes.avatarRoot,
  };
  const linearProgressRootBgGradientError = {
    root: classes.linearProgressRoot,
    bar: classes.bgGradientError,
  };
  const linearProgressRootBgGradientSuccess = {
    root: classes.linearProgressRoot,
    bar: classes.bgGradientSuccess,
  };
  const linearProgressRootBgGradientInfo = {
    root: classes.linearProgressRoot,
    bar: classes.bgGradientInfo,
  };
  return (
    <>
      <TableContainer>
        <Box component={Table} alignItems="center" marginBottom="0!important">
          <TableHead>
            <TableRow>
              <TableCell classes={tableCellHeadTableHeadClassesObj}>
                Project
              </TableCell>
              <TableCell classes={tableCellHeadTableHeadClassesObj}>
                Budget
              </TableCell>
              <TableCell classes={tableCellHeadTableHeadClassesObj}>
                Status
              </TableCell>
              <TableCell classes={tableCellHeadTableHeadClassesObj}>
                Users
              </TableCell>
              <TableCell classes={tableCellHeadTableHeadClassesObj}>
                Completion
              </TableCell>
              <TableCell classes={tableCellHeadTableHeadClassesObj}></TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              <TableCell
                classes={tableCellBodyTableHeadClassesObj}
                component="th"
                variant="head"
                scope="row"
              >
                <Box alignItems="center" display="flex">
                  <Box
                    component={Avatar}
                    marginRight="1rem"
                    alt="..."
                    src={require("assets/img/theme/bootstrap.jpg").default}
                  />
                  <Box display="flex" alignItems="flex-start">
                    <Box fontSize=".875rem" component="span">
                      Argon Design System
                    </Box>
                  </Box>
                </Box>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                $2,500 USD
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <Box paddingTop=".35rem" paddingBottom=".35rem">
                  <Box
                    marginRight="10px"
                    component="i"
                    width=".375rem"
                    height=".375rem"
                    borderRadius="50%"
                    display="inline-block"
                    className={
                      classes.verticalAlignMiddle + " " + classes.bgWarning
                    }
                  ></Box>
                  pending
                </Box>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <AvatarGroup>
                  <Tooltip title="Ryan Tompson" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-1-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Romina Hadid" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-2-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Alexander Smith" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-3-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Jessica Doe" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-4-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                </AvatarGroup>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <Box display="flex" alignItems="center">
                  <Box component="span" marginRight=".5rem">
                    60%
                  </Box>
                  <Box width="100%">
                    <LinearProgress
                      variant="determinate"
                      value={60}
                      classes={linearProgressRootBgGradientError}
                    />
                  </Box>
                </Box>
              </TableCell>
              <TableCell
                classes={tableCellBodyTableCellClassesObjs}
                align="right"
              >
                <Box
                  aria-controls="simple-menu-1"
                  aria-haspopup="true"
                  onClick={handleClick}
                  size="small"
                  component={Button}
                  width="2rem!important"
                  height="2rem!important"
                  minWidth="2rem!important"
                  minHeight="2rem!important"
                >
                  <Box
                    component={MoreVert}
                    width="1.25rem!important"
                    height="1.25rem!important"
                    position="relative"
                    top="2px"
                    color={theme.palette.gray[500]}
                  />
                </Box>
                <Menu
                  id="simple-menu-1"
                  anchorEl={anchorEl1}
                  keepMounted
                  open={Boolean(anchorEl1)}
                  onClose={handleClose}
                >
                  <MenuItem onClick={handleClose}>Action</MenuItem>
                  <MenuItem onClick={handleClose}>Another action</MenuItem>
                  <MenuItem onClick={handleClose}>Something else here</MenuItem>
                </Menu>
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                classes={tableCellBodyTableHeadClassesObj}
                component="th"
                variant="head"
                scope="row"
              >
                <Box alignItems="center" display="flex">
                  <Box
                    component={Avatar}
                    marginRight="1rem"
                    alt="..."
                    src={require("assets/img/theme/angular.jpg").default}
                  />
                  <Box display="flex" alignItems="flex-start">
                    <Box fontSize=".875rem" component="span">
                      Angular Now UI Kit PRO
                    </Box>
                  </Box>
                </Box>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                $1,800 USD
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <Box paddingTop=".35rem" paddingBottom=".35rem">
                  <Box
                    marginRight="10px"
                    component="i"
                    width=".375rem"
                    height=".375rem"
                    borderRadius="50%"
                    display="inline-block"
                    className={
                      classes.verticalAlignMiddle + " " + classes.bgSuccess
                    }
                  ></Box>
                  completed
                </Box>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <AvatarGroup>
                  <Tooltip title="Ryan Tompson" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-1-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Romina Hadid" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-2-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Alexander Smith" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-3-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Jessica Doe" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-4-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                </AvatarGroup>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <Box display="flex" alignItems="center">
                  <Box component="span" marginRight=".5rem">
                    100%
                  </Box>
                  <Box width="100%">
                    <LinearProgress
                      variant="determinate"
                      value={100}
                      classes={linearProgressRootBgGradientSuccess}
                    />
                  </Box>
                </Box>
              </TableCell>
              <TableCell
                classes={tableCellBodyTableCellClassesObjs}
                align="right"
              >
                <Box
                  aria-controls="simple-menu-2"
                  aria-haspopup="true"
                  onClick={handleClick}
                  size="small"
                  component={Button}
                  width="2rem!important"
                  height="2rem!important"
                  minWidth="2rem!important"
                  minHeight="2rem!important"
                >
                  <Box
                    component={MoreVert}
                    width="1.25rem!important"
                    height="1.25rem!important"
                    position="relative"
                    top="2px"
                    color={theme.palette.gray[500]}
                  />
                </Box>
                <Menu
                  id="simple-menu-2"
                  anchorEl={anchorEl2}
                  keepMounted
                  open={Boolean(anchorEl2)}
                  onClose={handleClose}
                >
                  <MenuItem onClick={handleClose}>Action</MenuItem>
                  <MenuItem onClick={handleClose}>Another action</MenuItem>
                  <MenuItem onClick={handleClose}>Something else here</MenuItem>
                </Menu>
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                classes={tableCellBodyTableHeadClassesObj}
                component="th"
                variant="head"
                scope="row"
              >
                <Box alignItems="center" display="flex">
                  <Box
                    component={Avatar}
                    marginRight="1rem"
                    alt="..."
                    src={require("assets/img/theme/sketch.jpg").default}
                  />
                  <Box display="flex" alignItems="flex-start">
                    <Box fontSize=".875rem" component="span">
                      Black Dashboard
                    </Box>
                  </Box>
                </Box>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                $3,150 USD
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <Box paddingTop=".35rem" paddingBottom=".35rem">
                  <Box
                    marginRight="10px"
                    component="i"
                    width=".375rem"
                    height=".375rem"
                    borderRadius="50%"
                    display="inline-block"
                    className={
                      classes.verticalAlignMiddle + " " + classes.bgError
                    }
                  ></Box>
                  delayed
                </Box>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <AvatarGroup>
                  <Tooltip title="Ryan Tompson" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-1-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Romina Hadid" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-2-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Alexander Smith" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-3-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Jessica Doe" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-4-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                </AvatarGroup>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <Box display="flex" alignItems="center">
                  <Box component="span" marginRight=".5rem">
                    72%
                  </Box>
                  <Box width="100%">
                    <LinearProgress
                      variant="determinate"
                      value={72}
                      classes={linearProgressRootBgGradientError}
                    />
                  </Box>
                </Box>
              </TableCell>
              <TableCell
                classes={tableCellBodyTableCellClassesObjs}
                align="right"
              >
                <Box
                  aria-controls="simple-menu-3"
                  aria-haspopup="true"
                  onClick={handleClick}
                  size="small"
                  component={Button}
                  width="2rem!important"
                  height="2rem!important"
                  minWidth="2rem!important"
                  minHeight="2rem!important"
                >
                  <Box
                    component={MoreVert}
                    width="1.25rem!important"
                    height="1.25rem!important"
                    position="relative"
                    top="2px"
                    color={theme.palette.gray[500]}
                  />
                </Box>
                <Menu
                  id="simple-menu-3"
                  anchorEl={anchorEl3}
                  keepMounted
                  open={Boolean(anchorEl3)}
                  onClose={handleClose}
                >
                  <MenuItem onClick={handleClose}>Action</MenuItem>
                  <MenuItem onClick={handleClose}>Another action</MenuItem>
                  <MenuItem onClick={handleClose}>Something else here</MenuItem>
                </Menu>
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                classes={tableCellBodyTableHeadClassesObj}
                component="th"
                variant="head"
                scope="row"
              >
                <Box alignItems="center" display="flex">
                  <Box
                    component={Avatar}
                    marginRight="1rem"
                    alt="..."
                    src={require("assets/img/theme/react.jpg").default}
                  />
                  <Box display="flex" alignItems="flex-start">
                    <Box fontSize=".875rem" component="span">
                      React Material Dashboard
                    </Box>
                  </Box>
                </Box>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                $4,400 USD
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <Box paddingTop=".35rem" paddingBottom=".35rem">
                  <Box
                    marginRight="10px"
                    component="i"
                    width=".375rem"
                    height=".375rem"
                    borderRadius="50%"
                    display="inline-block"
                    className={
                      classes.verticalAlignMiddle + " " + classes.bgInfo
                    }
                  ></Box>
                  on schedule
                </Box>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <AvatarGroup>
                  <Tooltip title="Ryan Tompson" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-1-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Romina Hadid" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-2-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Alexander Smith" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-3-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Jessica Doe" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-4-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                </AvatarGroup>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <Box display="flex" alignItems="center">
                  <Box component="span" marginRight=".5rem">
                    90%
                  </Box>
                  <Box width="100%">
                    <LinearProgress
                      variant="determinate"
                      value={90}
                      classes={linearProgressRootBgGradientInfo}
                    />
                  </Box>
                </Box>
              </TableCell>
              <TableCell
                classes={tableCellBodyTableCellClassesObjs}
                align="right"
              >
                <Box
                  aria-controls="simple-menu-4"
                  aria-haspopup="true"
                  onClick={handleClick}
                  size="small"
                  component={Button}
                  width="2rem!important"
                  height="2rem!important"
                  minWidth="2rem!important"
                  minHeight="2rem!important"
                >
                  <Box
                    component={MoreVert}
                    width="1.25rem!important"
                    height="1.25rem!important"
                    position="relative"
                    top="2px"
                    color={theme.palette.gray[500]}
                  />
                </Box>
                <Menu
                  id="simple-menu-4"
                  anchorEl={anchorEl4}
                  keepMounted
                  open={Boolean(anchorEl4)}
                  onClose={handleClose}
                >
                  <MenuItem onClick={handleClose}>Action</MenuItem>
                  <MenuItem onClick={handleClose}>Another action</MenuItem>
                  <MenuItem onClick={handleClose}>Something else here</MenuItem>
                </Menu>
              </TableCell>
            </TableRow>
            <TableRow>
              <TableCell
                classes={tableCellBodyTableHeadClassesObj}
                component="th"
                variant="head"
                scope="row"
              >
                <Box alignItems="center" display="flex">
                  <Box
                    component={Avatar}
                    marginRight="1rem"
                    alt="..."
                    src={require("assets/img/theme/vue.jpg").default}
                  />
                  <Box display="flex" alignItems="flex-start">
                    <Box fontSize=".875rem" component="span">
                      Vue Paper UI Kit PRO
                    </Box>
                  </Box>
                </Box>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                $2,200 USD
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <Box paddingTop=".35rem" paddingBottom=".35rem">
                  <Box
                    marginRight="10px"
                    component="i"
                    width=".375rem"
                    height=".375rem"
                    borderRadius="50%"
                    display="inline-block"
                    className={
                      classes.verticalAlignMiddle + " " + classes.bgSuccess
                    }
                  ></Box>
                  completed
                </Box>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <AvatarGroup>
                  <Tooltip title="Ryan Tompson" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-1-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Romina Hadid" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-2-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Alexander Smith" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-3-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                  <Tooltip title="Jessica Doe" placement="top">
                    <Avatar
                      classes={avatarRootClasses}
                      alt="..."
                      src={
                        require("assets/img/theme/team-4-800x800.jpg").default
                      }
                    />
                  </Tooltip>
                </AvatarGroup>
              </TableCell>
              <TableCell classes={tableCellBodyTableCellClassesObjs}>
                <Box display="flex" alignItems="center">
                  <Box component="span" marginRight=".5rem">
                    100%
                  </Box>
                  <Box width="100%">
                    <LinearProgress
                      variant="determinate"
                      value={100}
                      classes={linearProgressRootBgGradientSuccess}
                    />
                  </Box>
                </Box>
              </TableCell>
              <TableCell
                classes={tableCellBodyTableCellClassesObjs}
                align="right"
              >
                <Box
                  aria-controls="simple-menu-5"
                  aria-haspopup="true"
                  onClick={handleClick}
                  size="small"
                  component={Button}
                  width="2rem!important"
                  height="2rem!important"
                  minWidth="2rem!important"
                  minHeight="2rem!important"
                >
                  <Box
                    component={MoreVert}
                    width="1.25rem!important"
                    height="1.25rem!important"
                    position="relative"
                    top="2px"
                    color={theme.palette.gray[500]}
                  />
                </Box>
                <Menu
                  id="simple-menu-5"
                  anchorEl={anchorEl5}
                  keepMounted
                  open={Boolean(anchorEl5)}
                  onClose={handleClose}
                >
                  <MenuItem onClick={handleClose}>Action</MenuItem>
                  <MenuItem onClick={handleClose}>Another action</MenuItem>
                  <MenuItem onClick={handleClose}>Something else here</MenuItem>
                </Menu>
              </TableCell>
            </TableRow>
          </TableBody>
        </Box>
      </TableContainer>
    </>
  );
};

export default Example;

Dark Tables Example

Project Budget Status Users Completion
Image placeholder
Argon Design System
$2500 USD pending
Image placeholder Image placeholder Image placeholder Image placeholder
60%
Action Another action Something else here
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
Image placeholder Image placeholder Image placeholder Image placeholder
100%
Action Another action Something else here
Image placeholder
Black Dashboard
$3150 USD delayed
Image placeholder Image placeholder Image placeholder Image placeholder
72%
Action Another action Something else here
Image placeholder
React Material Dashboard
$4400 USD on schedule
Image placeholder Image placeholder Image placeholder Image placeholder
90%
Action Another action Something else here
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
Image placeholder Image placeholder Image placeholder Image placeholder
100%
Action Another action Something else here
Image placeholder
Argon Design System
$2500 USD pending
Image placeholder Image placeholder Image placeholder Image placeholder
60%
Action Another action Something else here
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
Image placeholder Image placeholder Image placeholder Image placeholder
100%
Action Another action Something else here
Image placeholder
Black Dashboard
$3150 USD delayed
Image placeholder Image placeholder Image placeholder Image placeholder
72%
Action Another action Something else here
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
Image placeholder Image placeholder Image placeholder Image placeholder
100%
Action Another action Something else here
Image placeholder
Black Dashboard
$3150 USD delayed
Image placeholder Image placeholder Image placeholder Image placeholder
72%
Action Another action Something else here
Image placeholder
React Material Dashboard
$4400 USD on schedule
Image placeholder Image placeholder Image placeholder Image placeholder
90%
Action Another action Something else here 
import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import LinearProgress from "@material-ui/core/LinearProgress";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Tooltip from "@material-ui/core/Tooltip";
// @material-ui/lab components
import AvatarGroup from "@material-ui/lab/AvatarGroup";
// @material-ui/icons components
import MoreVert from "@material-ui/icons/MoreVert";

// core components

import componentStyles from "assets/theme/views/admin/tables.js";

const useStyles = makeStyles(componentStyles);

const Example = () => {
  const classes = useStyles();
  const theme = useTheme();
  const [anchorEl1, setAnchorEl1] = React.useState(null);
  const [anchorEl2, setAnchorEl2] = React.useState(null);
  const [anchorEl3, setAnchorEl3] = React.useState(null);
  const [anchorEl4, setAnchorEl4] = React.useState(null);
  const [anchorEl5, setAnchorEl5] = React.useState(null);
  const handleClick = (event) => {
    switch (event.currentTarget.getAttribute("aria-controls")) {
      case "simple-menu-1":
        setAnchorEl1(event.currentTarget);
        break;
      case "simple-menu-2":
        setAnchorEl2(event.currentTarget);
        break;
      case "simple-menu-3":
        setAnchorEl3(event.currentTarget);
        break;
      case "simple-menu-4":
        setAnchorEl4(event.currentTarget);
        break;
      case "simple-menu-5":
        setAnchorEl5(event.currentTarget);
        break;
      default:
    }
  };
  const handleClose = () => {
    setAnchorEl1(null);
    setAnchorEl2(null);
    setAnchorEl3(null);
    setAnchorEl4(null);
    setAnchorEl5(null);
  };
  const tableCellHeadTableHeadClassesObj = {
    root: classes.tableCellRoot + " " + classes.tableCellRootHead,
  };
  const tableCellBodyTableHeadClassesObj = {
    root: classes.tableCellRoot + " " + classes.tableCellRootBodyHead,
  };
  const tableCellBodyTableCellClassesObjs = {
    root: classes.tableCellRoot,
  };
  const avatarRootClasses = {
    root: classes.avatarRoot,
  };
  const linearProgressRootBgGradientError = {
    root: classes.linearProgressRoot,
    bar: classes.bgGradientError,
  };
  const linearProgressRootBgGradientSuccess = {
    root: classes.linearProgressRoot,
    bar: classes.bgGradientSuccess,
  };
  const linearProgressRootBgGradientInfo = {
    root: classes.linearProgressRoot,
    bar: classes.bgGradientInfo,
  };
  const cardClassesObj = {
    root: classes.cardRoot + " " + classes.cardRootDark,
  };
  return (
    <>
      <Box component={Card} marginTop="3rem" classes={cardClassesObj}>
        <TableContainer>
          <Box component={Table} alignItems="center" marginBottom="0!important">
            <TableHead>
              <TableRow>
                <TableCell classes={tableCellHeadTableHeadClassesObj}>
                  Project
                </TableCell>
                <TableCell classes={tableCellHeadTableHeadClassesObj}>
                  Budget
                </TableCell>
                <TableCell classes={tableCellHeadTableHeadClassesObj}>
                  Status
                </TableCell>
                <TableCell classes={tableCellHeadTableHeadClassesObj}>
                  Users
                </TableCell>
                <TableCell classes={tableCellHeadTableHeadClassesObj}>
                  Completion
                </TableCell>
                <TableCell
                  classes={tableCellHeadTableHeadClassesObj}
                ></TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              <TableRow>
                <TableCell
                  classes={tableCellBodyTableHeadClassesObj}
                  component="th"
                  variant="head"
                  scope="row"
                >
                  <Box alignItems="center" display="flex">
                    <Box
                      component={Avatar}
                      marginRight="1rem"
                      alt="..."
                      src={require("assets/img/theme/bootstrap.jpg").default}
                    />
                    <Box display="flex" alignItems="flex-start">
                      <Box fontSize=".875rem" component="span">
                        Argon Design System
                      </Box>
                    </Box>
                  </Box>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  $2,500 USD
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <Box paddingTop=".35rem" paddingBottom=".35rem">
                    <Box
                      marginRight="10px"
                      component="i"
                      width=".375rem"
                      height=".375rem"
                      borderRadius="50%"
                      display="inline-block"
                      className={
                        classes.verticalAlignMiddle + " " + classes.bgWarning
                      }
                    ></Box>
                    pending
                  </Box>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <AvatarGroup>
                    <Tooltip title="Ryan Tompson" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-1-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Romina Hadid" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-2-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Alexander Smith" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-3-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Jessica Doe" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-4-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                  </AvatarGroup>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <Box display="flex" alignItems="center">
                    <Box component="span" marginRight=".5rem">
                      60%
                    </Box>
                    <Box width="100%">
                      <LinearProgress
                        variant="determinate"
                        value={60}
                        classes={linearProgressRootBgGradientError}
                      />
                    </Box>
                  </Box>
                </TableCell>
                <TableCell
                  classes={tableCellBodyTableCellClassesObjs}
                  align="right"
                >
                  <Box
                    aria-controls="simple-menu-1"
                    aria-haspopup="true"
                    onClick={handleClick}
                    size="small"
                    component={Button}
                    width="2rem!important"
                    height="2rem!important"
                    minWidth="2rem!important"
                    minHeight="2rem!important"
                  >
                    <Box
                      component={MoreVert}
                      width="1.25rem!important"
                      height="1.25rem!important"
                      position="relative"
                      top="2px"
                      color={theme.palette.gray[500]}
                    />
                  </Box>
                  <Menu
                    id="simple-menu-1"
                    anchorEl={anchorEl1}
                    keepMounted
                    open={Boolean(anchorEl1)}
                    onClose={handleClose}
                  >
                    <MenuItem onClick={handleClose}>Action</MenuItem>
                    <MenuItem onClick={handleClose}>Another action</MenuItem>
                    <MenuItem onClick={handleClose}>
                      Something else here
                    </MenuItem>
                  </Menu>
                </TableCell>
              </TableRow>
              <TableRow>
                <TableCell
                  classes={tableCellBodyTableHeadClassesObj}
                  component="th"
                  variant="head"
                  scope="row"
                >
                  <Box alignItems="center" display="flex">
                    <Box
                      component={Avatar}
                      marginRight="1rem"
                      alt="..."
                      src={require("assets/img/theme/angular.jpg").default}
                    />
                    <Box display="flex" alignItems="flex-start">
                      <Box fontSize=".875rem" component="span">
                        Angular Now UI Kit PRO
                      </Box>
                    </Box>
                  </Box>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  $1,800 USD
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <Box paddingTop=".35rem" paddingBottom=".35rem">
                    <Box
                      marginRight="10px"
                      component="i"
                      width=".375rem"
                      height=".375rem"
                      borderRadius="50%"
                      display="inline-block"
                      className={
                        classes.verticalAlignMiddle + " " + classes.bgSuccess
                      }
                    ></Box>
                    completed
                  </Box>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <AvatarGroup>
                    <Tooltip title="Ryan Tompson" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-1-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Romina Hadid" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-2-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Alexander Smith" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-3-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Jessica Doe" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-4-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                  </AvatarGroup>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <Box display="flex" alignItems="center">
                    <Box component="span" marginRight=".5rem">
                      100%
                    </Box>
                    <Box width="100%">
                      <LinearProgress
                        variant="determinate"
                        value={100}
                        classes={linearProgressRootBgGradientSuccess}
                      />
                    </Box>
                  </Box>
                </TableCell>
                <TableCell
                  classes={tableCellBodyTableCellClassesObjs}
                  align="right"
                >
                  <Box
                    aria-controls="simple-menu-2"
                    aria-haspopup="true"
                    onClick={handleClick}
                    size="small"
                    component={Button}
                    width="2rem!important"
                    height="2rem!important"
                    minWidth="2rem!important"
                    minHeight="2rem!important"
                  >
                    <Box
                      component={MoreVert}
                      width="1.25rem!important"
                      height="1.25rem!important"
                      position="relative"
                      top="2px"
                      color={theme.palette.gray[500]}
                    />
                  </Box>
                  <Menu
                    id="simple-menu-2"
                    anchorEl={anchorEl2}
                    keepMounted
                    open={Boolean(anchorEl2)}
                    onClose={handleClose}
                  >
                    <MenuItem onClick={handleClose}>Action</MenuItem>
                    <MenuItem onClick={handleClose}>Another action</MenuItem>
                    <MenuItem onClick={handleClose}>
                      Something else here
                    </MenuItem>
                  </Menu>
                </TableCell>
              </TableRow>
              <TableRow>
                <TableCell
                  classes={tableCellBodyTableHeadClassesObj}
                  component="th"
                  variant="head"
                  scope="row"
                >
                  <Box alignItems="center" display="flex">
                    <Box
                      component={Avatar}
                      marginRight="1rem"
                      alt="..."
                      src={require("assets/img/theme/sketch.jpg").default}
                    />
                    <Box display="flex" alignItems="flex-start">
                      <Box fontSize=".875rem" component="span">
                        Black Dashboard
                      </Box>
                    </Box>
                  </Box>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  $3,150 USD
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <Box paddingTop=".35rem" paddingBottom=".35rem">
                    <Box
                      marginRight="10px"
                      component="i"
                      width=".375rem"
                      height=".375rem"
                      borderRadius="50%"
                      display="inline-block"
                      className={
                        classes.verticalAlignMiddle + " " + classes.bgError
                      }
                    ></Box>
                    delayed
                  </Box>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <AvatarGroup>
                    <Tooltip title="Ryan Tompson" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-1-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Romina Hadid" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-2-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Alexander Smith" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-3-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Jessica Doe" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-4-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                  </AvatarGroup>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <Box display="flex" alignItems="center">
                    <Box component="span" marginRight=".5rem">
                      72%
                    </Box>
                    <Box width="100%">
                      <LinearProgress
                        variant="determinate"
                        value={72}
                        classes={linearProgressRootBgGradientError}
                      />
                    </Box>
                  </Box>
                </TableCell>
                <TableCell
                  classes={tableCellBodyTableCellClassesObjs}
                  align="right"
                >
                  <Box
                    aria-controls="simple-menu-3"
                    aria-haspopup="true"
                    onClick={handleClick}
                    size="small"
                    component={Button}
                    width="2rem!important"
                    height="2rem!important"
                    minWidth="2rem!important"
                    minHeight="2rem!important"
                  >
                    <Box
                      component={MoreVert}
                      width="1.25rem!important"
                      height="1.25rem!important"
                      position="relative"
                      top="2px"
                      color={theme.palette.gray[500]}
                    />
                  </Box>
                  <Menu
                    id="simple-menu-3"
                    anchorEl={anchorEl3}
                    keepMounted
                    open={Boolean(anchorEl3)}
                    onClose={handleClose}
                  >
                    <MenuItem onClick={handleClose}>Action</MenuItem>
                    <MenuItem onClick={handleClose}>Another action</MenuItem>
                    <MenuItem onClick={handleClose}>
                      Something else here
                    </MenuItem>
                  </Menu>
                </TableCell>
              </TableRow>
              <TableRow>
                <TableCell
                  classes={tableCellBodyTableHeadClassesObj}
                  component="th"
                  variant="head"
                  scope="row"
                >
                  <Box alignItems="center" display="flex">
                    <Box
                      component={Avatar}
                      marginRight="1rem"
                      alt="..."
                      src={require("assets/img/theme/react.jpg").default}
                    />
                    <Box display="flex" alignItems="flex-start">
                      <Box fontSize=".875rem" component="span">
                        React Material Dashboard
                      </Box>
                    </Box>
                  </Box>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  $4,400 USD
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <Box paddingTop=".35rem" paddingBottom=".35rem">
                    <Box
                      marginRight="10px"
                      component="i"
                      width=".375rem"
                      height=".375rem"
                      borderRadius="50%"
                      display="inline-block"
                      className={
                        classes.verticalAlignMiddle + " " + classes.bgInfo
                      }
                    ></Box>
                    on schedule
                  </Box>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <AvatarGroup>
                    <Tooltip title="Ryan Tompson" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-1-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Romina Hadid" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-2-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Alexander Smith" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-3-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Jessica Doe" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-4-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                  </AvatarGroup>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <Box display="flex" alignItems="center">
                    <Box component="span" marginRight=".5rem">
                      90%
                    </Box>
                    <Box width="100%">
                      <LinearProgress
                        variant="determinate"
                        value={90}
                        classes={linearProgressRootBgGradientInfo}
                      />
                    </Box>
                  </Box>
                </TableCell>
                <TableCell
                  classes={tableCellBodyTableCellClassesObjs}
                  align="right"
                >
                  <Box
                    aria-controls="simple-menu-4"
                    aria-haspopup="true"
                    onClick={handleClick}
                    size="small"
                    component={Button}
                    width="2rem!important"
                    height="2rem!important"
                    minWidth="2rem!important"
                    minHeight="2rem!important"
                  >
                    <Box
                      component={MoreVert}
                      width="1.25rem!important"
                      height="1.25rem!important"
                      position="relative"
                      top="2px"
                      color={theme.palette.gray[500]}
                    />
                  </Box>
                  <Menu
                    id="simple-menu-4"
                    anchorEl={anchorEl4}
                    keepMounted
                    open={Boolean(anchorEl4)}
                    onClose={handleClose}
                  >
                    <MenuItem onClick={handleClose}>Action</MenuItem>
                    <MenuItem onClick={handleClose}>Another action</MenuItem>
                    <MenuItem onClick={handleClose}>
                      Something else here
                    </MenuItem>
                  </Menu>
                </TableCell>
              </TableRow>
              <TableRow>
                <TableCell
                  classes={tableCellBodyTableHeadClassesObj}
                  component="th"
                  variant="head"
                  scope="row"
                >
                  <Box alignItems="center" display="flex">
                    <Box
                      component={Avatar}
                      marginRight="1rem"
                      alt="..."
                      src={require("assets/img/theme/vue.jpg").default}
                    />
                    <Box display="flex" alignItems="flex-start">
                      <Box fontSize=".875rem" component="span">
                        Vue Paper UI Kit PRO
                      </Box>
                    </Box>
                  </Box>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  $2,200 USD
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <Box paddingTop=".35rem" paddingBottom=".35rem">
                    <Box
                      marginRight="10px"
                      component="i"
                      width=".375rem"
                      height=".375rem"
                      borderRadius="50%"
                      display="inline-block"
                      className={
                        classes.verticalAlignMiddle + " " + classes.bgSuccess
                      }
                    ></Box>
                    completed
                  </Box>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <AvatarGroup>
                    <Tooltip title="Ryan Tompson" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-1-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Romina Hadid" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-2-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Alexander Smith" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-3-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                    <Tooltip title="Jessica Doe" placement="top">
                      <Avatar
                        classes={avatarRootClasses}
                        alt="..."
                        src={
                          require("assets/img/theme/team-4-800x800.jpg").default
                        }
                      />
                    </Tooltip>
                  </AvatarGroup>
                </TableCell>
                <TableCell classes={tableCellBodyTableCellClassesObjs}>
                  <Box display="flex" alignItems="center">
                    <Box component="span" marginRight=".5rem">
                      100%
                    </Box>
                    <Box width="100%">
                      <LinearProgress
                        variant="determinate"
                        value={100}
                        classes={linearProgressRootBgGradientSuccess}
                      />
                    </Box>
                  </Box>
                </TableCell>
                <TableCell
                  classes={tableCellBodyTableCellClassesObjs}
                  align="right"
                >
                  <Box
                    aria-controls="simple-menu-5"
                    aria-haspopup="true"
                    onClick={handleClick}
                    size="small"
                    component={Button}
                    width="2rem!important"
                    height="2rem!important"
                    minWidth="2rem!important"
                    minHeight="2rem!important"
                  >
                    <Box
                      component={MoreVert}
                      width="1.25rem!important"
                      height="1.25rem!important"
                      position="relative"
                      top="2px"
                      color={theme.palette.gray[500]}
                    />
                  </Box>
                  <Menu
                    id="simple-menu-5"
                    anchorEl={anchorEl5}
                    keepMounted
                    open={Boolean(anchorEl5)}
                    onClose={handleClose}
                  >
                    <MenuItem onClick={handleClose}>Action</MenuItem>
                    <MenuItem onClick={handleClose}>Another action</MenuItem>
                    <MenuItem onClick={handleClose}>
                      Something else here
                    </MenuItem>
                  </Menu>
                </TableCell>
              </TableRow>
            </TableBody>
          </Box>
        </TableContainer>
      </Box>
    </>
  );
};

export default Example;

Props

If you want to see more examples and properties please check the official Material-UI Documentation.