📝

テーブルのセル内の文字を右寄せにしたり中央揃えにしたりする方法【React×MUI】

かめ

2024/05/01に公開

React

tech

ここでは、ReactでWEBアプリの画面を作っていて、テーブルを作成している際に、文字の配置を任意の位置で行う方法を紹介していきたいと思います。

完成イメージはコチラ↓（中央揃え）

（右揃え）

Reactで画面を作っているときに、<Table>タグを使用して、表形式の画面を作ることってよくあるかと思います。そんなとき、セルの中の文字は、デフォルトで左寄せになっていますが、これを中央揃えや右寄せにしたい時ってありますよね。Excelなんかだと、中央揃えや右寄せのアイコンをクリックで一瞬でできてしまいますが、Reactだとどのようにしたら、位置を指定できるのでしょうか。

コードを見ていきましょう。
これは変更を施す前のコードです。

{/* インポート文などは省略 */}
<Table>
  <TableHead>
    <TableRow>
      <TableCell>名前</TableCell>
      <TableCell>配属課</TableCell>
      <TableCell>勤続年数</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {/* レコード1 */}
    <TableRow>
      <TableCell>山田太郎</TableCell>
      <TableCell>営業課</TableCell>
      <TableCell>2</TableCell>
    </TableRow>
    {/* レコード2 */}
    <TableRow>
      <TableCell>鈴木花子</TableCell>
      <TableCell>事務課</TableCell>
      <TableCell>1</TableCell>
    </TableRow>
  </TableBody>
</Table>

この時点での画面はこんな感じです。

特に何も指定をしていないのでデフォルトで左寄せになっています。Excelなんかでもそうですね。

これを以下のように変えてみます。

<Table>
  <TableHead>
    <TableRow>
      <TableCell align="center">名前</TableCell>
      <TableCell align="center">配属課</TableCell>
      <TableCell align="center">勤続年数</TableCell>
      </TableRow>
    </TableHead>
  <TableBody>
    {/* レコード1 */}
    <TableRow>
      <TableCell align="center">山田太郎</TableCell>
      <TableCell align="center">営業課</TableCell>
      <TableCell align="center">2</TableCell>
    </TableRow>
    {/* レコード2 */}
    <TableRow>
      <TableCell align="center">鈴木花子</TableCell>
      <TableCell align="center">事務課</TableCell>
      <TableCell align="center">1</TableCell>
    </TableRow>
  </TableBody>
</Table>

すると、

全て中央揃えになりました。

セル内のアイテムの配置は　alignプロパティを使用して指定します。alignプロパティを設定することで、アイテムを、水平方向に左寄せ、中央揃え、右寄せのいずれかに配置することができます。

右寄せにするにはalign=”right”とします。

<Table>
  <TableHead>
    <TableRow>
      <TableCell align="right">名前</TableCell>
      <TableCell align="right">配属課</TableCell>
      <TableCell align="right">勤続年数</TableCell>
      </TableRow>
    </TableHead>
  <TableBody>
    {/* レコード1 */}
    <TableRow>
      <TableCell align="right">山田太郎</TableCell>
      <TableCell align="right">営業課</TableCell>
      <TableCell align="right">2</TableCell>
    </TableRow>
    {/* レコード2 */}
    <TableRow>
      <TableCell align="right">鈴木花子</TableCell>
      <TableCell align="right">事務課</TableCell>
      <TableCell align="right">1</TableCell>
    </TableRow>
  </TableBody>
</Table>

すると、

右揃えになりました。

ちなみに、例えば先頭行だけ、列名を表示している行のセルを全て中央揃えにしたいとき、

<TableHead align="center">

<TableHead>タグをこのようにしたとしましょう。すると、

何やらエラーがでてしまいました。このエラーは、<TableHead>コンポーネントにalignプロパティが存在しないことを示しています。ちなみに、<TableBody>タグや<TableRow>タグなどでも、同様のエラーが発生します。つまり、一括でセル内の配置を設定することはできず、<TableCell>タグ内で、個別に各セルの配置を設定する必要があります。

まとめ

<Table> で作成した表のセル内のアイテムはalign=””で指定することで任意の配置ができる。

株式会社XronotechPublication

福岡でシステム開発を行うXronotechの公式アカウントです。 Webアプリやスマホアプリを開発しています。

まとめ

Discussion