ReactJS với Material-UI: Cách sắp xếp một mảng Material-UI's <TableRow> theo thứ tự abc?

Question

Hiện tại, tôi hiển thị <Table>'s<TableRow> (http://www.material-ui.com/#/components/table) của Material-UI với một mảng <TableRow>s và bằng cách sử dụng .map(). Mỗi <TableRow> có một số <TableRowColumn> đại diện cho tên đầu tiên, như vậy <TableRowColumn>Josh</TableRowColumn>.

Nhưng nếu người dùng nhấn một nút, tôi muốn sắp xếp <TableRow> mảng theo thứ tự bảng chữ cái theo tên <TableRowColumn>'s. Vì vậy, ví dụ như trong số 10 <TableRow>s, nếu mảng [0] có tên đầu tiên là Conny và mảng [1] có Adrian, muốn mảng [1] trở thành mảng [0].

Cách tiếp cận phù hợp với điều này là gì? Bất kỳ hướng dẫn hoặc cái nhìn sâu sắc nào sẽ được đánh giá rất cao.

EDIT

Mỗi hàng sẽ được trả lại như vậy với mảng rows, có đối tượng với tính firstName và favColor:

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

Và mỗi hàng được định nghĩa như sau:

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

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

Answer 1

Tôi sắp xếp mảng trước khi áp dụngHoạt độngsẽ tạo ra TableRows.

Cách suy nghĩ phản ứng là khai báo. Điều này có nghĩa là ở cấp độ trực quan, bạn nên cung cấp các phần tử khi chúng được hiển thị. Do đó chúng được sắp xếp trước khi chúng được chuyển tới thành phần khung nhìn.

Ví dụ (Tôi không thể sử dụng yếu tố vật chất-ui từ ví dụ không chạy trong thiết lập stackoverflow Chỉ cần thay thế tất cả các yếu tố của TableComponent với chất liệu-ui của họ thay đổi bản ngã..):

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

Dưới đây là ví dụ đầy đủ về ứng dụng có bảng có thể sắp xếp hàng bằng cách nhấp vào tiêu đề. Nhận xét là nội tuyến và the full example is available here

Trạng thái của bảng chứa các hàng được sắp xếp bất kỳ khi nào tiêu đề cột bảng được nhấp cũng như tên thuộc tính của cột được sắp xếp.

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;