Wie gruppiere Tabelle in reactjs?

Question

Ich verwende das Table Control aus der Material-UI, um die Daten anzuzeigen, aber im Moment habe ich die Anforderung, die Gruppendaten mit Expand- und Collaped-Daten anzuzeigen.Ist da ein Paket vorhanden, um dieses Ziel zu erreichen?

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

Die Tabellenkomponente unterstützt derzeit keine Expansion unterstützen, aber Sie können um hacken, dass die erweiterbare Karte Komponente, so stellen Sie sicher, dass Sie die vertikale Ausrichtung der Zeile anzupassen.

Hier ist ein Code-Schnipsel:

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