反応仮想テーブルのデフォルトソートカラム

Question

反応仮想テーブルにデータソースをロードする際に、デフォルトのソートカラムを正しく定義する方法を知りたい。

ここでは、ソート方法を定義していますが、テーブルの列をクリックするとうまくいきます。

ただし、テーブルが初めて表示されるときにデフォルトのソート値を設定する方法が見つかりませんでした。

ここに私たちの実装があります。どんな助けでも大歓迎です。

<Table 
     headerClassName={driversStyles['myHeader']} 
     width={width} 
     height={driversStore.drivers.length > 0 ? 1000 : 0} 
     headerHeight={30} 
     rowHeight={30} 
     rowCount={driversStore.drivers.length} 
     rowGetter={({index}) => driversStore.drivers[index]} 
     className={driversStore.drivers.length > 0 ? driversStyles['main-table'] + " " + driversStyles["heightFix"] : driversStyles['main-table']} 
     rowClassName={this.renderRowClass} 
     sort={this._sort} 
     sortBy={this.state.sortBy} 
     sortDirection={this.state.sortDirection} 
     onRowsRendered={onRowsRendered} 
     ref={registerChild} 
     onRowDoubleClick={({index}) => this._selectDriver(index)} 
     > 
     <Column 
      label='' 
      dataKey='isChecked' 
      width={220} 
      headerRenderer={this._checkboxHeader} 
      cellRenderer={this._checkbox} 
      className={driversStyles['row-cells']} 
     /> 
     <Column 
      label='ID' 
      dataKey='id' 
      width={580} 
      className={driversStyles['row-cells']} 
      headerRenderer={this._headerRenderer} 
      sort={this._sort} 
      sortBy={this._returnCellValue} 
      sortDirection={SortDirection.ASC} 
      columnData={driversStore} 
      cellRenderer={this._returnCellValue} 
     /> 
     <Column 
      label='Driver' 
      dataKey='user.firstName user.lastName' 
      width={width} 
      className={driversStyles['row-cells']} 
      headerRenderer={this._headerRenderer} 
      sort={this._sort} 
      sortBy={this._returnCellValue} 
      sortDirection={SortDirection.ASC} 
      columnData={driversStore} 
      cellRenderer={this._returnCellValue} 
     /> 
     <Column 
      label='Type' 
      dataKey='userRoles' 
      width={width} 
      className={driversStyles['row-cells']} 
      headerRenderer={this._headerRenderer} 
      sort={this._sort} 
      sortBy={this._returnCellValue} 
      sortDirection={SortDirection.ASC} 
      columnData={driversStore} 
      cellRenderer={this._returnCellValue} 
     /> 
     <Column 
      label='Status' 
      dataKey='lifecycleState' 
      width={width} 
      className={driversStyles['row-cells']} 
      headerRenderer={this._headerRenderer} 
      sort={this._sort} 
      sortBy={this._returnCellValue} 
      sortDirection={SortDirection.ASC} 
      columnData={driversStore} 
      cellRenderer={this._returnCellValue} 
     /> 
     <Column 
      label='Hometown' 
      dataKey='user.address.city' 
      width={width} 
      className={driversStyles['row-cells']} 
      headerRenderer={this._headerRenderer} 
      sort={this._sort} 
      sortBy={this._returnCellValue} 
      sortDirection={SortDirection.ASC} 
      columnData={driversStore} 
      cellRenderer={this._returnCellValue} 
     /> 
     <Column 
      label='Mobile' 
      dataKey='user.phone' 
      width={width} 
      className={driversStyles['row-cells']} 
      headerRenderer={this._headerRenderer} 
      columnData={driversStore} 
      cellRenderer={this._returnCellValue} 
     /> 
     <Column 
      label='Last Location update' 
      dataKey='lastLocationUpdate' 
      width={width} 
      className={driversStyles['row-cells']} 
      headerRenderer={this._headerRenderer} 
      sort={this._sort} 
      sortBy={this._returnCellValue} 
      sortDirection={SortDirection.ASC} 
      columnData={driversStore} 
      cellRenderer={this._returnCellValue} 
     /> 
     <Column 
      label='Last Location' 
      dataKey='lastLocation' 
      width={width} 
      className={driversStyles['row-cells']} 
      headerRenderer={this._headerRenderer} 
      sort={this._sort} 
      sortBy={this._returnCellValue} 
      sortDirection={SortDirection.ASC} 
      columnData={driversStore} 
      cellRenderer={this._returnCellValue} 
     /> 
     <Column 
      label='Teams' 
      dataKey='teams' 
      width={width} 
      className={driversStyles['row-cells']} 
      headerRenderer={this._headerRenderer} 
      sort={this._sort} 
      sortBy={this._returnCellValue} 
      sortDirection={SortDirection.ASC} 
      columnData={driversStore} 
      cellRenderer={this._returnCellValue} 
     /> 
     <Column 
      label='Tracking' 
      dataKey='tracking' 
      width={800} 
      className={driversStyles['row-cells']} 
      headerRenderer={this._headerRenderer} 
      sort={this._sort} 
      sortBy={this._returnCellValue} 
      sortDirection={SortDirection.ASC} 
      columnData={driversStore} 
      cellRenderer={this._returnCellTrackingValue} 
     /> 
     </Table> 

Answer 1

は、あなたがちょうどあなたがソートするデフォルトの列と方向にあなたのstateのsortByとsortDirectionプロパティを初期化...

1. を提供スニペット<Table/> JSXを考えます。
2. データが最初にこの列と方向でソートされていることを確認してください。 （換言すれば、あなた自身のthis._sort関数または同等のものを呼び出します）。

反応仮想化Tableデモがこれを行います。ソースコードはhereです。