Mui-datatables: Sorting Icon is not coming and sorting direction is always descending.

[T-pirithiviraj]

When a user clicks sorting on specific column, It is always showing descending because of re-render of dataTable.

Expected Behavior

The sorting Icon should display and it shouldn't set always as descending.

Current Behavior

After API call is made the dataTable fetch data and the direction of sorting is always descending.

Steps to Reproduce (for bugs)

1. In render Make server-side = true.
2. call onColumnSortChange().
3. Make API call to fetch sorted column data there.
4. After receiving data populate in dataTable and click on column to sort, it re-renders and erases sortDirection as well as icon

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 4.2.1 |
| MUI-datatables | 2.10.2 |
| React | 16.8.6 |
| browser | chrome |
| etc | |

[rhaicode]

I have encountered the same problem too before. But here's my workaround:

1.) You need to have state management, either using Redux or useContext with useReducer.

2.) On MUIDataTable's component, provide your own custom columns (which is an array of column objects, exported from a certain file (e.g. columns.js) ) for the columns prop.

3.) On each column object, provide your custom column header component on customHeadRender value of each columns' options property

4.) On your custom column header component, import TableSortLabel from material-ui and define a div with an onClick event that:
a.) calls the dispatch method responsible for updating your state that holds the records / data (preferably has the API call to update the records)
b.) updates the direction of TableSortLabel to either "asc" or "desc", set "asc" by default

If you're having difficulty getting it, I'll follow up this comment with a CodeSandbox example.

[gabrielliwerant]

See my comment here https://github.com/gregnb/mui-datatables/issues/244#issuecomment-533260448. You don't have to provide your own customHeadRender, but if you are managing things yourself, serverside, then you need to keep the table up to date with all of the state you wish to be retained, including the sort direction. Otherwise the table doesn't know what your intention was, as it will read its state from the props passed in, and anything not passed in will be empty.

[T-pirithiviraj]

Thanks @gabrielliwerant . @rhaicode/@gabrielliwerant Can you send the codeSandBox example which will be more helpful to proceed further?

[plourenco]

It would be really useful if it was the datatable managing this internal state for us. In a server-side context, the goal is almost always to preserve the state across remote refreshes.

Having to do the whole state management by ourselves like @rhaicode suggested is a burden that the user should avoid. In my particular case, it wears off the purpose of using the table in a server-side situation. This is my suggestion.

[patorjk]

State management now done internally in table as of version 2.15.0. Table will no longer reset internal state on rerender.