Question

我正在使用材质UI中的Table控件来显示数据，但是现在我需要显示组数据，包括展开和折叠数据。是否有任何包存在以实现此目标？请帮助我。

import { TableRowProps, Table, TableBody, TableFooter, PagiFooter, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
 <Table>
  <TableHeader {...headerProps}>
  {this.renderHeaders()}
  </TableHeader>
  <TableBody displayRowCheckbox={false}
  deselectOnClickaway={false}>
  {this.renderRows()}
  </TableBody>
</Table>

Answer 1

Table组件目前不支持扩展，但您可以使用可扩展卡组件来解决这个问题，只需确保调整行的垂直对齐方式。

以下是代码段：

<TableBody displayRowCheckbox={false}>
  {this.props.user.leads.map((lead, i) => (
    <TableRow key={i}>
      <TableRowColumn>
        <Card style={{boxShadow: 'none'}}>
          <CardHeader
            title={lead.brand}
            style={{paddingLeft: 0, fontWeight: 600}}
            actAsExpander={true}
          />
          <CardText expandable={true}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
            Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
            Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
          </CardText>
        </Card>
      </TableRowColumn>
      <TableRowColumn style={{verticalAlign: 'top', height: 'auto', paddingTop: '1.4em'}}>{lead.budget}</TableRowColumn>
      <TableRowColumn style={{verticalAlign: 'top', height: 'auto', paddingTop: '1.4em'}}>{lead.eventName ? 'Event' : 'Content'}</TableRowColumn>
      <TableRowColumn style={{verticalAlign: 'top', height: 'auto', paddingTop: '1.4em'}}>{lead.firstName + ' ' + lead.lastName}</TableRowColumn>
      <TableRowColumn style={{verticalAlign: 'top', height: 'auto', paddingTop: '1.4em'}}>Archive | Start Campaign</TableRowColumn>
    </TableRow>
  ))}
</TableBody>

Answer 2

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';
import Collapse from '@material-ui/core/Collapse';
import CardActions from '@material-ui/core/CardActions';
import IconButton from '@material-ui/core/IconButton';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
  table: {
    minWidth: 700,
  },
  expand: {
    transform: 'rotate(0deg)',
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest,
    }),
    marginLeft: 'auto',
    [theme.breakpoints.up('sm')]: {
      marginRight: -8,
    },
  },
  expandOpen: {
    transform: 'rotate(180deg)',
  },
});

let id = 0;
function createData(name, calories, fat, carbs, protein) {
  id += 1;
  return { id, name, calories, fat, carbs, protein };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
  createData('Gingerbread', 356, 16.0, 49, 3.9)
];
class TableGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = { expanded: {} };
  }
  handleExpandClick(key) {
    let state = { ...this.state };
    state.expanded[key] = !!!state.expanded[key];
    this.setState(state);
  }
  render() {
    const props = this.props;
    const { groupProperty, rows, ...other } = props;
    const groups = rows.reduce((acc, row) => {
      acc[row[groupProperty]] = acc[row[groupProperty]] || [];
      acc[row[groupProperty]].push(row);
      return acc;
    }, {});
    const keys = Object.keys(groups);


    return keys.map(key => (
      <TableRow>
        <TableCell colspan="5">
          <CardActions disableActionSpacing>
            <b>{key} ({groups[key].length})</b>
            <IconButton
              className={this.state.expanded[key] ? props.classes.expandOpen : props.classes.expand}
              onClick={this.handleExpandClick.bind(this, key)}
              aria-expanded={this.state.expanded[key]}
              aria-label="Show more"
            >
              <ExpandMoreIcon />
            </IconButton>
          </CardActions>
          <Collapse in={this.state.expanded[key]} timeout="auto" unmountOnExit>
            <Table {...other}>
              <TableBody>
                {groups[key].map(row => (
                  <TableRow key={row.id}>
                    <TableCell component="th" scope="row">
                      {row.name}
                    </TableCell>
                    <TableCell numeric>{row.calories}</TableCell>
                    <TableCell numeric>{row.fat}</TableCell>
                    <TableCell numeric>{row.carbs}</TableCell>
                    <TableCell numeric>{row.protein}</TableCell>
                  </TableRow>
                )
                )}
              </TableBody>
            </Table>
          </Collapse>
        </TableCell>
      </TableRow>
    )
    )
  }
};

function SimpleTable(props) {
  const { classes } = props;

  return (
    <Paper className={classes.root}>
      <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>
          <TableGroup classes={classes} rows={rows} groupProperty="name" />
        </TableBody>
      </Table>
    </Paper>
  );
}

