How to display the ID of an item in a List resource and a Datagrid instead of the object's IRI? - react-admin

Question

I noticed that every time an item is displayed in a List resource or a Datagrid component the element's ID property is presented as an IRI string.
I understand this is due to the relationship between HydraAdmin and JSON-LD content negotiation:
Sends proper HTTP requests to the API and decodes them using Hydra and JSON-LD formats
But my (simple) question is: how to display the ID and not the entire context? I only want the last part (the unique ID itself) to be displayed in the Datagrid or List resource column but by no means can I do this even though my API returning an entire ID property cannot display (example image below). Anyway, the value of "#id" (string) is always displayed due to Hydra and JSON-LD relationship.

Answer 1

Debugging the response headers and using useListContext I was able to find that there is an injected property called originId in the data object and that it is possible to display the original ID and not reference it to "#id" as the default for the property ID using as source "originId" and not "id".
in the DataGrid I used source="originId"
...
const {data, ids, basePath} = useListContext();
return (
<Datagrid fullWidth>
// here is the magic, use originId instead id
<TextField source={"originId"} label={"ID"}/>
<TextField source={"created_at"} label={"Data"}/>
<TextField source={"author"} label={"Autor"}/>
<TextField source={"content"} />
<TextField source={"is_public"} />
</Datagrid>
)