アイキャッチの画像

MUI 「TableContainer」「TableRow」の「Height」（高さ）を調整する

公開日:

更新日:

Material UI Tableコンポーネント　デフォルトの1行

MUIのTableをデフォルトのまま使用すると下記のような形になります↓

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

デフォルトの設定で1行（Row）のHeightやPaddingが入っているのでここから更に低く（狭く）しようとするとやり方に注意が必要です。

やり方　: MuiTableCell-rootを設定

先ほどのテーブルからHeightをより小さく指定し、Paddingも減らしています↓

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

コード実例↓

example.js

1import {
2  TableContainer,
3  Paper,
4  Table,
5  TableHead,
6  TableRow,
7  TableCell,
8  TableBody,
9} from "@mui/material";
10 
11
12    <TableContainer component={Paper}>
13            <Table sx={{ minWidth: 650 }} aria-label="simple table">
14              <TableHead>
15                <TableRow
16                  sx={{
17                    "& .MuiTableCell-root": {
18                      height: "5px",
19                      padding: "5px",
20                    },
21                  }}
22                >
23                  <TableCell>Dessert (100g serving)</TableCell>
24                  <TableCell align="right">Calories</TableCell>
25                  <TableCell align="right">Fat&nbsp;(g)</TableCell>
26                  <TableCell align="right">Carbs&nbsp;(g)</TableCell>
27                  <TableCell align="right">Protein&nbsp;(g)</TableCell>
28                </TableRow>
29              </TableHead>
30              <TableBody>
31                {rows.map((row) => (
32                  <TableRow
33                    key={row.name}
34                    sx={{
35                      "& .MuiTableCell-root": {
36                        height: "5px",
37                        padding: "5px",
38                      },
39                    }}
40                  >
41                    <TableCell component="th" scope="row">
42                      {row.name}
43                    </TableCell>
44                    <TableCell align="right">{row.calories}</TableCell>
45                    <TableCell align="right">{row.fat}</TableCell>
46                    <TableCell align="right">{row.carbs}</TableCell>
47                    <TableCell align="right">{row.protein}</TableCell>
48                  </TableRow>
49                ))}
50              </TableBody>
51            </Table>
52    </TableContainer>

・ポイント

sx={{ "& .MuiTableCell-root": { height: "5px", padding: "5px", }, }}でTableRowのCSSを書き換えています。ここに必要な設定を書き込んでいけば大丈夫です。

※参考記事: how to change height of a tableRow in mui?

本記事は以上になります。

ご一読頂きありがとうございました。