Use React Material to fit table to page

Question

I want to implement different sub pages:

Full code example:

https://stackblitz.com/edit/react-qvzw66?file=src%2FBusinessDetails.js

Main page:

const useActiveAccountStyles = makeStyles(theme => ({
  root: {
    display: 'flex'
  },

  aside: {
    display: 'flex',
    flexDirection: 'column'
  },
  asideLink: {
    marginBottom: '8px',
    width: '230px',
    textDecoration: 'none',
  }
}))

export default function App() {
  const styles = useActiveAccountStyles();

  return (
    <React.Fragment>
      {/*<h1 className='activate-account'>Activate Account wizard</h1>*/}


      <Grid container direction="row" justifyContent="flex-start" alignItems="flex-start">
        <Grid item >
          <Box m={5} pl={10}>
            <Router>
              <Container className={styles.root}>
                <aside className={styles.aside}>
                  <Link className={styles.asideLink} to='/business-structure'>Business structure</Link>
                  <Link className={styles.asideLink} to='/business-representative'>Business representative</Link>
                </aside>

                <Switch>
                  <Route path='/business-structure' component={BusinessStructure} />
                  <Route path='/business-representative' component={BusinessRepresentative} />
                </Switch>
              </Container>
            </Router>
          </Box>

        </Grid>

      </Grid>

    </React.Fragment>
  )
}

Table page:

import { useState, useContext } from 'react';
import { useHistory } from "react-router-dom";
import { Typography, Container, Box, TextField, FormControl, Grid, Button } from '@material-ui/core'
import SelectOption from './SelectOption'
import { DataGrid, GridColDef, GridValueGetterParams } from '@material-ui/data-grid';

const columns = [
    { field: 'id', headerName: 'ID', width: 90 },
    {
        field: 'status',
        headerName: 'Status',
        width: 150,
        editable: true,
    },
    {
        field: 'invoiceNumber',
        headerName: 'Invoice Number',
        width: 150,
        editable: true,
    },
    {
        field: 'client',
        headerName: 'Client',
        width: 150,
        editable: true,
    },
    {
        field: 'invoiceTotal',
        headerName: 'Invoice Total',
        width: 150,
        editable: true,
    },
    {
        field: 'date',
        headerName: 'Date',
        type: 'number',
        width: 110,
        editable: true,
    },
    {
        field: 'dueDate',
        headerName: 'Due Date',
        description: 'This column has a value getter and is not sortable.',
        sortable: false,
        width: 160,
        valueGetter: (params) =>
            `${params.getValue(params.id, 'firstName') || ''} ${params.getValue(params.id, 'lastName') || ''
            }`,
    },
];

const rows = [
    { id: 1, status: 'Paid', invoiceNumber: '343423', age: 35 },
    { id: 2, status: 'Paid', invoiceNumber: '433222', age: 42 },
    { id: 3, status: 'Paid', invoiceNumber: '344432', age: 45 },
    { id: 4, status: 'Paid', invoiceNumber: '233223', age: 16 },
    { id: 5, status: 'Paid', invoiceNumber: '545322', age: null },
    { id: 6, status: 'Paid', invoiceNumber: '334322', age: 150 },
    { id: 7, status: 'Paid', invoiceNumber: '444322', age: 44 },
    { id: 8, status: 'Paid', invoiceNumber: '232312', age: 36 },
    { id: 9, status: 'Paid', invoiceNumber: '545344', age: 65 },
];

export default function BusinessStructure(props) {
  return (
    <Container style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Typography variant="h4">
            All Invoices
        </Typography>

        <Box>
            <div style={{ height: 400, width: '45em' }}>
                <DataGrid
                    rows={rows}
                    columns={columns}
                    pageSize={5}
                    checkboxSelection
                    disableSelectionOnClick
                />
            </div>
        </Box>
    </Container>
);
}

Do you know how I can code can be edited in a way to resize according to above pictures?

Answer 1

All you need to do is remove your display: 'flex', justifyContent: 'space-between' from your Container. By setting flex to it you are saying that all children inside here are flex items and by default the flex-direction is row. Alternatively you could also include flex-direction: column but that would achieve the same thing as just removing them.

export default function BusinessStructure(props) {
  return (
    <Container>
        <Typography variant="h4">
            All Invoices
        </Typography>

        <Box>
            <div style={{ height: 400, width: '45em' }}>
                <DataGrid
                    rows={rows}
                    columns={columns}
                    pageSize={5}
                    checkboxSelection
                    disableSelectionOnClick
                />
            </div>
        </Box>
    </Container>
);
}