CODEWITHSUNDEEP
htmlcssreactjshtml-tablematerial-ui
Carl
Carl

Reputation: 351

display popover on hover for every Material UI table row and box shadow issue

I'm working on react app and I'm using React v18.2 and Material UI V5

I created a simple table with an MUI Table component and I want to display a popover for every table row when a mouse pointer hovers on a specific table row

I ended up with add a simple popover component to the last cell of each row

also, I added a slide In animation to my popover component

The problem is when the animation is being played. A horizontal scroll is added to my table

How can I remove the scroll bar?

my simple table:

codesandbox

my second question: how can I add a box shadow to the left and right sides of every table row? currently, the box shadow only displaying on the top and bottom of a table row

Upvotes: 1

Views: 1011

Answers (1)

AchiPapakon
AchiPapakon

Reputation: 323

For the first question:

For the horizontal scrollbar you should add an overflow hidden (which can be overflow-x or overflow-y):

<Table sx={{ minWidth: 650, overflow: "hidden" }} aria-label="simple table">

For the second question something like this? https://codepen.io/michalkliment/pen/dWzwEG

Please only ask one question.

Upvotes: 1

Related Questions