ReactJS mit Material-UI: Wie sortiere ich ein Array von Material-UIs <TableRow> alphabetisch?

Question

Zur Zeit rende ich Material-UI <Table>'s<TableRow> (http://www.material-ui.com/#/components/table) mit einem Array von <TableRow>s und .map(). Jede <TableRow> hat eine <TableRowColumn>, die einen Vornamen darstellt, so wie <TableRowColumn>Josh</TableRowColumn>.

Aber, wenn ein Benutzer eine Taste drückt, möchte ich das <TableRow> Array alphabetisch nach dem ersten Namen <TableRowColumn>'s sortieren. Sagen wir zum Beispiel von 10 <TableRow>s, wenn das Array [0] einen Vornamen Conny und Array [1] Adrian hätte, würde das Array [1] Array [0] werden.

Was wäre der richtige Ansatz dazu? Jede Führung oder Einsicht würde es sehr schätzen.

EDIT

Jede Reihe würde mit dem Array rows wie so wiedergegeben werden, die Objekte mit Eigenschaften firstName und favColor hat:

 { 
      rows.map((row) => { 
      return(
       <UserRow 
       firstName={row.firstName} 
       favColor={row.favColor} 
       /> 
      ) 
      }) 
     } 

und jede Reihe ist wie so festgelegt:

const UserRow = (props) => { 
    const {firstName, favColor} = props 

    return (
    <TableRow> 
     <TableRowColumn>{firstName}</TableRowColumn> 
     <TableRowColumn>{favColor}</TableRowColumn> 
    </TableRow> 
) 
} 

Answer 1

Ich würde das Array vor der Anwendung dersortierenOperation, die die TableRows erstellen wird.

Die reaktive Denkweise ist deklarativ. Dies bedeutet, dass Sie auf einer visuellen Ebene die Elemente so bereitstellen sollten, wie sie angezeigt werden sollen. Daher werden sie sortiert, bevor sie an die Ansichtskomponente übergeben werden.

Zum Beispiel (ich nicht Material-ui-Elemente, da das Beispiel in der Stackoverflow-Setup ausführen nicht verwenden konnten Ersetzen Sie einfach alle Elemente TableComponent mit ihrem Material-ui Alter Ego..):

const data = [ 
 
    {firstname: "John", lastname: "Rover", id:12}, 
 
    {firstname: "Bob", lastname: "Taylor", id:24}, 
 
    {firstname: "Lucy", lastname: "Heart", id:43} 
 
] 
 

 
// The table component is unaware of the data order operations 
 
const TableComponent = ({tableData}) => <table><tbody> 
 
    {tableData.map(d=> <tr key={d.id}> 
 
     <td>{d.firstname}</td> 
 
     <td>{d.lastname}</td> 
 
    </tr>)} 
 
</tbody></table> 
 

 
// The parent component takes care of feeding the Table 
 
// component with the data in the correct order. 
 
class App extends React.Component { 
 
    state = { sortBy: "firstname"} 
 
    handleChange = (event) => this.setState(
 
    {sortBy: event.target.value} 
 
); 
 
    render() { 
 
    const {data} = this.props; 
 
    const {sortBy} = this.state; 
 
    const sortedData = data.sort((a,b) => a[sortBy]>b[sortBy]?1:-1) 
 
    return <div> 
 
     Sort by 
 
     <select value={sortBy} onChange={this.handleChange}> 
 
     <option value="firstname">First Name</option> 
 
     <option value="lastname">Last Name</option> 
 
     </select> 
 
     <h2>The table: </h2> 
 
     <TableComponent tableData={sortedData} /> 
 
    </div> 
 
    } 
 
} 
 
    
 
