default sort column in react-virtualized table

Question

We would like to know how to properly define a default sort column when loading a datasource to a react-virtualized table.

Right now we're defining a sort method and is working fine, once we click on the table columns.

However we couldn't find a way to set a default sort value when the table is displayed for the first time.

Here's our implementation. Any help is greatly appreciated.

    <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

Given the snippet <Table/> JSX you provided...

1. Just initialize your state's sortBy and sortDirection properties to the default column and direction that you want to sort by.
2. Make sure the data is initially sorted by this column and direction. (In other words, call your own this._sort function or its equivalent).

The react-virtualized Table demo does this. You can see its source code here.