How to reset the sort column & direction on some external event to DataTable?

[sk364]

Issue Check list

• [x] Agree to the Code of Conduct
• [x] Read the README
• [x] You are using React 16.8.0+
• [x] You installed styled-components
• [x] Include relevant code or preferably a code sandbox

Description

Update of defaultSortField & defaultSortAsc props doesn't change the sort column & direction.

Relevant Code

// Table.jsx

import React from "react";
import DataTable from "react-data-table-component";
import { connect } from "react-redux";
import TitleCell from "./TitleCell";

const columns = [
{
    id: "title",
    name: "Title",
    sortable: true,
    right: true,
    cell: row => <TitleCell row={row} />
},
{
    // ... more sortable columns
}
];

const Table = props => {
    const { data, sortColumn, sortDirection, onSort } = props;
    const handleSort = (column, direction) => onSort(column.id, direction);

    return(
        <DataTable
            data={data}
            columns={columns}
            onSort={handleSort}
            sortFunction={r => r}
            defaultSortField={sortColumn}
            defaultSortDirection={sortDirection}
    );
};

export default connect(
    state => {
        return {
            data: getTableData(state),
            sortColumn: getSortColumn(state),
            sortDirection: getSortDirection(state)
        };
    },
    dispatch => {
        onSort: (sortColumn, sortDirection) => dispatch(Actions.changeSort(sortColumn, sortDirection)
    }
)(Table);

// tableReducer.jsx

const initialState = {
    sortColumn: "some_default_col",
    sortDirection: "asc"
};

export const tableReducer = (state = initialState, action) => {
    switch(action.type) {
        case "CHANGE_SORT":
            return { ...state, sortColumn: action.sortColumn, sortDirection: action.sortDirection };
    }
}

Steps to reproduce

• Click on any other column than the default in the table header to update the sort.
• On some external event (such as button click), reset the table reducer's sortColumn & sortDirection to defaults again. (this will update the Table component props, but DataTable's sort remains the same)

Expected behavior

Update in the defaultSortField & defaultSortDirection props should rerender the datatable to the updated sort column & direction.

Additional context

Like paginationResetDefaultPage, a prop like sortResetDefault can solve the issue.

[sk364]

@jbetancur any updates?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sk364]

Ping!