[英]React js Material-UI responsive table
我正在用 react js 构建一个 web 应用程序,我正在使用 material-ui 组件库。 我正在使用 table 组件,它在桌面上看起来不错,但我希望它在移动浏览器上也能调整和看起来不错。 material-ui 支持这样的东西吗? 我该怎么做? 当前情况示例:PC\\Mobile:
源代码:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
const styles = theme => ({
root: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
table: {
minWidth: 700,
},
});
let id = 0;
function createData(name, calories, fat, carbs, protein) {
id += 1;
return { id, name, calories, fat, carbs, protein };
}
const data = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Gingerbread', 356, 16.0, 49, 3.9),
];
function SimpleTable(props) {
const { classes } = props;
return (
<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell numeric>Calories</TableCell>
<TableCell numeric>Fat (g)</TableCell>
<TableCell numeric>Carbs (g)</TableCell>
<TableCell numeric>Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map(n => {
return (
<TableRow key={n.id}>
<TableCell component="th" scope="row">
{n.name}
</TableCell>
<TableCell numeric>{n.calories}</TableCell>
<TableCell numeric>{n.fat}</TableCell>
<TableCell numeric>{n.carbs}</TableCell>
<TableCell numeric>{n.protein}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</Paper>
);
}
SimpleTable.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleTable);
对于Material-UI表格,应该更改每个表格单元格的padding-right
和padding-left
,您可以在Codesandbox中添加代码
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
const styles = theme => ({
root: {
display: 'flex',
marginTop: theme.spacing.unit * 3,
overflowX: 'hide',
},
table: {
minWidth: 340,
},
tableCell: {
paddingRight: 4,
paddingLeft: 5
}
});
let id = 0;
function createData(name, calories, fat, carbs, protein) {
id += 1;
return { id, name, calories, fat, carbs, protein };
}
const data = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Gingerbread', 356, 16.0, 49, 3.9),
];
function SimpleTable(props) {
const { classes } = props;
return (
<Paper className={classes.root}>
<Table className={classes.table}>
<TableHead>
<TableRow>
<TableCell className={classes.tableCell}>Dessert (100g serving)</TableCell>
<TableCell numeric className={classes.tableCell}>Calories</TableCell>
<TableCell numeric className={classes.tableCell}>Fat (g)</TableCell>
<TableCell numeric className={classes.tableCell}>Carbs (g)</TableCell>
<TableCell numeric className={classes.tableCell}>Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map(n => {
return (
<TableRow key={n.id}>
<TableCell component="th" scope="row" className={classes.TableCell}>
{n.name}
</TableCell>
<TableCell numeric className={classes.tableCell}>{n.calories}</TableCell>
<TableCell numeric className={classes.tableCell}>{n.fat}</TableCell>
<TableCell numeric className={classes.tableCell}>{n.carbs}</TableCell>
<TableCell numeric className={classes.tableCell}>{n.protein}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</Paper>
);
}
SimpleTable.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleTable);
要使其具有响应性,您首先需要使用网格系统,例如这是整页的网格系统:
<Grid item xs={12}>
<Table/>
</Grid>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.