Sorting Column Extensions not removing previous sort column
mmatuk opened this issue · comments
Is there an existing issue for this?
- I have searched this repository's issues and believe that this is not a duplicate.
I'm using ...
React Grid
Current Behaviour
Currently, when you pass columnExtensions
to the SortingState
plugin, you must supply sortingEnabled
for every column that you passed. If you forget to pass sortingEnabled: true
, even though sorting is enabled for all columns by default, sorting breaks and does not remove the sorting of the previously selected column.
This is the column extension:
[ { columnName: "name" }, { columnName: "gender", sortingEnabled: false }, { columnName: "city" }, { columnName: "car" } ]
This is what happens when you click on multiple columns to change sorting:
This looks to be caused by a change to the base getPersistentSortedColumns
function. Instead of looking for explicit false, it now just looks for falsely values which means sortingEnabled == undefined
now triggers this code.
This file packages/dx-grid-core/src/plugins/sorting-state/helpers.ts
from this commit 629e905 looks to be the cause of the issue.
Expected Behaviour
Prior to version 3.0.0, you could pass something like this:
[ { columnName: "name" }, { columnName: "gender", sortingEnabled: false }, { columnName: "city" }, { columnName: "car" } ]
and the sorting would handle it correctly and default to sortingEnabled == true
for any column that did not have a sortingEnabled
config set in the columnExtensions
.
I should be able to pass columnExtensions
and not have to provide a config for every column. The function getPersistentSortedColumns
should respect the columnSortingEnabled
prop that is passed to the main SortingState
plugin. Currently is does not.
Steps to Reproduce
See this example: https://codesandbox.io/s/grid-table-sorting-2jok85?file=/demo.js:708-848
- Click on different column headers to change the sorting and notice it does not remove the previous sorting and that the sorting does not update correctly either.
- You can also, change the versions of gird back to something before 3.0.0 and redo step 1 to see how it use to work.
Environment
- devextreme-reactive: 3.0.6
- react: 18.0
- browser: chrome
- bootstrap: none
- react-bootstrap: none
- material-ui: none
Hello @mmatuk,
We refactored our code to follow our documentation. The sortingEnabled property should always be specified and should not be null
or undefined
according to the following help topic: SortingState.ColumnExtension. Could you clarify if it's critical for your project to use the old logic?
Thank you getting back to me. We have a wrapper component around the SortingState that always injects a sortingEnabled value that matches the default sortingEnabled flag into the passed columnExtenstions array. This fixes the issue for us. In my opinion, though, it makes more sense to not require sortingEnabled flag for every column if you only want it enabled for one or two columns. The individual column config should allow overriding the default sortingEnabled flag and if not defined then it should fallback to the default. The current behavior does not do this. If you forget to add a sortingEnabled flag, even if it matches the default, you get some unexpected behavior as seen in the example above.
Your current documentation also does not indicate that if you add the sortingEnabled flag for even one column, then you must add it for every column even if it matches the columnSortingEnabled flag.
Hello @mmatuk,
In our documentation, we add ?
after property names that can be null/undefined. You can see examples here: https://devexpress.github.io/devextreme-reactive/react/grid/docs/reference/sorting-state/#properties. The sortingEnabled
property in SortingState.ColumnExtension
does not have ?
, which means that it should be explicitly defined.
In any case, we appreciate your feedback and we'll consider adding a default value to the sortingEnabled property.