how to change height of a tableRow in mui?

Issue

I have a table component that i wrote it with the usage of Mui. I want to change the height of tableRows but i can't find the way to do it. I tried diffrent ways but I cant find the solution. here is my component:

import React, { memo } from "react";
import {
  ActionItemType,
  ActionsType,
  TableHeadItemType,
} from "./table-head.interface";
import {
  IconButton,
  TableCell,
  TableRow as MuiTableRow,
  Tooltip,
} from "@mui/material";
import { NavLink } from "react-router-dom";

interface ActionItemProps {
  action: ActionItemType;
  row: { [key: string]: any };
}

const ActionItem: React.FC<ActionItemProps> = memo(({ action, row }) => {
  return action?.onClick ? (
    <Tooltip key={action.id} title={action.label}>
      <IconButton
        aria-label={action.id}
        onClick={() => (action?.onClick ? action.onClick(row) : null)}
      >
        {action.icon}
      </IconButton>
    </Tooltip>
  ) : action?.href ? (
    <Tooltip key={action.id} title={action.label}>
      <NavLink
        to={typeof action.href === "function" ? action.href(row) : action.href}
      >
        {action.icon}
      </NavLink>
    </Tooltip>
  ) : null;
});

interface ItemProps {
  head: TableHeadItemType[];
  row: { [key: string]: any };
  actions?: ActionsType;
}

const TableRow: React.FC<ItemProps> = ({ row, head, actions }) => (
  <MuiTableRow sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
    {head.map((th) => (
      <TableCell
        key={th.id}
        align={th.align ? th.align : "center"}
        className="text-xs"
        size="small"
      >
        {th.render
          ? th.render(row[th.id.toString()], row)
          : row[th.id.toString()]}
      </TableCell>
    ))}
    {actions && actions.length > 0 && (
      <TableCell align="center">
        {actions.map((action) => (
          <ActionItem key={action.id} action={action} row={row} />
        ))}
      </TableCell>
    )}
  </MuiTableRow>
);

interface Props {
  rows: { [key: string]: any };
  head: TableHeadItemType[];
  actions?: ActionsType;
}

const TableRows: React.FC<Props> = ({ actions, head, rows }) => (
  <>
    {rows.map((row: any) => (
      <TableRow key={row.id} head={head} row={row} actions={actions} />
    ))}
  </>
);

export default TableRows;

here is my code. I tried to add height to MuiTableRow like sx={{height: "10px"}} and also I tried to add the height to TableCells but both ways didn't work.

Solution

Customizing CSS in tables can be kind of tricky. I was able to have the cells be smaller by targeting the specific css class in the sx prop. The reason why I think your cells weren't shrinking is that MUI's table has padding by default. That may have been interfering with your height styling. Like this:

<TableRow
   key={row.name}
   sx={{ 
       '& .MuiTableCell-root': {
           height: '10px',
           padding: '0'
        },
        '&:last-child td, &:last-child th': {
           border: 0 
        }
   }}
>
   <TableCell component="th" scope="row">{row.name}</TableCell>
   <TableCell align="right">{row.calories}</TableCell>
   <TableCell align="right">{row.fat}</TableCell>
   <TableCell align="right">{row.carbs}</TableCell>
   <TableCell align="right">{row.protein}</TableCell>
</TableRow>

I'm attaching a screenshot where I'm adjusting the css of the cells using the class .MuiTableCell-root and you can see how the MUI table is reacting.

Answered By - Derek Glassick