html css reactjs ag-grid mui-x-data-grid

How can I create a vertical element inside an MUI Data Grid or an Ag-grid?

I want to add a vertical "month" bar to a React ag-grid or an MUI data grid. The height of the element would depend on the some data rows - that is days of the month so that the vertical bar corresponds to the rows with days of that month as demonstrated below. Unfortunately Is my best bet to just convert one column into my month bar and then somehow try inserting the text + getting the rounded edges for "border" days?

.topContainer{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
    background-color: white;
}

.scrollWindow{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow-y: scroll;
}

.topScrollContentContainer{
    height:max-content;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

.scrollContentContainer{
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

.scrollContentElement{
    width: 200px;
    height: 120px;
    border: black 1px solid;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.monthsContainer{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: black;
}

.monthText{
    transform: rotate(180deg) ;
    border-radius:20px;
    background-color: red;
    width:40px;
    height: 400px;
    writing-mode: vertical-rl;
    text-orientation:sideways;
    font-size: 1.5rem;
    color: white;
    text-align: center;
    margin: 1rem 0;
}

<div class="topContainer">
  <div class="scrollWindow">
    <div class="topScrollContentContainer">
      <div class="monthsContainer">
        <h4 class="monthText">January</h4>
        <h4 class="monthText">February</h4>
        <h4 class="monthText">March</h4>
      </div>
      <div class="scrollContentContainer">
    <div class="scrollContentElement">Some Data </div>
    <div class="scrollContentElement">Some Data </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
          
                    </div>

                </div>
            </div>
</div>
        </div>

Solution

If you want the month's height to expand and contract based on the right side column then try this code.

.topContainer{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
    background-color: white;
}

.scrollWindow{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow-y: scroll;
}

.topScrollContentContainer{
    height:max-content;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

.scrollContentContainer{
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

.scrollContentElement{
    width: 200px;
    min-height: 120px;
    border: black 1px solid;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.monthsContainer{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: black;
}

.monthText{
    transform: rotate(180deg) ;
    border-radius:20px;
    background-color: red;
    width:40px;
    height: 400px;
    writing-mode: vertical-rl;
    text-orientation:sideways;
    font-size: 1.5rem;
    color: white;
    text-align: center;
    margin: 1rem 0;
    display: none;
}

.scrollContentContainer .scrollContentElement {
  position: relative;
}

.scrollContentContainer .scrollContentElement:before {
  content: "";
   transform: rotate(180deg) ;
    border-radius:20px;
    background-color: red;
    width:40px;
    writing-mode: vertical-rl;
    text-orientation:sideways;
    font-size: 1.5rem;
    color: white;
    text-align: center;
    position: absolute;
    top: 0;
    left:-60px;
    height: 100%;
}

.scrollContentContainer .scrollContentElement:nth-child(1):before {
  content: "January";
 }
 
 .scrollContentContainer .scrollContentElement:nth-child(2):before {
  content: "February";
 }
 
 .scrollContentContainer .scrollContentElement:nth-child(3):before {
  content: "March";
 }
 
 .scrollContentContainer .scrollContentElement:nth-child(4):before {
  content: "April";
 }
 
 .scrollContentContainer .scrollContentElement:nth-child(5):before {
  content: "May";
 }
 
 .scrollContentContainer .scrollContentElement:nth-child(6):before {
  content: "June";
 }
 
 .scrollContentContainer .scrollContentElement:nth-child(7):before {
  content: "July";
 }
 
 .scrollContentContainer .scrollContentElement:nth-child(8):before {
  content: "August";
 }
 
 .scrollContentContainer .scrollContentElement:nth-child(9):before {
  content: "September";
 }
 
 .scrollContentContainer .scrollContentElement:nth-child(10):before {
  content: "October";
 }
 
 .scrollContentContainer .scrollContentElement:nth-child(11):before {
  content: "November";
 }
 
 .scrollContentContainer .scrollContentElement:nth-child(12):before {
  content: "December";
 }
 
  .scrollContentContainer .scrollContentElement:nth-child(13):before {
  content: "January";
 }
 
  .scrollContentContainer .scrollContentElement:nth-child(14):before {
  content: "February";
 }

<div class="topContainer">
  <div class="scrollWindow">
    <div class="topScrollContentContainer">
      <div class="monthsContainer">
        <h4 class="monthText">January</h4>
        <h4 class="monthText">February</h4>
        <h4 class="monthText">March</h4>
      </div>
      <div class="scrollContentContainer">
    <div class="scrollContentElement">Some Data </div>
    <div class="scrollContentElement">Some Data </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
                                      <div class="scrollContentElement">
                      Some Data
                    </div>
          
                    </div>

                </div>
            </div>
</div>
        </div>