🪑

Material-UI table スクロールバー随時表示

2020/09/27に公開

関わっている案件が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