Comments (4)
The demo you provided is not working because the Tooltip
will always render, regardless of the overflow state of the cell content.
You have to come up with a way to determine if the content of the cell overflows and render the Tooltip
visibility based on that.
For questions like these I would recommend asking the community over at StackOverflow or on our community discord server.
Since this is not a problem with the data grid itself I will close this issue for now.
Thanks for taking the time anyways! ๐๐ผ
from mui-x.
๐ Thanks for using MUI X!
We use GitHub issues as a bug and feature requests tracker, however,
this issue appears to be a support request.
For support, please check out https://mui.com/x/introduction/support/. Thanks!
If you have a question on Stackย Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.
from mui-x.
I've already searched on Stackoverflow but I did not found the solution for my problem.
I think it's a DataGrid feature so that's why I contact you..
thank you
from mui-x.
I've already searched on Stackoverflow but I did not found the solution for my problem. I think it's a DataGrid feature so that's why I contact you.. thank you
I do understand that this might be misleading ... especially the functionality you are trying to build is hard to do and a problem many devs have tried to solve before you.
you could try with a measuring approach:
renderCell: (params) => {
const textRef = React.useRef(null);
const [isTruncated, setIsTruncated] = React.useState(false);
React.useEffect(() => {
if (textRef.current && textRef.current.scrollWidth > textRef.current.clientWidth) {
setIsTruncated(true);
}
}, [params.row.firstName]);
return (
<div ref={textRef}>
{isTruncated ? (
<Tooltip title={params.row.firstName} placement="bottom">
<p>{params.row.firstName}</p>
</Tooltip>
) : (
<p>{params.row.firstName}</p>
)}
</div>
);
},
This example is not working, just as a starting point to understand what has to be done to measure the size of an element.
And on another note: measuring is always hard and you have to take into account the lifecycle of react components as well. At the very least it will have a big impact on the performance of the grid.
from mui-x.
Related Issues (20)
- [pickers] Page fails to load Date Picker Component with Joy UI using CssVarsProvider Wrapper HOT 5
- [charts] Improve default color contrast in dark mode HOT 9
- [RFC] Move to a more modular structure for tests in code and CI HOT 4
- Add Audio Player/Waveform component HOT 2
- [charts] Cannot scroll the page when touch inside the chart HOT 7
- [data grid] Pivoting ETA HOT 4
- Pie Chart shows a slice for 0 value whenever the object representing a 0 is last in the array HOT 2
- [DataGrid] CSV export negative numbers in string has quotation HOT 3
- [data grid] Is there a way to override the default copy/paste functionality in DataGrid? HOT 7
- New sets of components HOT 6
- [charts] BarChart legend overlaps charts area HOT 3
- [pickers] Recipes HOT 1
- [data grid] I want to add Apply and Cancel buttons to the GridToolbarFilterButton HOT 5
- [pickers][DateTimeRangePicker] Manually selecting the date then selecting the time in the popover reverts the date to today HOT 2
- [charts] Support single color area chart HOT 9
- [data grid] Row pinning with Server-side tree data HOT 3
- [data grid] `isRowSelectable` lags behind state updates HOT 1
- [charts] Replace `d3-color` by CSS filter
- [data grid] On callapsing an expanded row, the nested table/container retains the size of expanded state HOT 1
- [pickers] Inconsistent design of DatePicker and DateRangePicker HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.