mui-datatables: sortDirection cannot be applied for more than one column.

If we apply sortDirection for more than one column, it is throwing an error.

Expected Behavior

sortDirection should work for all the column in case we update the state.

Current Behavior

Open the console, apply sort direction for more than one column it is throwing an error as sortDirection can be applied for only one column.

Steps to Reproduce (for bugs)

open the console.
In the state, define sortDirection in an array.
Include this sort direction from state in column.
Now reload the dataTable, It is throwing an error as sortDirection can applied for only one column, if we try to use more than one column it will take the first column only. Sample code:

this.state: {
             page: 0,
          count: 1,
          changedColumn: null,
          sortDirection: ['asc','none','none','none','none','none','none', 'none'], ...
     }
sortColumnChange(sortDirection) {
this.setState ...
}
render() {
const columns = [
            {
                name: 'reAlias',
                label: 'Alias',
                options: { sortDirection: this.state.sortDirection[0] }
            },
            {
                name: 'cookieGroup',
                label: 'Group',
                options: { sortDirection: this.state.sortDirection[1] }
            }, ...
}
## Your Environment
<!--- Include as many relevant details about the environment with which you experienced the bug. -->

| Tech         | Version |
|--------------|---------|
| Material-UI  |  |
| MUI-datatables  |    2.11.1     |
| React        |         |
| browser      |     chrome    |
| etc          |         |

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 18 (7 by maintainers)

Most upvoted comments

Are you saying that this is not working for 'none' also? If so that’s a bug. But your example has a bunch of directions set, so I’m not sure.

yeah @gabrielliwerant . This is not working for none also.If you set none for other columns, the console error is there.

T-pirithiviraj on Oct 1, 2019

Hey @gabrielliwerant , thank you and great work!

I finally understand how it works now, and it works wonderfully.

I might make a small little example to show how it works for future reference because I have referred to many examples that so many users here have contributed.

Thanks again for the library! Also thanks to @T-pirithiviraj for creating three issues for this sorting problem haha.

Sorting Example

danielbyun on Oct 4, 2019

Not being able to set more than one sort direction at once is intentional and won’t be fixed, however, 'none' does not count as a direction, and should be allowed. Pardon my confusion, as I couldn’t understand the issue based on the attempts to apply sort direction, whereas what should be allowed is removing a sort direction with the 'none' option.

gabrielliwerant on Oct 1, 2019

Hello @danielbyun. Firstly, you’d have to track each column sort direction separately. As of now, if you use the same nameColumnSortDirection for all of them, it will try to set all of them at once, and you’ll get the error. You could try an array instead:

(psuedocode)

state = {
  columnSortDirections: [
    'none',
    'none',
    'asc',
    'none'
  ]
};

const columns = {
  {
    name: 'Name',
    options: { sortDirection: this.state.columnSortDirections[0] }
  },
  {
    name: 'Location',
    options: { sortDirection: this.state.columnSortDirections[1] }
  },
  {
    name: 'Title',
    options: { sortDirection: this.state.columnSortDirections[2] }
  },
  {
    name: 'Salary',
    options: { sortDirection: this.state.columnSortDirections[3] }
  }
};

Then you can try to set it accordingly so that only one is sorted at a time:

(psuedocode)

const mySortHandler = (column, sortDirection, data) => {
  let newColumnSortDirections = ['none', 'none', 'none', 'none'];
  newColumnSortDirections[column.index] = sortDirection;

  this.setState({ columnSortDirections: newColumnSortDirections });
}

gabrielliwerant on Sep 30, 2019

Hello,

Here is a small example of what I’m trying to do. I’ve actually pulled this from @gabrielliwerant 's example for issue #468 .

https://codesandbox.io/s/muidatatables-custom-toolbar-tl55g

As you can see in the console, sortDirection is set for more than one column. Only the first column will be considered. warning is given.

If we just use your example, the ‘Name’ column sorts fine (whether it actually sorts perfectly, doesn’t matter). How would I approach filtering the ‘Title’ column as well, if needed, filtering all of the columns (individually)?

*note: not trying to apply multiple sorting, at least not yet.

I keep track of nameColumnSortDirection in my state and assign that to sortDirection for my first column. But I need to have sortDirection for my other columns as well to keep track of the ‘direction’ it’s going.

Thank you for your guidance. Once again, I really appreciate this library. Thank you in advance!

danielbyun on Sep 30, 2019