React-admin: ReferenceField: allow specifying sort column

[tomaszmadeyski]

Currently when you add ReferenceField like this

<ReferenceField label="Post" source="post_id" reference="posts">
      <TextField source="title" />
</ReferenceField>

and once you click on the column header to sort it will be sorted by post_id and not title.

Fix for this would be allowing to specify which column should be passed in sort specification in query string.

It can be seen on official demo - go to orders and click on Customer column.

So in the end such sorting is very confusing from user's perspective since sorting by id is not relevant information.

There's already (not mine) StackOverflow question about that (with no answers)

[style2joy]

thanks for bringing it here.. hope it gets some attention.

[afilp]

I would also need a fix for this, sorting by the irrelevant id shows wrong results on the Datagrid.
(not sure how to fix this myself, is it a server-side problem?)

[Chusynuk]

Hey I have the same problem, trying to sort this fields using the sort prop from admin-on-rest documentation.

should I use reference on each Texfield tag? thx

<List 
{...props}
      sort={{ field: "username", order: "DESC" }}
      title="Admin Users"
    >
      <Datagrid>
        <TextField source="username" label="username" />
        <TextField source="role" label="role" />
        <DateField source="created_at" label="created_at" type="date" />
      </Datagrid>
    </List>

[ArneZsng]

Hi, just to be clear: Nobody is currently working on this, right? If not, I would probably work on a PR to get this functionality in. I assume it would make the most sense to add this to next?

[fzaninotto]

I confirm that nobody from my team is currently working on it (we assign issues when we start working on them). New features should be PRed against next.

I'm looking forward to reading your contribution!

[ArneZsng]

@fzaninotto I made a proposal in #1746, please let me know what your thoughts are.

[zifnab87]

@ArneZsng in our case we decided to not sort any column that has ReferenceFields.. I am curious how do you sortBy let's say by name column of the ReferenceField.. I know that ReferenceFields make separate requests (all at once for all ids in the specific page). I don't see how this would work - it is essentially a client-side join with sort and pagination which would need the whole dataset on the client-side to be able to have consistent sorting and pagination - am I wrong? it is not just ok to sort by name whatever is on a specific page because next page will have things that are not guaranteed to be next in name sorting. Unless you delegate it to the backend (I will check the code during the next days) Thanks!

[ArneZsng]

@zifnab87 My approach (now found in https://github.com/marmelab/react-admin/pull/1755) will just swap out the sorting parameter for the GET request if sortBy is present on a reference field.

Example: If the source of you reference field is ID, that source information is used for two things:

• Constructing the link of each row
• Setting the sorting parameter on the column which will be passed on to the request

Now, how the request is handled depends on your REST/GraphQL plugin, but in our case, that sorting is handled by the API so right on the database.

What my PR does is that in case a sortBy is set on the column, it will use that attribute for sorting. If sortBy is not set, it will revert to source.
For generating the link, source is always used.

[afilp]

@ArneZsng I looked at your code, I could not find how the "SortBy" gets to the server side for the entire collection there. Is your solution for the first page sorting?
@zifnab87 Did you figure out another solution maybe?

This problem is showing results in the table that seem "buggy".

[ArneZsng]

@afilp Do you have an example you could point me to? My solution is just changing the sorting parameter that is used, it doesn't add any sorting (neither client nor server side in itself). All it does is telling the controller which param to sort by when a list is sorted by the given column.

The main change is this: https://github.com/marmelab/react-admin/pull/1755/files#diff-498f77ab670b21ce38a7b62b00ff6625R43

It will set the sort param for a given column to sortBy if sortBy is present. Otherwise it will default to source as it does currently. Doing the actual sorting still depends on your API client and API server.

[zifnab87]

@afilp even though this is a nice feature it makes it difficult to support it for arbitrary queries to the back-end in our case.. so we have disabled sorting for reference fields on the front-end

[afilp]

@zifnab87 I am afraid this makes the "sort" feature very problematic, because it will seem strange to the end user that some columns are sortable and some others not without any reasonable explanation (the end user should not care if the field is a reference or not).

[fzaninotto]

Fixed by #1755

[brownieboy]

Adding a sortBy property made to a ReferenceField column in a DataGrid made no difference to sorting for me.

I'm using the Firebase Realtime db via the ra-data-firebase-client. I'm guessing that this is probably a back-end limitation.

[fzaninotto]

@brownieboy Please use StackOverflow to ask for help. We don't provide support via GitHub issues.