reactjsアプリケーションでページングとソートを行う方法は？

Question

私たちは に並べ替えとページングを行うことができるように私たちのreactjs application.Iが としてデータを表示するテーブルを追加した反応物質を必要とする： -

今

<Table height={this.state.height} fixedHeader={this.state.fixedHeader} fixedFooter={this.state.fixedFooter} selectable={this.state.selectable} multiSelectable={this.state.multiSelectable} > 
     <TableHeader displaySelectAll={this.state.showCheckboxes} adjustForCheckbox={this.state.showCheckboxes} enableSelectAll={this.state.enableSelectAll} > 
     <TableRow> 
      <TableHeaderColumn colSpan="3" tooltip="Super Header" > 
       <h5 className="mgn20">Employee Details</h5> 
      </TableHeaderColumn> 
     </TableRow> 
     <TableRow> 
      <TableHeaderColumn tooltip="The ID">ID</TableHeaderColumn> 
      <TableHeaderColumn tooltip="The Name">Name</TableHeaderColumn> 
      <TableHeaderColumn tooltip="The Status">Status</TableHeaderColumn> 
     </TableRow> 
     </TableHeader> 
     <TableBody displayRowCheckbox={this.state.showCheckboxes} deselectOnClickaway={this.state.deselectOnClickaway} showRowHover={this.state.showRowHover} stripedRows={this.state.stripedRows}> 
     {tableData.map((row, index) => (
      <TableRow key={index} selected={row.selected}> 
      <TableRowColumn>{index}</TableRowColumn> 
      <TableRowColumn>{row.name}</TableRowColumn> 
      <TableRowColumn>{row.status}</TableRowColumn> 
      </TableRow> 
      ))} 
    </TableBody> 
     <TableFooter adjustForCheckbox={this.state.showCheckboxes}> 

     </TableFooter> 
</Table> 

で、私は改ページをしたいし、また、テーブルのヘッダ列 に我々はをソートを必要としています。だから、reactjsでは、どのようにこれらの2つの機能 を追加できますか？

Answer 1

Ant Designは、Reactコンポーネントの世界の "Bootstrap"になると思われるコンポーネントをリリースしました。あなたのテーブルコンポーネントはここにあります：https://ant.design/components/table/ - あなたが求めていたようにページ分割とソートを行います。

ドキュメントは素晴らしく、スタイルも非常に簡単です。

ページングを処理する独自のコンポーネントを作成する場合は、現在のページ、テーブル内の行の総数、ページあたりの結果の数を制御するもの、前後に何かを追跡する必要がありますページ。これらの状態を制御できるようになると、要求/ロードする必要のあるデータとそのロード方法を知ることは簡単になります（つまり、すでにデータをメモリに格納している場合は、必要な場合、またはAPIからフェッチする必要がある場合は、要求を行う必要がある状態になります）。

希望に役立ちます！