web-dev-qa-db-fra.com

Table extensible en React material ui

J'essaie d'avoir des éléments de liste extensibles dans une table avec un en-tête constant. Pour cela, j'utilise les composants Table et ExpansionPanel de React material ui 1.0.0-beta.34. Cependant, le tableau ne s'aligne pas bien. Tous les les données du corps se trouvent sous un en-tête TableCell. Voici mon code.

Composant de table:

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

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

J'essaye de faire fonctionner ça. Toute aide est appréciée.

reactjsmaterial-ui
8
Abdul Rauf

C'est ainsi que j'ai résolu ce problème plus tôt. J'ai encapsulé une transition Collapse dans un TableCell et défini son hidden et in prop. Exemple:

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

Im examinant également le même problème. Apparemment, l'interface utilisateur matérielle a un problème concernant les lignes de table extensibles. cela lien pourrait vous aider. :)

1
Vincent Pakson