[DataGrid] Allow to programmatically sort unsortable columns #11512

MBilalShafi · 2023-12-24T14:57:02Z

Handles colDef.sortable part of #10552

ToDos:

Update docs
Update migration guide

Changelog

Breaking changes

The disabled column specific features like hiding, sorting, filtering, pinning, row grouping, etc could now be controlled programmatically using initialState, respective controlled models, or the API object. See Sorting non-sortable columns programmatically for example.

Preview: https://deploy-preview-11512--material-ui-x.netlify.app/

mui-bot · 2023-12-24T15:01:06Z

Deploy preview: https://deploy-preview-11512--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against 4ded94b

MBilalShafi · 2024-01-01T19:28:20Z

packages/grid/x-data-grid/src/tests/sorting.DataGrid.test.tsx

+    expect(getColumnValues(0)).to.deep.equal(['10', '0', '5']);
+  });
+
+  it('should allow clearing the current sorting using `sortColumn` idempotently', () => {


There was a bug in sortColumn, i.e. on calling sortColumn('field', null), instead of removing the current sort it circulated between ascending and descending sort.

CSB reproduction, keep pressing None button:
Before: https://codesandbox.io/p/sandbox/holy-field-kf2jyd?file=%2Fsrc%2FDemo.tsx%3A63%2C19
After: https://codesandbox.io/p/sandbox/jovial-bash-9kg32f?file=%2Fpackage.json%3A6%2C88

MBilalShafi · 2024-01-02T06:33:57Z

docs/data/data-grid/sorting/sorting.md

@@ -71,6 +71,14 @@ In the following demo, the user cannot use the _rating_ column as a sorting rule

 {{"demo": "DisableSortingGrid.js", "bg": "inline", "defaultCodeOpen": false}}

+### Read-only sorting


Couldn't think of a more appropriate name for this, technically it is read-only but from the perspective of the grid's default UI, it could be implemented on the developer's side to be not-read-only, like in the example below. Read-only sorting could be sold as a use-case, I can imagine it being useful in certain circumstances.
Feel free to suggest more names though.

Yeah I also don't like the name, I think it makes it sound more complicated than it is. What we want to say is that the sortable flag controls whether or not the sorting is enabled for the end-user from the UI. I think I would integrate that information to the paragraph above, in Disable the sorting, and maybe merge both examples together.

In the context of sorting only, I couldn't agree more, but after working on #11538 it seemed to be more than just disabling a column filter. Considering this example https://codesandbox.io/p/sandbox/bold-platform-9jg53c?file=%2Fsrc%2FDemo.tsx%3A41%2C9

The filters will be there in the filter panel with a slightly different experience (disabled/read only) so technically it will impact the default Grid UI

It could be a genuine use-case for some users, imagine some applied filters some of which are not allowed to be changed by a specific user type.

Putting it under a separate heading may improve the discoverability and present this as a concept.

So keeping in mind the behavior for filtering, I thought it'd be better to present this as a concept (read-only object) for other flags too, that way it will be more:

Consistent in different flags (like groupable, pinnable, filterable, sortable, ...)

Discoverable

Help support some specific use cases like [question] - DataGrid Tree Data - Is filtering supported on the grouping cell? #8357 (which could be true even without it but more discoverability may help find it easily)

I might be too pushy here though, so would appreciate others' thoughts on this.

Ok your reasons make sense, let's go with that.

I've read again and I still feel like it should be in the same paragraph as Disable the sorting. Because both paragraph describe the same thing: the behavior of the .sortable flag. They both talk about what happens when sortable: false. Splitting it into a different paragraph makes it somewhat easier to discover that case if one is looking very specifically for that, but it splits the information about the behavior of the flag into two paragraphs/sections. Besides, if someone is looking for that use-case, are they more likely to search the docs for "disable sorting" or for "read-only sorting"? Imho, first one is more likely.

It's a soft disagree though, so if that doesn't convince you let's leave it as it is.

Cool, now there are two options here.

Make it a sub-section or part of Disable the ${featureName} > For columns.

Keep it a separate section, put it on the same nested level as Disable the ${featureName} but name it more generalized (like @cherniavskii suggested) for better discoverability.

I also noticed we miss a global disabling prop (like disableColumnSort) for sorting like we have for every other feature (e.g. disableColumnFilter, disableColumnMenu, disableVIrtualization, ...), that is why we don't have a document structure like this (For all columns and For some columns nested levels) in sorting.

I think we should add this flag to the sorting and if it is missing elsewhere (I have to check) and then make documentation for every feature like so:

### Disable ${featureName} #### For all columns content... #### For some columns content... #### `${featureName}ing non-${featureName}able columns programmatically` content...

This way it will be:

A sub-section of the Disable section (@romgrk's point)

A separate section for this specific option presented as a concept (better for SEO and discoverability)

It will be consistent and aligned in all the objects, thus could be mentioned as a central behavior in docs pages like FAQs.

Any objections?

Another related question, which applies to all the features, should we allow programmatically sorting some columns if the sorting feature is disabled altogether (i.e using the proposed prop disableColumnSorting), I don't think so, wdyt?
@romgrk @cherniavskii

No objection to the first comment.

For the behavior of the disableColumnXxxx flags, I'm not sure what's their use-case. Without context I'd argue that they should control the UI and not disable programmatic actions, just like the column-local flags. But depending on their historic use I could change my opinion. As long as they're all consistent I'm happy.

For the behavior of the disableColumnXxxx flags, I'm not sure what's their use-case.

As how I understand these flags, these refer to disabling the entire feature. Like how the term implies, for instance disableColumnFiltering, the most accurate understanding I can derive from this is turning the entire filtering feature off. That is the reason I suggested not to consider supporting programmatic actions for such features.

Update: I was a bit mistaken on this, disableColumnFilter does allow to control, initialize or use API method to add filters programmatically. It only disables stuff on the UI.
Kept the same behavior on this one too.

docs/data/data-grid/api-object/api-object.md

docs/data/data-grid/sorting/ReadOnlySortingGrid.js

docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md

packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx

MBilalShafi · 2024-01-10T10:07:36Z

New updates:

Added a new prop disableColumnSorting as discussed in [DataGrid] Allow to programmatically sort unsortable columns #11512 (comment)
Updated the documentation to match with all the other features

github-actions · 2024-01-10T19:42:05Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[DataGrid] Allow sortColumn to work for unsortable columns

71bc851

MBilalShafi added breaking change component: data grid This is the name of the generic UI component, not the React module! feature: Sorting Related to the data grid Sorting feature v7.x labels Dec 24, 2023

MBilalShafi mentioned this pull request Dec 24, 2023

[data grid] v7 API: Make the behavior of GridColDef flags consistent #10552

Closed

5 tasks

prettier

df0a8e1

MBilalShafi commented Jan 1, 2024

View reviewed changes

Improve sort icon visibility and add a demo

2007013

MBilalShafi changed the title ~~[DataGrid] Allow api method sortColumn to work for unsortable columns~~ [DataGrid] Allow to programmatially set sort rules for unsortable columns Jan 1, 2024

MBilalShafi added 2 commits January 2, 2024 11:18

Update API object page and a few improvements

76c37a7

Add test

53e6d68

MBilalShafi commented Jan 2, 2024

View reviewed changes

MBilalShafi requested review from romgrk and cherniavskii January 2, 2024 06:40

MBilalShafi marked this pull request as ready for review January 2, 2024 06:40

MBilalShafi changed the title ~~[DataGrid] Allow to programmatially set sort rules for unsortable columns~~ [DataGrid] Allow to programmatially sort unsortable columns Jan 2, 2024

MBilalShafi changed the title ~~[DataGrid] Allow to programmatially sort unsortable columns~~ [DataGrid] Allow to programmatically sort unsortable columns Jan 2, 2024

romgrk reviewed Jan 2, 2024

View reviewed changes

docs/data/data-grid/api-object/api-object.md Show resolved Hide resolved

romgrk approved these changes Jan 3, 2024

View reviewed changes

cherniavskii approved these changes Jan 8, 2024

View reviewed changes

MBilalShafi added 3 commits January 10, 2024 12:51

Add disableColumnSorting prop

0d82f97

Update docs, demos, and props

26e7007

Rename copied stuff :D

ea9cd59

MBilalShafi requested review from romgrk and cherniavskii January 10, 2024 10:07

MBilalShafi mentioned this pull request Jan 10, 2024

[DataGrid] Allow to filter non-filterable columns programmatically #11538

Merged

3 tasks

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 10, 2024

MBilalShafi added 2 commits January 11, 2024 13:09

Merge branch 'next' into fix-10552/sortable

d13ca0a

docs:api

4ded94b

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 11, 2024

cherniavskii approved these changes Jan 11, 2024

View reviewed changes

MBilalShafi merged commit 721fe5c into mui:next Jan 13, 2024
17 checks passed

MBilalShafi deleted the fix-10552/sortable branch January 13, 2024 15:04

MBilalShafi mentioned this pull request Mar 4, 2024

[data grid] onSortModelChange now gets passed sorts with a direction of null. #12271

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Allow to programmatically sort unsortable columns #11512

[DataGrid] Allow to programmatically sort unsortable columns #11512

MBilalShafi commented Dec 24, 2023 •

edited by oliviertassinari

Loading

mui-bot commented Dec 24, 2023 •

edited

Loading

MBilalShafi Jan 1, 2024

MBilalShafi Jan 2, 2024 •

edited

Loading

romgrk Jan 2, 2024

MBilalShafi Jan 3, 2024 •

edited

Loading

romgrk Jan 3, 2024

romgrk Jan 7, 2024 •

edited

Loading

MBilalShafi Jan 8, 2024 •

edited

Loading

MBilalShafi Jan 8, 2024 •

edited

Loading

romgrk Jan 8, 2024

MBilalShafi Jan 8, 2024

MBilalShafi Jan 10, 2024 •

edited

Loading

MBilalShafi commented Jan 10, 2024

github-actions bot commented Jan 10, 2024

		@@ -71,6 +71,14 @@ In the following demo, the user cannot use the _rating_ column as a sorting rule

		{{"demo": "DisableSortingGrid.js", "bg": "inline", "defaultCodeOpen": false}}

		### Read-only sorting

[DataGrid] Allow to programmatically sort unsortable columns #11512

[DataGrid] Allow to programmatically sort unsortable columns #11512

Conversation

MBilalShafi commented Dec 24, 2023 • edited by oliviertassinari Loading

Changelog

Breaking changes

mui-bot commented Dec 24, 2023 • edited Loading

MBilalShafi Jan 1, 2024

Choose a reason for hiding this comment

MBilalShafi Jan 2, 2024 • edited Loading

Choose a reason for hiding this comment

romgrk Jan 2, 2024

Choose a reason for hiding this comment

MBilalShafi Jan 3, 2024 • edited Loading

Choose a reason for hiding this comment

romgrk Jan 3, 2024

Choose a reason for hiding this comment

romgrk Jan 7, 2024 • edited Loading

Choose a reason for hiding this comment

MBilalShafi Jan 8, 2024 • edited Loading

Choose a reason for hiding this comment

MBilalShafi Jan 8, 2024 • edited Loading

Choose a reason for hiding this comment

romgrk Jan 8, 2024

Choose a reason for hiding this comment

MBilalShafi Jan 8, 2024

Choose a reason for hiding this comment

MBilalShafi Jan 10, 2024 • edited Loading

Choose a reason for hiding this comment

MBilalShafi commented Jan 10, 2024

github-actions bot commented Jan 10, 2024

MBilalShafi commented Dec 24, 2023 •

edited by oliviertassinari

Loading

mui-bot commented Dec 24, 2023 •

edited

Loading

MBilalShafi Jan 2, 2024 •

edited

Loading

MBilalShafi Jan 3, 2024 •

edited

Loading

romgrk Jan 7, 2024 •

edited

Loading

MBilalShafi Jan 8, 2024 •

edited

Loading

MBilalShafi Jan 8, 2024 •

edited

Loading

MBilalShafi Jan 10, 2024 •

edited

Loading