icflorescu / icflorescu/mantine-datatable
Add record hover callback
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 102
- PR merge metrics
- No merged PRs in 30d
Description
Is your feature request related to a problem? Please describe.
I would like to be able to perform an action when a row is hovered.
Describe the solution you'd like
Maybe a new prop, onRecordHover, with the signature:
type OnRecordHover<T> = (record: T | null, index: number) => void;
Where, record is null, if the mouse moved outside the table body.
Describe alternatives you've considered
Here's my current hacky workaround:
const handleMouseOver = useCallback(
((e: React.MouseEvent<HTMLTableElement>): void => {
const tr: (HTMLElement | null) = (e.target as Element).closest('tr');
if(T.isNullish(tr) || !tr.classList.contains('mantine-datatable-row')) {
props.onRecordHover(null);
return;
}
const index: number = Array.from(tr.parentNode!.children).indexOf(tr);
props.onRecordHover(records[index]!);
}),
[props.onRecordHover, records]
);
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No files or tests are named in the issue. Start by locating the table body and row-rendering entry points, then trace how row mouse events are handled. Done means exposing the requested callback with the stated signature, including null when the pointer leaves the table body, and covering that behavior with tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100