反应虚拟化表中的默认排序列

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

鉴于您提供的 sn-p <Table/> JSX...

1. 只需将state 的sortBy 和sortDirection 属性初始化为您想要排序的默认列和方向。
2. 确保数据最初按此列和方向排序。 （换句话说，调用您自己的 this._sort 函数或其等效函数）。

react-virtualized Table 演示就是这样做的。你可以看到它的源代码here。