Sorting problem

Expected Behavior

When I sort the first column, the request will be sent to the server, and it shows the new data received from server.

Current Behavior

In server-side mode, when do sorting, the table will sort the data(previously displayed in the table) first and then it shows the new data received from server-side.

Steps to Reproduce (for bugs)

`const options = { filterType: ‘dropdown’, responsive: “stack”, download: false, print: false, selectableRows: false, serverSide: true, count: reduxState.total, page: conditionState.page, rowsPerPage: conditionState.pageSize, rowsPerPageOptions: [10, 15, 20],

        onChangePage: (currentPage) => {
            pageChange(currentPage);
            asyncLoadData();
        },

        onChangeRowsPerPage: (numberOfRows) => {
            pageSizeChange(numberOfRows);
            asyncLoadData();
        },

        onSearchChange: (searchText) => {

        },

        onColumnSortChange: (changedColumn, direction) => {
            let order = 'desc';
            if (direction === 'ascending') {
                order = 'asc';
            }
            sortedChange(changedColumn, order);
            asyncLoadData();
        },
    };`

Supposed that I have 100 data in the database. and the ids in the db iare from 1-100 and I will query the data with four params namely page, pageSize, sortColumn, order; So

1. load the data from server-side with request url ‘/getData?page=0&pageSize=4’, It all works fine when I do pageChange, pageSizeChange.
2. Sopposed that the data structure is [ {“id”: 10, “name”: test-10}, {“id”: 5, “name”: test-5}, {“id”: 3, “name”: test-3}, {“id”: 12, “name”: test-12}, ]
3. If I want to sort the first column ‘id’, the request url request ‘/getData?page=0&pageSize=4&column=‘id’&order=‘asc’’ The expected result should be [ {“id”: 1, “name”: test-1}, {“id”: 2, “name”: test-2}, {“id”: 3, “name”: test-3}, {“id”: 4, “name”: test-4}, ]

BUT, on the ui side, when I click the id column, the data in table FIRST changed to [ {“id”: 3, “name”: test-3}, {“id”: 5, “name”: test-5}, {“id”: 10, “name”: test-10}, {“id”: 12, “name”: test-12}, ] that means the table sort the data in browser memory first. And then when the request data returned, the table refreshed and display the data received from server-side.

Your Environment

Tech	Version
Material-UI
MUI-datatables
React
browser
etc

[gabrielliwerant]

@tomgazit Thanks for pointing out the version. That does help me find a potential issue, though I’m not sure if it’s the one first posted here.

What I find is that the sort direction is not preserved after the state is updated with the new data. However, that is expected when using serverside: true, as that means that the dev takes responsibility for keeping the state up to date. If the sort direction is tracked and passed in when the data updates, then as expected, its state will be maintained. I modified the codesandbox example to demonstrate that (only works for the “Name” column): https://codesandbox.io/s/muidatatables-custom-toolbar-b6vuz?fontsize=14.

One issue I found is that it’s not clear from the documentation what sortDirection should be used when the sorting should be left untouched. I think that can be improved in the docs as well as the API, to include an option as part of the enum that makes this obvious.

Is there another issue here that I’m missing?

[gabrielliwerant]

Thank you @tomgazit, that’s very thoughtful, but it’s not quite what I had in mind. I self-assigned this ticket so I could work on it, but it looks like it’s past time I set up some contribution guidelines so that people don’t get confused! 😃