-
-
Notifications
You must be signed in to change notification settings - Fork 5.4k
Description
Is your feature request related to a problem? Please describe.
I need to change the tooltip content that appears when hovering over the DataTable.Col header. So that I can warn that the sorting is based on a different value.
Describe the solution you'd like
Add a "tooltip" prop (function) on the <DataΤable.Col>
Describe alternatives you've considered
Additional context
Here is a related ChatGPT Q&A:
Yep — but not directly via a DataTable.Col prop today.
That tooltip is generated by the table header’s sort button, and react-admin doesn’t expose a “tooltipTitle”/“tooltip” prop per column (only things like source, label, disableSort, etc.). ([Marmelab]1)
You’ve basically got 3 workable options:
Option A (usually best): add your own warning tooltip in the column label
label can be a React element, so you can add an info icon (or wrap the label) with a custom tooltip explaining the “sort is based on X” rule. ([Marmelab]1)
import { DataTable } from 'react-admin';
import Tooltip from '@mui/material/Tooltip';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
<DataTable.Col
source="otherHotelsToShareWithSortKey" // the *actual* sort field
label={
<span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}>
Other Hotels to Share with
<Tooltip title="Sorting uses the internal share-ranking, not the displayed hotel name">
<InfoOutlinedIcon fontSize="small" />
</Tooltip>
</span>
}
/>This keeps the built-in sort behavior, and you still get your custom explanation right where users look.
Option B: change the tooltip text globally via i18n
If you just want to change the wording of the built-in “Sort by … ascending/descending” message for the entire app, override the translation key ra.sort.sort_by (and optionally ra.sort.ASC / ra.sort.DESC). The docs show that key is used to build labels like “Sort by sales descending”. ([Marmelab]2)
Downside: it’s global, not per-column.
Option C: fully replace the header (per-column control)
<DataTable> lets you override the entire header via the head prop. ([Marmelab]1)
So if you really need the built-in tooltip itself to differ per column, you can provide a custom header component and render your own tooltip logic around the sort label.
Downside: more work (you’ll effectively re-implement the header cells).
If you tell me which react-admin version you’re on (and whether you’re using <List> or standalone <DataTable>), I can sketch a concrete “custom head” implementation for option C that keeps sorting + selection working.