React js Material-UI 响应式表格

Posted 2023-03-31

【中文标题】React js Material-UI 响应式表格

【英文标题】：React js Material-UI responsive table

【发布时间】：2018-07-10 11:53:21

【问题描述】：

我正在使用 react js 构建一个 Web 应用程序，并且我正在使用 material-ui 组件库。我正在使用表格组件，它在桌面上看起来不错，但我希望它在移动浏览器上也能调整并看起来不错。 material-ui 支持这种东西吗？我该怎么做？当前情况的示例： 电脑\手机：

源代码：

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

【参考方案1】：

对于 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 system，例如这是整页的网格系统：

 <Grid item xs=12>
     <Table/>
  </Grid>

【讨论】：

谢谢！附上我的表格组件源码

答案已添加到我之前的答案中

@El.你的代码被剪掉了一个错误：“Uncaught SyntaxError: Cannot use import statement outside a module”

栈溢出sn-p不工作，使用沙箱代码sn-ps