ReactDOM.render(
 
    <App data={data} />, 
 
    document.getElementById('root') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="root"></div>

Answer 2

Hier ist ein vollständiges Beispiel einer App mit einer Tabelle, wo die Zeilen sortiert werden können, indem Sie auf die Überschrift klicken. Kommentare sind inline und the full example is available here

Der Status der Tabelle enthält die Zeilen, die sortiert werden, wenn auf eine Spaltenüberschrift der Tabelle geklickt wird, sowie den Eigenschaftsnamen der sortierten Spalte.

import React from 'react'; 
 
import { MuiThemeProvider} from 'material-ui'; 
 
import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui'; 
 

 
// properties of TableHeader component 
 
let headerProps = { 
 
    enableSelectAll: false, 
 
    displaySelectAll: false, 
 
    adjustForCheckbox: false 
 
}; 
 

 
// initial set of rows, simulating data from the database 
 
let rows = [ 
 
    {firstName: "Adrian", favColor: "gold", uniqueId: 0 }, 
 
    {firstName: "Alma", favColor: "green", uniqueId: 1 }, 
 
    {firstName: "Conny", favColor: "black", uniqueId: 2 }, 
 
    {firstName: "Jane", favColor: "blue", uniqueId: 3 } 
 
]; 
 

 
// our table hader information, key is the name of the 
 
// property to sort by when the header is clicked 
 
let headers = [ 
 
    {name: "First Name", key: "firstName"}, 
 
    {name: "Favorite Color", key: "favColor"} 
 
]; 
 

 

 
// our table component that can sort columns 
 
class SortableTable extends React.Component { 
 
    
 
    constructor(props){ 
 
    super(props); 
 
    this.state = {rows, sortBy: 'firstName'}; 
 
    } 
 

 
    renderHeaders(){ 
 
    let header= headers.map((h) => { 
 
     return <SortableHeader 
 
       key={h.key} 
 
       name={h.name} 
 
       onClicked={()=>this.updateSortBy(h.key)} 
 
       isSortColumn={this.state.sortBy == h.key}/> 
 
    }); 
 
    return <TableRow>{header}</TableRow>; 
 
    } 
 
    
 
    renderRows() { 
 
    return this.state.rows.map((row, i) => <UserRow {...row} key={row.uniqueId}/>); 
 
    } 
 
           
 
    updateSortBy(sortBy){ 
 
     // multiple clicks on the same column reverse the sort order 
 
     if(sortBy == this.state.sortBy){ 
 
     this.setState({rows: [...this.state.rows.reverse()]}); 
 
     return; 
 
     } 
 
     
 
     let rows = [...this.state.rows]; 
 
     rows.sort((a,b) => { 
 
     if (a[sortBy] < b[sortBy]) 
 
      return -1; 
 
     if(a[sortBy] > b[sortBy]) 
 
      return 1; 
 
     return 0; 
 
     }); 
 
     
 
     this.setState({rows, sortBy}); 
 
    } 
 

 
     
 
    render() { 
 
    return (
 
     <MuiThemeProvider> 
 
     <Table> 
 
      <TableHeader {...headerProps}> 
 
       {this.renderHeaders()} 
 
      </TableHeader> 
 
      <TableBody> 
 
      {this.renderRows()} 
 
      </TableBody> 
 
     </Table> 
 
     </MuiThemeProvider> 
 
    ); 
 
    } 
 
} 
 

 
    
 
    
 
function SortableHeader(props){ 
 
    let style = { 
 
    cursor: "pointer" 
 
    } 
 
    if(props.isSortColumn){ 
 
    style.fontWeight = "bold"; 
 
    style.color = "black"; 
 
    } 
 
    
 
    return (
 
    <TableHeaderColumn> 
 
     <div style={style} onClick={() => props.onClicked()}>{props.name}</div> 
 
    </TableHeaderColumn> 
 
); 
 
} 
 
    
 

 
function UserRow(props){ 
 
    return (
 
    <TableRow> 
 
     <TableRowColumn>{props.firstName}</TableRowColumn> 
 
     <TableRowColumn>{props.favColor}</TableRowColumn> 
 
    </TableRow> 
 
); 
 
} 
 

 
export default SortableTable;