1

Following a suggestion made here: Get ReferenceManyField Count? I am using a ReferenceManyField in react admin, combined with a custom field to display the count of the returned records, rather than any of the specific data fields from the reference

import * as React from "react";
import {Datagrid, List, TextField, NumberField, ReferenceManyField} from 'react-admin';

const ShowTotalField = props => <div>{props.total}</div>;

const TeamList = props => {
    return (
        <List {...props}>
            <Datagrid rowClick="edit">
                <TextField label="Team" source="teamName" />
                <ReferenceManyField label="Headcount" reference="reviews" source="teamName" target="team" link={false}>
                    <ShowTotalField />
                </ReferenceManyField>
                <TextField source="managerName" />
                <TextField source="parentTeam" />
                <NumberField source="averageTotal" />
            </Datagrid>
        </List>
    );
};

export default TeamList;

My problem is that I don't know how to sort the DataGrid by the rendered value in the custom field ie. the count. Clicking on the column header isn't following a natural sort that I would expect.

I can see documentation to show how to specify a different field to sort by from the target resource: https://marmelab.com/react-admin/List.html#specifying-a-sort-field

However, because the value I'm sorting on (a generated count value) is not available in the target resource, there's no different field I can specify

How can I achieve the behaviour of being able to sort by this generated value? Or failing that, setup the resource or dataprovider to allow to return a custom calculated value

Thanks, mikee

tubbs_uk
  • 31
  • 5

1 Answers1

0

I've come to realise (although possibly it's fairly obvious) that I can't affect the sorting of my list if the field I'm sorting doesn't exist in the original resource.

My use case is probably fairly unique, I'm using the local-only fake-rest component supplied because I purposely want the data to only exist in the browser unless imported/exported (no network or DB to expose sensitive data). If I had a more typical backend service supplying the data, I could supply the "generated" values from the backend, avoid doing it dynamically in the browser and let the UI sort on them naturally.

So what I've done is some reasonably hacky stuff in my custom dataprovider to have local data structures which I keep in sync when updating/creating/deleting on one resource - then call the update function in the other resource to pass through the new "generated" values. This lets me use the sorting/pagination/filtering on that field as if it naturally existed in that resource. So no ReferenceField or custom "ShowTotalField", just a NumberField.

So really I'm trying to do something which isn't supported, but it would have been helpful for my early understanding if the docs around ReferenceFields, could make it plain that any sorting in a List/DataGrid always happens in the getList() data provider and isn't possible to truly sort on a field unless it exists under that resource and the data provider does it for you.

tubbs_uk
  • 31
  • 5