reactjsでテーブルをグループ化するには？

Question

私はマテリアルUIのテーブルコントロールを使用してデータを表示していますが、今はグループデータを展開して折りたたんだデータを表示する必要があります。この目標を達成するためのパッケージはありますか？

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

表コンポーネントは、現在の拡張をサポートしていませんが、拡張カードのコンポーネントを使用して、ちょうどあなたが行の垂直方向の配置を調整することを確認することを周りにハックすることができます。

ここでは、コードスニペットです：

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