使用 React Material 使表格适合页面

Posted 2023-02-22

【中文标题】使用 React Material 使表格适合页面

【英文标题】：Use React Material to fit table to page

【发布时间】：2021-10-18 22:45:21

【问题描述】：

我要实现不同的子页面：

完整代码示例：

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

主页：

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>
  )

表格页：

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>
);

你知道我可以如何编辑代码以根据上面的图片调整大小吗？

【问题讨论】：

您的沙箱不起作用，您能否在此处添加一些代码以提供帮助。

我不确定什么代码没有保存。我用正确的沙箱链接更新了帖子，并添加了代码示例。

你能详细说明你到底想要什么

我想调整表格的大小以适应屏幕的右边框。标题“所有发票应正确放在桌子上方。

【参考方案1】：

您需要做的就是从您的容器中删除您的 display: 'flex', justifyContent: 'space-between'。 通过将 flex 设置为它，您是说这里的所有子项都是 flex 项，默认情况下 flex-direction 是行。或者，您也可以包含 flex-direction: column，但这与删除它们的效果相同。

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>
);

【讨论】：

谢谢！我发现了另一个我面临的问题。我更新了代码stackblitz.com/edit/react-rprr7v?file=src%2FBusinessDetails.js 我试图通过设置宽度来调整表格的大小：'100%'。但看起来主容器正在执行限制。请参阅示例。如何增加限制表大小的父容器？