how to design a table component with hover and active row status?

My designer team designed a table as i attached here. I'm facing issues to developed this component in reactJS. I also attached a little code snippet along with the design. Facing issues in scroll, active state of particular table row, hover effect of particular row & Spacing between 2 rows.

        border-radius: 16px !important;
        z-index: 1;
        tr {
            td:first-child {
                position: sticky;
                left: 0;
                background-color: #f6f6f9;
            }
            td:nth-last-child(2) {
                min-width: 135px;
            }
        }
        td {
            border-bottom: 1px solid $light-2;
        }
    }

.pointed-row {
    tbody {
        .selected {
            // &:after {
            //  display: none;
            //  border-left: 20px solid $light-4;
            // }
            // background-color: $light-4;
            // background-image: url('../../assets/icons/Union.svg') !important;
            // background-repeat: no-repeat;
            // background-size: cover;
            // background-position: center;
            td:first-child {
                // background-color: $light-4;
                background-color: inherit !important;
            }
        }
        tr {
            position: relative;
            &:hover {
                td:first-child {
                    background-color: inherit !important;
                }
            }
        }
    }
}

table view