Как выровнять таблицу по элементу Material UI Paper - PullRequest
Новая
       15

Как выровнять таблицу по элементу Material UI Paper

0 голосов
/ 09 июля 2019

У меня проблема в том, что я пытаюсь отцентрировать таблицу фиксированного размера в середине страницы (в компоненте «Бумага») и с треском проваливаюсь. Я также новичок в Material-ui, поэтому я не уверен, что это правильный способ структурирования такого рода предметов. Не могли бы вы помочь мне выровнять его по центру страницы?

problem

import rows from "./mockdata/mock_dashboard";
const rowsData = rows;

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%"
  },
  paper: {
    marginTop: theme.spacing(3),
    width: "100%",
    overflowX: "auto",
    marginBottom: theme.spacing(2),
    margin: "auto"
  },
  table: {
    minWidth: 650,
    maxWidth: 1200
  }
}));

export default function MainDashboard() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Table className={classes.table} size="small">
          <TableHead>
            <TableRow>
              <TableCell>Nz.</TableCell>
              <TableCell>Data Przyjęcia</TableCell>
              <TableCell>Koordynator</TableCell>
              <TableCell>Link do Pliku</TableCell>
              <TableCell>Dod. opis</TableCell>
              <TableCell>Data Wykonania</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rowsData.map(row => (
              <TableRow key={row.orderNo}>
                <TableCell component="th" scope="row">
                  {row.orderNo}
                </TableCell>
                <TableCell align="center">{row.orderDate}</TableCell>
                <TableCell align="center">{row.coordinator}</TableCell>
                <TableCell align="center">{row.link}</TableCell>
                <TableCell align="center" className={classes.descriptionFont}>
                  {row.description}
                </TableCell>
                <TableCell align="center">{row.dueDate}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Paper>
    </div>
 );

1 Ответ

1 голос
/ 10 июля 2019

Как насчет упаковки таблицы в фиксированный Контейнер и избавления от фиксированной ширины таблицы?Это базовый элемент макета Material-ui. 

import Container from '@material-ui/core/Container';
import rows from "./mockdata/mock_dashboard";
const rowsData = rows;

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%"
  },
  paper: {
    marginTop: theme.spacing(3),
    width: "100%",
    overflowX: "auto",
    marginBottom: theme.spacing(2),
    margin: "auto"
  },
  table: {
    width: '100%',
  }
}));

export default function MainDashboard() {
  const classes = useStyles();

  return (
    <Container fixed>
      <Paper className={classes.paper}>
        <Table className={classes.table} size="small">
          <TableHead>
            <TableRow>
              <TableCell>Nz.</TableCell>
              <TableCell>Data Przyjęcia</TableCell>
              <TableCell>Koordynator</TableCell>
              <TableCell>Link do Pliku</TableCell>
              <TableCell>Dod. opis</TableCell>
              <TableCell>Data Wykonania</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rowsData.map(row => (
              <TableRow key={row.orderNo}>
                <TableCell component="th" scope="row">
                  {row.orderNo}
                </TableCell>
                <TableCell align="center">{row.orderDate}</TableCell>
                <TableCell align="center">{row.coordinator}</TableCell>
                <TableCell align="center">{row.link}</TableCell>
                <TableCell align="center" className={classes.descriptionFont}>
                  {row.description}
                </TableCell>
                <TableCell align="center">{row.dueDate}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Paper>
    </Container>
  );
}
...