fix order trade table layout

This commit is contained in:
c9s 2021-02-05 09:48:40 +08:00
parent 67d8a44532
commit 65f3613dc1
3 changed files with 43 additions and 28 deletions

View File

@ -10,7 +10,7 @@ import SideBar from "../components/SideBar";
const useStyles = makeStyles((theme) => ({
root: {
// flexGrow: 1,
flexGrow: 1,
display: 'flex',
},
content: {
@ -22,6 +22,7 @@ const useStyles = makeStyles((theme) => ({
zIndex: theme.zIndex.drawer + 1,
},
appBarSpacer: theme.mixins.toolbar,
container: { }
}));
export default function DashboardLayout({children}) {
@ -42,7 +43,7 @@ export default function DashboardLayout({children}) {
<main className={classes.content}>
<div className={classes.appBarSpacer}/>
<Container maxWidth={false} disableGutters={true}>
<Container className={classes.container} maxWidth={false} disableGutters={true}>
{children}
</Container>
</main>

View File

@ -2,7 +2,6 @@ import React, {useEffect, useState} from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Paper from '@material-ui/core/Paper';
import {queryClosedOrders} from '../api/bbgo';
import {DataGrid} from '@material-ui/data-grid';
@ -27,8 +26,13 @@ const columns = [
const useStyles = makeStyles((theme) => ({
paper: {
margin: theme.spacing(2),
padding: theme.spacing(2),
},
dataGridContainer: {
display: 'flex',
height: 'calc(100vh - 64px - 120px)',
}
}));
export default function Orders() {
@ -47,18 +51,21 @@ export default function Orders() {
return (
<DashboardLayout>
<Box m={4}>
<Paper className={classes.paper}>
<Typography variant="h4" component="h2" gutterBottom>
Orders
</Typography>
</Paper>
<DataGrid
rows={orders}
columns={columns}
pageSize={50}
autoHeight={true}/>
</Box>
<Paper className={classes.paper}>
<Typography variant="h4" gutterBottom>
Orders
</Typography>
<div className={classes.dataGridContainer}>
<div style={{flexGrow: 1}}>
<DataGrid
rows={orders}
columns={columns}
pageSize={50}
autoPageSize={true}
/>
</div>
</div>
</Paper>
</DashboardLayout>
);
}

View File

@ -2,7 +2,6 @@ import React, {useEffect, useState} from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Paper from '@material-ui/core/Paper';
import {queryTrades} from '../api/bbgo';
import {DataGrid} from '@material-ui/data-grid';
@ -22,8 +21,13 @@ const columns = [
const useStyles = makeStyles((theme) => ({
paper: {
margin: theme.spacing(2),
padding: theme.spacing(2),
},
dataGridContainer: {
display: 'flex',
height: 'calc(100vh - 64px - 120px)',
}
}));
export default function Trades() {
@ -42,18 +46,21 @@ export default function Trades() {
return (
<DashboardLayout>
<Box m={4}>
<Paper className={classes.paper}>
<Typography variant="h4" component="h2" gutterBottom>
Trades
</Typography>
</Paper>
<DataGrid
rows={trades}
columns={columns}
pageSize={50}
autoHeight={true}/>
</Box>
<Paper className={classes.paper}>
<Typography variant="h4" gutterBottom>
Trades
</Typography>
<div className={classes.dataGridContainer}>
<div style={{ flexGrow: 1 }}>
<DataGrid
rows={trades}
columns={columns}
showToolbar={true}
autoPageSize={true}
/>
</div>
</div>
</Paper>
</DashboardLayout>
);
}