SimpleTable.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleTable);

Answer 3

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

const DataCard = ({ show }) => {
  const classes = useStyles();

  const [open, setOpen] = useState();

  const handleExpandedClick = index => (e) => {
    setOpen(index === open ? '' : index);
  }

  return (
    <Only when={show}>
      <Paper className={classes.root}>
        <Table className={classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>Dessert (100g serving)</TableCell>
              <TableCell align="right">Calories</TableCell>
              <TableCell align="right">Fat&nbsp;(g)</TableCell>
              <TableCell align="right">Carbs&nbsp;(g)</TableCell>
              <TableCell align="right">Protein&nbsp;(g)</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row, index) => (

              <>
                <TableRow
                  key={index}
                  hover
                  style={{ cursor: 'pointer' }}
                  onClick={handleExpandedClick(index)}
                >
                  <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>
                <Collapse in={open === index} hidden={open !== index} component="tr" style={{ display: "block" }}>
                  <td>
                    <div>Expanded data.</div>
                  </td>
                </Collapse>
              </>
            ))}
          </TableBody>
        </Table>
      </Paper>
    </Only>
  )
}

DataCard.propTypes = {
  show: PropTypes.bool.isRequired
}

export default DataCard;

Answer 4

谢谢@bluehipy，我设法用钩子重写了代码

import React, { useEffect, useState } 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";
import Collapse from "@material-ui/core/Collapse";
import CardActions from "@material-ui/core/CardActions";
import IconButton from "@material-ui/core/IconButton";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

import getOrdersBasedOnRouteQuery from "../graphql/queries/getOrdersBasedOnRouteQuery";

const styles = theme => ({
  root: {
    width: "100%",
    marginTop: theme.spacing.unit * 3,
    overflowX: "auto"
  },
  table: {
    minWidth: 700
  },
  expand: {
    transform: "rotate(0deg)",
    transition: theme.transitions.create("transform", {
      duration: theme.transitions.duration.shortest
    }),
    marginLeft: "auto",
    [theme.breakpoints.up("sm")]: {
      marginRight: -8
    }
  },
  expandOpen: {
    transform: "rotate(180deg)"
  }
});

const grouped = values => {
  let finalArray = [];
  values.customers.filter(orders => {
    return Array.prototype.push.apply(finalArray, orders);
  });

  return finalArray;
};

const TableGroup = ({ classes, routes, ...other }) => {
  const [expanded, setExpanded] = useState({});

  const handleExpandClick = value => {
    setExpanded(expanded => {
      return {
        ...expanded,
        [value]: expanded[value] ? false : true
      };
    });
  };

  return routes.map((route, routeIndex) => {
    return (
      <TableRow>
        <TableCell colspan="5">
          <CardActions disableActionSpacing>
            <b>
              {route.name} - ({grouped(route).length}){" "}
            </b>
            <IconButton
              className={
                expanded[route.name] ? classes.expandOpen : classes.expand
              }
              onClick={() => handleExpandClick(route.name)}
              aria-expanded={route.name}
              aria-label="Show more"
            >
              <ExpandMoreIcon />
            </IconButton>
          </CardActions>
          <Collapse in={expanded[route.name]} timeout="auto" unmountOnExit>
            <Table {...other}>
              <TableBody>
                {grouped(route).map(row => {
                  return (
                    <TableRow key={row.id}>
                      <TableCell text>{row.reference}</TableCell>
                      <TableCell text>{row.customer.full_name}</TableCell>
                      <TableCell numeric>{row.total}</TableCell>
                      <TableCell>{row.status}</TableCell>
                      <TableCell>{row.created_at}</TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          </Collapse>
        </TableCell>
      </TableRow>
    );
  });
};

const SimpleTable = ({ classes }) => {
  const [routes, setRoutes] = useState([]);
  const [loading, setLoading] = useState(true);

  const fetchAllOrders = async () => {
    const result = await getOrdersBasedOnRouteQuery();
    if (!result.loading) {
      setRoutes(result.data.route);
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchAllOrders();
  }, [loading === true]);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <Paper className={classes.root}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Reference</TableCell>
            <TableCell numeric>Customer Name</TableCell>
            <TableCell numeric>Total</TableCell>
            <TableCell numeric>Status</TableCell>
            <TableCell numeric>Created At</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableGroup classes={classes} routes={routes} groupProperty="name" />
        </TableBody>
      </Table>
    </Paper>
  );
};

SimpleTable.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(SimpleTable);

如何在reactjs中对表进行分组？

4 个答案: