What are the steps to add border styles to the top and bottom rows in a tanstack expandable react table?

Question

What are the steps to add border styles to the top and bottom rows in a tanstack expandable react table?

In my project, I am utilizing the combination of Material UI and React Table. Recently, I was asked to add an expandable row, and I successfully implemented that feature. Once a user expands the row, we display additional table rows based on the data.

If you would like to see a working demo of this implementation, you can visit this link: https://codesandbox.io/s/tanstack-table-expansion-sub-level-goe-191pip?file=/src/styles.css:0-8

To further clarify the requirements, please refer to the attached screenshots (https://i.sstatic.net/UfbnL.jpg and https://i.sstatic.net/TntOx.jpg). The task now is to add border-top and border-bottom styles to the first and last row respectively in the list of expanded rows. Each expanded row has a className of depth-1, with subsequent deeper expansions labeled as depth-2.

While I have been able to differentiate the background colors of the expanded rows, applying only the desired border styles proved challenging. I attempted using nth-of-type, as well as first-child and last-child selectors, but encountered difficulties.

I am seeking advice on the feasibility of achieving this task. Is my current approach correct?

Following the guidance provided:

https://i.sstatic.net/qw817.png

css reactjs material-ui css-selectors react-table

Answer 1

Answer №1

When using only CSS, adding a top border is straightforward. However, applying a bottom border can be more challenging. As far as I know, selecting the "last consecutive element" of a specific type or class is not possible.

Below is the CSS code to add a top border to the tr element with a depth of 1.

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

If you need a bottom border, one alternative is to 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 proposed by the author of the question, here is a potential solution for adding a bottom border in css:

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

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

Full code snippet:

.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>

Answer 2

When using only CSS, adding a top border is straightforward. However, applying a bottom border can be more challenging. As far as I know, selecting the "last consecutive element" of a specific type or class is not possible.

Below is the CSS code to add a top border to the tr element with a depth of 1.

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

If you need a bottom border, one alternative is to 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 proposed by the author of the question, here is a potential solution for adding a bottom border in css:

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

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

Full code snippet:

.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>

What are the steps to add border styles to the top and bottom rows in a tanstack expandable react table?

Answer №1

Similar questions

Endless loop occurs with post and put requests while attempting to refresh authentication token

Tips for separating provider and input components with React Hook Form

An easy way to place text along the border of an input field in a React JS application using CSS

adjust the value of an attribute in a dynamic stylesheet using jquery

Has jQuery UI Accordion taken over the design of unordered lists?

Unleashing the power of React: Integrating raw HTML <a href> tags with JavaScript

Distribute divs of equal width evenly within a grid

The upcoming construction of 'pages/404' page will not permit the use of getInitialProps or getServerSideProps, however, these methods are not already implemented in my code

The function buf.writeBigUInt64BE is not recognized as a valid function and returns an undefined error

The <SelectField> component in material-ui is not displaying items properly in ReactJS

How can I incorporate dashed borders between images using CSS?

Encountering issues with SignInWithRedirect feature's functionality

Pagination CSS may fail to function properly in Chrome after an AJAX call is returned

How to insert a span element within a link tag in Next.js/React.js

Is it possible to use Primefaces tooltip to show at the bottom of the page

How to transform the Material UI functional component Mini variant drawer into a class component in ReactJS

React Context: issue with rendering the component

What is the optimal method for allowing users to modify the website name and various frontend settings in a ReactJS environment?

Issue found: React-Redux action is not being dispatched

Tips for creating horizontal scrolling in the div element