React 材料 ui 中的可扩展表答案

【问题标题】：Expandable table in React material uiReact 材料 ui 中的可扩展表
【发布时间】：2018-03-20 10:38:35
【问题描述】：

我正在尝试在具有恒定标题的表中添加可扩展的列表项。为此，我使用来自 React 材料 ui 1.0.0-beta.34 的 Table 和 ExpansionPanel 组件。但是，表格并没有很好地对齐。所有正文数据都在一个标题TableCell 下。这是我的代码。

表格组件：

    import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Table';
import Paper from 'material-ui/Paper';
import { styles } from './styles';
import ExpandableTableRow from 'client/components/expandable-table-row';

class GenericTable extends Component {
    render() {
        const { classes, items, headItems } = this.props;
        return (
            <Paper className={classes.paper}>
            <Table>
                <TableHead>
                    <TableRow>
                         {headItems.map((n, i) => {
                            return <TableCell className={classes.column} key={i}>{n}</TableCell>
                        }) }
                    </TableRow>
                </TableHead>
                <TableBody>
                    {
                        !items.length &&
                        <TableRow>
                            <TableCell colSpan={12} className={classes.center}>
                                <p>There is no data to display</p>
                            </TableCell>
                        </TableRow>
                    }
                    {items.map((item, i) => {
                        return (
                            <ExpandableTableRow key={i} item={item}/>
                        );
                    })}

                </TableBody>
            </Table>
            </Paper>
        );
    }
}

GenericTable.propTypes = {
    items: PropTypes.array.isRequired,
    headItems: PropTypes.array.isRequired,
};

export default withStyles(styles)(GenericTable);

ExpandableTableRow 组件：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import ExpansionPanel, {
  ExpansionPanelSummary,
  ExpansionPanelDetails,
} from 'material-ui/ExpansionPanel';
import Typography from 'material-ui/Typography';
import { styles } from './styles';
import { TableRow, TableCell } from 'material-ui/Table';

class ExpandableTableRow extends React.Component {

    render() {
        const { classes, item } = this.props;
        return (
            <div className={classes.root}>
                <ExpansionPanel>                    
                    <ExpansionPanelSummary>
                        <TableRow>
                            <TableCell><Typography>{item.a}</Typography></TableCell>
                            <TableCell><Typography>{item.b}</Typography></TableCell>
                            <TableCell><Typography>{item.c}</Typography></TableCell>
                            <TableCell><Typography>{item.d}</Typography></TableCell>
                            <TableCell><Typography>{item.e}</Typography></TableCell>
                            <TableCell><Typography>{item.f}</Typography></TableCell>
                        </TableRow>
                    </ExpansionPanelSummary>

                <ExpansionPanelDetails>
                    <Typography>
                        Expansion panel expanded
                    </Typography>
                </ExpansionPanelDetails>
                </ExpansionPanel>
            </div>
        );
    }
}

ExpandableTableRow.propTypes = {

};

export default withStyles(styles)(ExpandableTableRow);

我正在努力完成这项工作。任何帮助表示赞赏。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这就是我之前解决这个问题的方法。我在TableCell 中包裹了一个Collapse 转换并将其设置为hidden 和in 属性。示例：

 <TableCell padding={'none'} colSpan={12}>
    <Collapse hidden={!open} in={open}>
       {
         <ItemComponent/>
       }
    </Collapse>
 </TableCell>

【讨论】：

【解决方案2】：

我也在研究同样的问题。显然，Material UI 有一个关于可扩展表格行的问题线程。这个link 可能会对你有所帮助。

编辑：React 现在在这里有 Collapsible Table 的文档。 https://material-ui.com/components/tables/#collapsible-table

【讨论】：