Sort Column Gets Reset (Server-Side Data)

[Ahsan-R-Kazmi]

The sort column direction is getting reset after new data is retrieved from the server and set in the table. It also gets reset on page changes, rows per page changes, and search text changes. Is this intended behavior, and is there any way to override it?

Expected Behavior

The sort column should not change when new data is retrieved and set from the server.

Current Behavior

The sort column direction is getting reset after new data is retrieved from the server and set in the table. It also gets reset on page changes, rows per page changes, and search text changes.

[gabrielliwerant]

This is expected behavior with sever side, at the moment. The table does not currently have any way to distinguish which options individually you are managing server side vs client, so server side opts you in to all of them, more or less. This means you have to take the reigns and make sure the various options have the values you want when you update your data.

[Ahsan-R-Kazmi]

Could you point me to the right direction on how to set that for the table state? I tried looking through the options, but can't find which option I need to set to choose the sort direction of the column.
I also tried setting the columns that are provided to the MUIDataTable component through set state, but it doesn't seem to maintain it in the tableState the next time onTableChange is called.

case 
"sort" : {
   let sortColumnIndex = tableState.activeColumn;
   let columnInfo = tableState.columns[sortColumnIndex];
   let orderByParam = columnInfo["name"];
   let orderByDirection = columnInfo["sortDirection"];
   this.setState({columns: tableState.columns});
   console.log("Table sorted");
   this.getData(this.state.page, this.state.rowsPerPage, this.state.searchText, orderByParam, 
   orderByDirection);
   break;
 }

[gabrielliwerant]

Should be this one under column options:

[T-pirithiviraj]

@Ahsan-R-Kazmi , You can refer to this. You might get some idea.

https://github.com/gregnb/mui-datatables/issues/244#issuecomment-533260448
https://github.com/gregnb/mui-datatables/issues/947
https://github.com/gregnb/mui-datatables/issues/954

[Ahsan-R-Kazmi]

So it seems, it works properly if I do something like:

this.state.columns.forEach((column, index) => {
            if (column.name === orderByParam) {
                column.options.sort = true;
                column.options.sortDirection = orderByDirection;
            } else {
                column.options.sort = true;
                column.options.sortDirection = "none";
            }
        });

but not if I get the exact same information from the server and use react to set the state (which is the way react would prefer, since the state should be immutable.)

this.setState({columns: columns});

[patorjk]

I have a PR in that may make this easier to mange: #1086

Also, I implement the sort idea expressed here: #706 - Basically instead of tracking the table sort in the columns object, it would be a property on the options object. Personally I find this a lot easier to manage. If there's interest I could make a PR for that.

[nora-sch]

Hello!
I got a similar "error" when I check the columns which I hide with display:"false" - sorting and also server side pagination action reset the columns what I add when table is already loaded. I can only add new columns if I sort before, but if I change the page I need to do it again...

[patorjk]

@nora-sch what version of the table are you using? The PR I mentioned in my previous post got merged in and should mostly fix this problem. I'd recommend creating a new issue with a codesandbox showing the problem if it's still happening in the latest version.

[kneliba]

@patorjk I am having this issue as well. Having serverSide: true with custom pagination does not perserve the hidden columns selected in the viewColumns dialogue upon clicking to another page in the table. I think a fix for this would be #1613 which allows for setting the viewedColumns in options, similarly to the 'rowsSelected' or 'sortOrder' option.