React-virtualized Multiple Column Sort, sorting after loading - react-virtualized

Question

I have implemented VirtualizedTable for multi-sorting columns. What I have found is that you are unable to sort on other columns after rendering.
The following is my sort function in the class
sort = ({ event, sortBy, sortDirection }) => {
const nosort = ['input', 'textarea', 'select', 'option', 'span'].indexOf(event.target.tagName.toLowerCase()) !== -1
if (!nosort && this.props.disableSort !== true) {
this.setState((prevState, props) => ({ sortBy, sortDirection: sortBy === prevState.sortBy ? sortDirection : 'ASC' }))
}
}
As per documentation, this is my sortState
sortState = () => createTableMultiSort(this.sort, defaultSort);
The following is what I am injecting to the component as props
const defaultSort = () => {
return {
defaultSortBy: ['firstColumn', 'secondColumn'],
defaultSortDirection: {
firstColumn: 'ASC',
secondColumn: 'ASC',
}
}
}
This is my headerRenderer
headerRenderer = (tableWidth) => ({ columnData, dataKey, disableSort, label, sortBy, sortDirection }) => {
const showSortIndicator = this.sortState().sortBy.includes(dataKey);
return (
<React.Fragment key={dataKey}>
<div className="ReactVirtualized__Table__headerTruncatedText" title={label}>
{label}
</div>
{showSortIndicator && <SortIndicator key="SortIndicator" sortDirection={this.sortState().sortDirection[dataKey]} />}
<Draggable
axis="x"
defaultClassName="DragHandle"
defaultClassNameDragging="DragHandleActive"
onDrag={(event, { deltaX }) => { this.resizeRow({ dataKey, deltaX, tableWidth }) } }
position={{ x: 0 }}
zIndex={999}
>
<span className="DragHandleIcon" title="Drag icon to expand/collapse the column">⋮</span>
</Draggable>
</React.Fragment>
)
I have read through the code createMultiSort and debugging my own code to see why it had not worked.
Basically, the showSortIndicator is not true, as the sortBy does not contain the column key.
I have tried to input the name of the column in defaultSort as a data type. But that does not seem to work.
What can I do to enable sorting on other columns after rendering? How would those columns be sorted if default sorting has been specified?
TIA
Patrick

Answer 1

Worked out after some time debugging and looking over source code. Seems that you can't specify the defaultSortBy separately as a props to the element. You need to specify when you create the element. Hence as per doc -
const sortState = createMultiSort(sort, {
defaultSortBy: ['firstName', 'lastName'],
defaultSortDirection: {
firstName: 'ASC',
lastName: 'ASC',
},
});