React-virtualized Multiple Column Sort, sorting after loading

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

pfong · Accepted Answer · 2018-11-13 05:33:25Z

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',
 },
 });

answered Nov 13, 2018 at 5:33

pfong

212 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-virtualized Multiple Column Sort, sorting after loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related