How can i add a vertical column divider in Material-ui table

user_13868683 0
Viewed 4255

I have created a table of given height (say 70vh). I want a vertical Column divider for the whole height of the table. I can add it using CSS for TableCell. But i want that the verticle column divider should be there even if i don't have any TableCell.

import React from "react";

//MUI Stuffs
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";

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";

const useStyles = makeStyles((theme) => ({
  tableContainer: {
    maxWidth: "150vh",
    margin: "auto",
    marginTop: "15vh",
    height: "70vh",
    background: "#ccffff",
    borderWidth: 2,
    borderColor: "black",
    borderStyle: "solid",
  },
  tableCell: {
    borderRightStyle: "solid",
    borderRightColor: "black",
  },
  tableHead: {
    borderBottomStyle: "solid",
    borderBottomColor: "blue",
    borderBottomWidth: 3,
  },
}));

function Canvas() {
  const classes = useStyles();
  const cols = ["Col1", "Col2", "Col3", "Col4", "Col5"];
  return (
    <TableContainer component={Paper} className={classes.tableContainer}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead className={classes.tableHead}>
          <TableRow>
            {cols.map((col) => (
              <TableCell align="center" className={classes.tableCell}>
                {col}
              </TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow></TableRow>
        </TableBody>
      </Table>
    </TableContainer>
  );
}

export default Canvas;

enter image description here

material-ui css html
1 Answers

I managed to do something like this by not using TableHeader: enter image description here

I added a height to table of 70vh so it's the same height as the container. Then I changed the display type of tableCell to be tableRowGroup which allows the columns to flexibly fill the available space. I've removed TableHead completely because MUI is forcing the CSS display of table-header-group which isn't expanding to fill the table space.

import React from "react";

//MUI Stuffs
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";

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 TableRow from "@material-ui/core/TableRow";

const useStyles = makeStyles((theme) => ({
  tableContainer: {
    maxWidth: "150vh",
    margin: "auto",
    marginTop: "15vh",
    height: "70vh",
    background: "#ccffff",
    borderWidth: 2,
    borderColor: "black",
    borderStyle: "solid"
  },
  table: {
    height: "70vh"
  },
  tableCell: {
    borderRightStyle: "solid",
    borderRightColor: "black",
    display: "tableRowGroup"
  }
}));

function Canvas() {
  const classes = useStyles();
  const cols = ["Col1", "Col2", "Col3", "Col4", "Col5"];
  return (
    <TableContainer component={Paper} className={classes.tableContainer}>
      <Table className={classes.table} aria-label="simple table">
        <TableRow>
          {cols.map((col) => (
            <TableCell align="center" className={classes.tableCell}>
              {col}
            </TableCell>
          ))}
        </TableRow>
        <TableBody>
          <TableRow>
            {cols.map((col) => (
              <TableCell align="center" className={classes.tableCell}>
                {col}
              </TableCell>
            ))}
          </TableRow>
        </TableBody>
      </Table>
    </TableContainer>
  );
}

export default Canvas;

You can remove the TableRow in the TableBody to see that the header row does in fact fill all the available space.

user_50873100
Related