title: Expandable table in React material ui
body: <p>I am trying to have expandable list items in a table with constant header. For this I am using <code>Table</code> and <code>ExpansionPanel</code> component from React material ui 1.0.0-beta.34. However, table is not alligning well. All the body data comes under one header <code>TableCell</code>. 
  Here is my code. </p>
  
  <p>Table component:</p>
  
  <pre><code>    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 (
              &lt;Paper className={classes.paper}&gt;
              &lt;Table&gt;
                  &lt;TableHead&gt;
                      &lt;TableRow&gt;
                           {headItems.map((n, i) =&gt; {
                              return &lt;TableCell className={classes.column} key={i}&gt;{n}&lt;/TableCell&gt;
                          }) }
                      &lt;/TableRow&gt;
                  &lt;/TableHead&gt;
                  &lt;TableBody&gt;
                      {
                          !items.length &amp;&amp;
                          &lt;TableRow&gt;
                              &lt;TableCell colSpan={12} className={classes.center}&gt;
                                  &lt;p&gt;There is no data to display&lt;/p&gt;
                              &lt;/TableCell&gt;
                          &lt;/TableRow&gt;
                      }
                      {items.map((item, i) =&gt; {
                          return (
                              &lt;ExpandableTableRow key={i} item={item}/&gt;
                          );
                      })}
  
                  &lt;/TableBody&gt;
              &lt;/Table&gt;
              &lt;/Paper&gt;
          );
      }
  }
  
  GenericTable.propTypes = {
      items: PropTypes.array.isRequired,
      headItems: PropTypes.array.isRequired,
  };
  
  export default withStyles(styles)(GenericTable);
  </code></pre>
  
  <p>ExpandableTableRow component:</p>
  
  <pre><code>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 (
              &lt;div className={classes.root}&gt;
                  &lt;ExpansionPanel&gt;                    
                      &lt;ExpansionPanelSummary&gt;
                          &lt;TableRow&gt;
                              &lt;TableCell&gt;&lt;Typography&gt;{item.a}&lt;/Typography&gt;&lt;/TableCell&gt;
                              &lt;TableCell&gt;&lt;Typography&gt;{item.b}&lt;/Typography&gt;&lt;/TableCell&gt;
                              &lt;TableCell&gt;&lt;Typography&gt;{item.c}&lt;/Typography&gt;&lt;/TableCell&gt;
                              &lt;TableCell&gt;&lt;Typography&gt;{item.d}&lt;/Typography&gt;&lt;/TableCell&gt;
                              &lt;TableCell&gt;&lt;Typography&gt;{item.e}&lt;/Typography&gt;&lt;/TableCell&gt;
                              &lt;TableCell&gt;&lt;Typography&gt;{item.f}&lt;/Typography&gt;&lt;/TableCell&gt;
                          &lt;/TableRow&gt;
                      &lt;/ExpansionPanelSummary&gt;
  
                  &lt;ExpansionPanelDetails&gt;
                      &lt;Typography&gt;
                          Expansion panel expanded
                      &lt;/Typography&gt;
                  &lt;/ExpansionPanelDetails&gt;
                  &lt;/ExpansionPanel&gt;
              &lt;/div&gt;
          );
      }
  }
  
  ExpandableTableRow.propTypes = {
  
  };
  
  export default withStyles(styles)(ExpandableTableRow);
  </code></pre>
  
  <p>I am trying to make this work. Any help is appreciated.</p>