how to add border styles to first and last row of the table in material UI?

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 demo link for that

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 black lines in the image is the border.

I tried to do that by using nth-of-type. But I can only able to differentiate the background colors of the row over here. I even tried first-child and last-child. It doesn't work.

Please help to resolve this issue. This link has the code of expandable component.

One of the possible solutions, is based on checking the index of the elements that are displayed within the expanded row. If an element is passed that has an index of zero in the array that should be displayed in the expanded row, then we add a borderTop css property to that row.

Otherwise, if an element is passed that has the last index in the array which needs to be displayed within the expanded row, then we add a css property borderBottom to that row.

Here is working solution.

Another solution is to create a div element that will serve as a wrapper around the expanded row.

And add this css style to that div :

const myStyle = {
  borderCollapse: "collapse",
  width: "0px"
};

After that, you can add below pseudo css selector in your StyledTableRow component:

 "&:last-child": {
    borderBottom: "5px solid black"
  },
  "&:first-child": {
    borderTop: "5px solid black"
  }

Here you can check that solution.

The downside of this solution, although it is more elegant than the previous one, is that you will get the following table layout :

As you can see, adding a div will cause a sligltly different layout because that div will now be viewed as a single cell within the table so it will not occupy the whole width of the tabe row.