JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
    </thead>
    <tbody>
        <tr>
            <th class="subheader" scope="rowgroup" colspan="5">Data group 1</th>
        </tr>
        <tr>
            <td>1</td>
            <td>6</td>
            <td>3</td>
            <td>6</td>
            <td>2</td>
        
        </tr>
        <tr>
            <td>1</td>
            <td>5</td>
            <td>7</td>
            <td>2</td>
            <td>5</td>
       
        </tr>
        <tr>
            <td>S</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>6</td>
   
        </tr>
        <tr>
            <td>8</td>
            <td>5</td>
            <td>3</td>
            <td>7</td>
            <td>9</td>
     
        </tr>
        <tr>
            <th class="subheader" scope="rowgroup" colspan="5">Data group 2</th>
        </tr>
        <tr>
            <td>A</td>
            <td>5</td>
            <td>3</td>
            <td>H</td>
            <td>D</td>
        </tr>
        <tr>
            <td>Q</td>
            <td>R</td>
            <td>T</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>6</td>
            <td>4</td>
            <td>W</td>
            <td>2</td>
            <td>6</td>
        </tr>
        <tr>
            <td>5</td>
            <td>3</td>
            <td>W</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <th class="subheader" scope="rowgroup" colspan="5">Data group 3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>9</td>
            <td>E</td>
            <td>3</td>
            <td>S</td>
        </tr>
        <tr>
            <td>T</td>
            <td>4</td>
            <td>D</td>
            <td>H</td>
            <td>S</td>
        </tr>
        <tr>
            <td>4</td>
            <td>S</td>
            <td>5</td>
    ...

CSS

table {
    font-family:arial;
    width:400px;
    text-align:center;
    border:1px solid black;
    margin:15px;
}

th
{
    width:20%;
    color:white;
    background-color:black;
    height:20px;
    line-height:20px;
    
}

tr
{
     
}

td
{
   
    font-size:11px;
    height:18px;
    line-height:18px;
}

.subheader {
    background-color:#dedede;
    text-align:left;
    font-size:12px;
    height:33px;
    line-height:20px;
    padding-left:10px;
    
}
.subheader {
	background: #999;
	position: relative;
	z-index: 1;
	color: #fff;
}
.subheader.fixed {
	position: fixed;
	top: 0;
	width: 21%;
	box-sizing: border-box;
	z-index: 0;
}
.subheader.fixed.absolute {
	position: absolute;
}

JavaScript

function stickyTitles(stickies) {

            var thisObj = this;

            thisObj.load = function () {

                stickies.each(function () {

                    var thisSticky = jQuery(this).append('<span class="test" />');
                    thisSticky.parent().height(thisSticky.outerHeight());

                    jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);

                });

                jQuery(window).off("scroll.stickies").on("scroll.stickies", function () {

                    thisObj.scroll();

                });
            }

            thisObj.scroll = function () {

                stickies.each(function (i) {

                    var thisSticky = jQuery(this),
                        nextSticky = stickies.eq(i + 1),
                        prevSticky = stickies.eq(i - 1),
                        pos = jQuery.data(thisSticky[0], 'pos');

                    if (pos <= jQuery(window).scrollTop()) {

                        thisSticky.addClass("fixed");

                        if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {

                            thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());
                        }

                    } else {

                        thisSticky.removeClass("fixed");

                        if (prevSticky.length > 0 && jQuery(window).scrollTop() <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) {

                            prevSticky.removeClass("absolute").removeAttr("style");
                        }
                    }
                });
            }
        }

        jQuery(document).ready(function () {

            new stickyTitles(jQuery(".subheader")).load();

        });