react-virtualized table 中的默认排序列

Question

我们想知道在将数据源加载到反应虚拟化时如何正确定义默认排序列 table。

现在我们正在定义一个排序方法并且工作正常，一旦我们点击 table 列。

然而，当 table 首次显示时，我们找不到设置默认排序值的方法。

这是我们的实现。非常感谢任何帮助。

    <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

鉴于您提供的代码段 <Table/> JSX...

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

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

react-virtualized table 中的默认排序列

default sort column in react-virtualized table

reactjs

react-virtualized