CODEWITHSUNDEEP
reactjsmaterial-ui
sin0x1
sin0x1

Reputation: 125

Drawing a left Border for the whole border in material ui Tables

I am trying to handle a table where I should have 2 rows in the header. Each cell in the first header should have children's in the second row (in the header ). My design so far doesn't clearly display the data for each column. I need to draw a left border for each column. I am not sure how to do so.

Here is my code (CodeSandBox)

const useStyles = makeStyles({
  table: {
    minWidth: 650
  }
});

<TableContainer component={Paper}>
  <Table className={classes.table} aria-label="simple table">
    <TableHead>
      <TableRow>
        <TableCell align="center" colSpan={5}>
          MRF
        </TableCell>
        <TableCell align="center" colSpan={1}>
          AD
        </TableCell>
        {/* <TableCell align="center" colSpan={4}>Incinerator</TableCell>
        <TableCell align="center" colSpan={4}>Landfill</TableCell>
        <TableCell align="center" colSpan={4}>Market</TableCell> */}
      </TableRow>
      <TableRow>
        <TableCell>Paper</TableCell>
        <TableCell align="right">Plastic</TableCell>
        <TableCell align="right">Glass</TableCell>
        <TableCell align="right">Metals</TableCell>
        <TableCell align="right">Metals</TableCell>
        <TableCell align="right">Food</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell colSpan={2}>Data Two Columns</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableContainer>

Expected Results: result

Upvotes: 1

Views: 18549

Answers (2)

imran haider
imran haider

Reputation: 343

Anyone trying to use it with styled-components, here is the styling

const BorderedTD = styled(TableCell)`
  &.MuiTableCell-root {
    border: 1px solid #000;
    font-weight: bold;
  }
`;

Upvotes: 2

95faf8e76605e973
95faf8e76605e973

Reputation: 14201

If you inspect the table in dev tools, you will see that this is the border that is used in the table: 1px solid rgba(224, 224, 224, 1). So just add that on your styles as the left border for the cells

const useStyles = makeStyles({
  table: {
    minWidth: 650,
    "& .MuiTableCell-root": {
      borderLeft: "1px solid rgba(224, 224, 224, 1)"
    }
  }
});

Regarding the alignment, keep consistent with align="center"

Edit ecstatic-chatterjee-1lkpc

Upvotes: 9

Related Questions