React-admin: Can I truncate a <TextField> within a <List>? - react-admin

Question

Is there a way to truncate text returned by the <TextField> and show ...?
See title column within image below (I want to truncate the title after 20 chars).
Is there a specific prop? Unfortunately, I didn't find any clue within the react-admin doc.
Thank you in advance

Answer 1

You can actually manipulate any field outside a <List>,and then get the <Datagrid> to render that field, as long as it's iterative.
const CustomTitleField = ({ record }) => {
// "record" is a prop received from the Datagrid
let str = record.title;
return record ? (
{/* If length is greater than 20 characters, slice and add ellipsis.*/}
<span>{str.length > 20 ? str.slice(0, 20) + "..." : str}</span>
) : null;
};
// Then, within your list, do this...
export const CommentList => (
<List {...props}>
<Datagrid>
<CustomTitleField /> // this should render with your truncate logic
// ...
</Datagrid>
</List>
);
Let me know how it goes, after try this out!!

Answer 2

You can use the cellClassName to customize the cell style inside a Datagrid.
https://marmelab.com/react-admin/Fields.html#styling-fields
I had a similar question and here is what works for me.
const useStyles = makeStyles((theme) => ({
tableHeader: {
fontWeight: "bold",
textTransform: "capitalize",
},
tableCell: {
maxWidth: 300,
textOverflow: "ellipsis",
whiteSpace: "nowrap",
overflow: "hidden",
}
}));
const MyList = ({ ...props }) => {
const classes = useStyles();
return (
<List
{...props}
>
<Datagrid>
<TextField
headerClassName={classes.tableHeader}
cellClassName={classes.tableCell}
source="detail"
label="Detail"
/>
</Datagrid>
</List>
);
};