Skip to content

Add a "tooltip" prop (function) on the <DataΤable.Col> #11133

@afilp

Description

@afilp

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.

Image

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions