如何使用 React 更改 Material UI 表格单元格的宽度？

Question

I have the following problem, I try to increase the table cell width, but I have no idea how to do it. I work with Typescript. I can only select the size for the TableCellProps and I can only set medium or small. Does anyone have a solution? I want to enlarge the blue colored table cell. 1

<TableRow>
  <TableCell align="left">address</TableCell> //sample Code, how i can set here the width
</TableRow>

As a second question, how can you limit the height of the whole table, so that you have to scroll horizontally and vertically in the table?

Answer 1

You can simply add the width to the cell like this:

<TableCell width={300}>Dessert (100g serving)</TableCell>

This will make this cell 300 px wide.

Answer 2

If you have not the material-ui installed, then you need to install it first as follows:

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

then import it to the top of your file as follow:

   import {          
      createStyles,
      Grid,
      makeStyles,          
      Table,
      TableBody,
      TableCell,
      TableContainer,
      TableHead,
      TableRow,
      Theme,
      withStyles,
   } from '@material-ui/core';

create a function like this and set the width value as you wish:

    const StyledTableCell = withStyles((theme: Theme) =>
  createStyles({
    head: {
      backgroundColor: theme.palette.common.black,
      color: theme.palette.common.white,
      width: '50%',
      fontSize: 20
    },
  }),
)(TableCell);

now look at the following example to see how you can use StyledTableCell in your code:

              <Table
            aria-label="collapsible table"
            aria-labelledby="tableTitle"
          >
            <TableHead>
              <TableRow>
                <TableCell />
                <TableCell>Document Title</TableCell>
                <StyledTableCell  align="right">Document Content</StyledTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {rows.map((row) => (
                <Row key={row.documentId} row={row} />
              ))}
            </TableBody>
          </Table>