reactjs에서 테이블을 그룹화하는 방법?

Question

Material UI의 Table 컨트롤을 사용하여 데이터를 표시하고 있지만, 지금은 그룹 데이터를 확장 및 축소 된 데이터와 함께 표시해야한다는 요구 사항이 있습니다.이 목표를 달성 할 수있는 패키지가 있습니까?

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> 

시도 할 수