個人的メモ MUIのTableでヘッダーを固定する方法

2023年1月19日

MUIのDataGridを使うといろいろと簡単なのですが、たまにTableを使って表組を作らないといけない場合もあったりする。

<TableContainer
    style={{maxHeight: 500}}
>
    <Table>
           <TableHead>
                  <TableRow>
                         <TableCell />
                     </TableRow>
              </TableHead>
              <TableBody>
                  <TableRow>
                         <TableCell />
                     </TableRow>
              </TableBody>
    </Table>
</TableContainer>

これで、heightが500(px?)以上になったらスクロールバーが出る。(だいぶ端折ってますが)

が、このままだとヘッダー部分が固定されない。

探してもなかなか出てこないので、めんどくさいことしないといけないのかと思ってましたが、わりと簡単に解決。
stickyHeaderを入れるだけでいいっぽい。

<TableContainer
    style={{maxHeight: 500}}
>
    <Table stickyHeader> //←stickyHeaderを追加
           <TableHead>
                  <TableRow>
                         <TableCell />
                     </TableRow>
              </TableHead>
              <TableBody>
                  <TableRow>
                         <TableCell />
                     </TableRow>
              </TableBody>
    </Table>
</TableContainer>

これでヘッダーが固定されました。

個人的にあんまりTable使わないので、忘れる前にメモしときます。