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

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使わないので、忘れる前にメモしときます。

Follow me!

@takuya_osushi