CODEWITHSUNDEEP
reactjsmaterial-ui
RaGe
RaGe

Reputation: 23697

Show icon across two rows in a mui table

I have a react mui table where sometimes two adjacent rows are related. I want to show a chain icon (or similar) between the two related rows. Crude mockup below:

enter image description here

Is there a straightforward way to achieve this?

I'm having trouble finding the correct terms to describe what I need, hence google search is failing me. "Overlay" seems to be within a row or cell, and most "Overflow" search hits are about preventing overflow rather than intentionally causing it. Here's a codesandbox starting point if it helps: https://codesandbox.io/s/basictable-material-demo-forked-jzb96?file=/demo.js

Upvotes: 0

Views: 800

Answers (2)

RaGe
RaGe

Reputation: 23697

I used plain old css transform - Unsure if this is a good idea.

enter image description here

Upvotes: 0

Bugbeeb
Bugbeeb

Reputation: 2161

There are two possible ways to achieve this effect. One is to use an absolutely positioned chain icon element and then offset its coordinates so that it "floats" between the two table row elements. It may take some playing around with the attributes but it would look something like

.chain-icon {
  position: absolute;
  left: 100px;
  top: 10px;
  z-index: 100;
}

The other option that might work is to place the chain icon inside the row and offset it with negative margins margin-top: -50px; and make sure overflow attribute is set correctly. Since it's a table, for either approach I would suggest adding a new column next to dessert and adding the icon to that row cell.

Upvotes: 1

Related Questions