🪑
Material-UI table スクロールバー随時表示
関わっている案件がITリテラシーが低い方が多い業界に向けてのプロダクトなので
スクロールできるのに気付きにくいと思いスクロールバーを随時表示を表示を実装
Material-UI table スクロールバー随時表示
index.ts
import React from 'react';
import {
Paper,
//Table関連もろもろ,,,
} from '@material-ui/core';
export const tablePage = (props) => {
return (
<>
<Paper
component="div"
className={classes.tableScrollBar}
variant="outlined"
>
<Table>
<TableHead>
<TableRow>
<TableCell>aaa</TableCell>
<TableCell>bbb</TableCell>
<TableCell>ccc</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>aaa</TableCell>
<TableCell>
bbb
</TableCell>
<TableCell>
ccc
</TableCell>
</TableRow>
</TableBody>
</Table>
</Paper>
</>
style.ts
import { makeStyles } from '@material-ui/core';
export const useTableStyles = makeStyles(() => ({
tableScrollBar: {
overflowY: 'auto',
},
}
Discussion