reactjs - 如何折叠数据表?
问题描述
我正在尝试折叠 material-ui 中的数据表并仅显示表头以及数据表中的总行数。是否有允许我这样做的数据表插件?
解决方案
通过获取数组的长度来显示行数......相关的js:
import React from 'react';
import { makeStyles } 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';
import Badge from '@material-ui/core/Badge';
const useStyles = makeStyles({
root: {
width: '100%',
overflowX: 'auto',
},
table: {
minWidth: 650,
},
});
function createData(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
}
const rows = [
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),
];
export default function SimpleTable() {
const classes = useStyles();
return (
<Paper className={classes.root}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>
<Badge className={classes.margin} badgeContent={rows.length} color="primary">
</Badge>
</TableCell> <TableCell>Dessert (100g serving)
</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map(row => (
<TableRow key={row.name}>
<TableCell align="right"></TableCell>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
);
}
隐藏在...相关 cssdisplay:none
的类上使用的 tbody :tbody
.MuiTableBody-root{
display: none;
}
在这里完成工作堆栈闪电战
推荐阅读
- arrays - 获得概率两个numpy数组如何彼此接近python
- r - 找出哪个表格共享问题
- python - 如何在 django 模板中声明动态链接?
- database - TIBCO Spotfire 标准偏差
- c# - 当返回类型为 iActionResult 时,component.ts 类给出错误
- javascript - 深度合并两个类实例
- python - 使用正则表达式过滤带有 ~ 在字符串开头和结尾的 pandas 行
- android - 单选按钮在自定义列表视图中重复选择
- angular - 如何从正常服务访问 HttpInterceptor?
- javascript - SuiteScript 1.0 行级字段源代码(列表/记录)疑难解答