CODEWITHSUNDEEP
cssreactjsmaterial-uicss-selectorsreact-table
SDK
SDK

Reputation: 1518

How to apply the border styles to first and last row in tanstack expandable react table?

I am using the combination of material UI and react table in my project. Here I got an ask to add an expandable row, I did that. After the user expands it, we will be listing table rows based on the data

Here is the working demo link of that - https://codesandbox.io/s/tanstack-table-expansion-sub-level-goe-191pip?file=/src/styles.css:0-8

enter image description here

enter image description here

Currently, I got an ask to add the border-top and border-bottom to the first and last row to the list of rows we are showing after the expansion. Please refer to the attached screenshot to understand better. Assume that the red lines in the image are the border. And Each row after the expansion is having a className as depth-1 and another deep down expansion as depth-2.

I can able to differentiate the background colors of the row after expansion. But I need to apply only the border styles.

I tried to do that by using nth-of-type. I even tried first-child and last-child. It doesn't work.

Please let me know the feasibility of that. Is my approach correct?

Work Around As Per Answer

enter image description here

Upvotes: 0

Views: 3127

Answers (1)

Baro
Baro

Reputation: 5520

Using only CSS it is possible to apply the top border. But for the bottom border it is more complicated. To my knowledge it is not possible to select the "last consecutive element" of a type or class.

This is the CSS for top border of the tr with depth 1.

.depth-0 + .depth-1 {
  border-top: solid 3px red;
}

As an alternative for the bottom border you can use JQuery

$(document).ready(function() {
    //$('.depth-0').prev('.depth-1').addClass('borderBottomRed');
});
.depth-0 {
  box-sizing: border-box;
    background-color: yellow;
    width: 100%;
    padding: 5px;
}

.depth-1 {
  box-sizing: border-box;
    background-color: green;
    width: 100%;
    padding: 5px 15px;
}

.borderBottomRed {
    border-bottom: solid 3px red;
}


.depth-0 + .depth-1 {
  border-top: solid 3px red;
}

.depth-1 + .depth-0 {
  border-top: solid 3px red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="depth-0">main</div>
<div class="depth-1">child</div>
<div class="depth-1">child</div>
<div class="depth-1">child</div>
<div class="depth-0">main</div>
<div class="depth-1">child</div>
<div class="depth-1">child</div>
<div class="depth-0">main</div>
<div class="depth-1">child</div>
<div class="depth-0">main</div>
<div class="depth-0">main</div>

Edit

As suggested by the author of the question this could be the solution for the bottom border in css

.depth-1 + .depth-0 {
  border-top: solid 3px red;
}

.depth-1:last-child {
  border-bottom: solid 3px red;
}

Full code

.depth-0 {
  box-sizing: border-box;
    background-color: yellow;
    width: 100%;
    padding: 5px;
}

.depth-1 {
  box-sizing: border-box;
    background-color: green;
    width: 100%;
    padding: 5px 15px;
}

.borderBottomRed {
    border-bottom: solid 3px red;
}


.depth-0 + .depth-1 {
  border-top: solid 3px red;
}


.depth-1 + .depth-0 {
  border-top: solid 3px red;
}
.depth-1:last-child {
  border-bottom: solid 3px red;
}
<div>
  <div class="depth-0">main</div>
  <div class="depth-1">child</div>
  <div class="depth-1">child</div>
  <div class="depth-1">child</div>
  <div class="depth-0">main</div>
  <div class="depth-0">main</div>
  <div class="depth-1">child</div>
  <div class="depth-1">child</div>
  <div class="depth-0">main</div>
  <div class="depth-1">child</div>
  <div class="depth-0">main</div>
  <div class="depth-0">main</div>
  <div class="depth-1">child</div>
  <div class="depth-1">child</div>
</div>

Upvotes: 1

Related Questions