Expandable table in React material ui

Question

I am trying to have expandable list items in a table with constant header. For this I am using Table and ExpansionPanel component from React material ui 1.0.0-beta.34. However, table is not alligning well. All the body data comes under one header TableCell. Here is my code.

Table component:

    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 component:

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

I am trying to make this work. Any help is appreciated.

Answer 1

This is how I solved this problem earlier. I wrapped a Collapse transition inside a TableCell and set it's hidden and in prop. Example:

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

Answer 2

Im also looking into the same problem. Apparently, material UI has an issue thread regarding expandable table rows. this link might help you.

Edit: React now has docs for Collapsible Table here. https://material-ui.com/components/tables/#collapsible-table