Question

我们想知道在将数据源加载到react-virtualized表时如何正确定义默认排序列。

现在我们正在定义排序方法，并且在我们点击表格列后工作正常。

但是，当第一次显示表格时，我们无法找到设置默认排序值的方法。

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

    <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/> ......

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

反应虚拟Table演示就是这样做的。您可以看到其源代码here。

react-virtualized表中的默认排序列

1 个答案: