HTML table - Sticky column with right Border

I need to create an HTML table with a sticky first column, that's the easy part. The tricky part is, the sticky column should have a right border which would only be visible when we start scrolling horizontally. I need to implement this in my angular application.

I made the first column sticky but can't figure out how to add a right border only when we start scrolling.

<div class="table">
<table>
<thead>
<tr>
<th class="sticky-column col">DATA1</th>
<th class="col">DATA2</th>
<th class="col">DATA3</th>
<th class="col">DATA4</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="sticky-column data">Some values</td>
<td class="data">Some values</td>
<td class="data">Some values</td>
<td class="data">Some values</td>
</tr>
<tr class="row">
<td class="sticky-column data">Some values</td>
<td class="data">Some values</td>
<td class="data">Some values</td>
<td class="data">Some values</td>
</tr>
<tr class="row">
<td class="sticky-column data">Some values</td>
<td class="data">Some values</td>
<td class="data">Some values</td>
<td class="data">Some values</td>
</tr>
<tr class="row">
<td class="sticky-column data">Some values</td>
<td class="data">Some values</td>
<td class="data">Some values</td>
<td class="data">Some values</td>
</tr>
</tbody>
</table>
</div>


// ***** Table ***** //
.table {
overflow-x: auto;
h1 {
grid-area: h;
}
table {
border-collapse: collapse;
td, th {
background-color: #ffffff;
}
}
.sort-table {
width: 100%;
tbody {
border-top: 1px solid $primary-blue;
border-bottom: 1px solid $primary-blue;
tr + tr td {
border-top: 1px solid $greyscale-light-grey;
}
td {
padding-left: 10px !important;
white-space: nowrap;
}
}
.col {
&:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px $primary-blue;
}
padding: 20px 65px 20px 5px;
}

.row {
padding: 20px;
.data {
padding: 20px;
color: $primary-dark-blue;
}
&:hover {
background-color: $primary-light-blue;
.data {
background-color: $primary-light-blue;
}
}
}

.sticky-column {
position: sticky;
left: 0;
z-index: 2;
border-right: 1px solid $primary-light-blue;
}
}
}

.hidden{
visibility: hidden;
}

// ***** End of table ***** //

Continue reading...