JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js"></script>
<div class="grid-stack">
  <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="10" data-gs-height="2">
    <div class="grid-stack-item-content">
      <div class="grid-stack-item-header">
        <h3>Title</h3>
        <input type="text">
        <div>
          <button>Button A</button>
          <button>Button B</button>
        </div>
        <div>
          <a>Link A</a>
          <a>Link B</a>
        </div>
      </div>
      <table>
        <thead>
          <tr>
            <th>ColA</th>
            <th>ColB</th>
            <th>ColC</th>
            <th>ColD</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Mauritius</td>
            <td>Castor</td>
            <td>F14 3QF</td>
            <td>[email protected]</td>
          </tr>
          <tr>
            <td>Guyana</td>
            <td>Inuvik</td>
            <td>67752</td>
            <td>[email protected]</td>
          </tr>
          <tr>
            <td>Norfolk Island</td>
            <td>Sparwood</td>
            <td>10899-987</td>
            <td>[email protected]</td>
          </tr>
          <tr>
            <td>Afghanistan</td>
            <td>Sant'Urbano</td>
            <td>7142</td>
            <td>[email protected]</td>
          </tr>
          <tr>
            <td>Macao</td>
            <td>Bon Accord</td>
            <td>16-568</td>
            <td>[email protected]</td>
          </tr>
          <tr>
            <td>Philippines</td>
           ...

CSS

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

.grid-stack-item-header {
  width: 100%;
  background-color: white;
}

.grid-stack.scrolled .grid-stack-item-header {
  position: fixed;
}

.grid-stack.scrolled .grid-stack-item-content {
  margin-top: 50px;
}

.grid-stack-item-header {
  height: 50px;
}
.grid-stack-item-header > * {
  display: inline-block;
}

JavaScript

$('.grid-stack').gridstack();

$('.grid-stack-item-content').scroll(function() {
	var $gridStack = $('.grid-stack');
  var $gridContainer =  $('.grid-stack-item');
  var $item = $('.grid-stack-item-content');
  var $header = $('.grid-stack-item-header');
	var isGridStackFixed = $gridStack.hasClass('scrolled');
  var scrollTop = $(this).scrollTop();
  
	if (scrollTop <= 0 && isGridStackFixed) {
  	$item.prepend($header);
    $gridStack.removeClass('scrolled');
  } else if (scrollTop > 0 && !isGridStackFixed) {
  	$gridContainer.prepend($header);
    $gridStack.addClass('scrolled');
  }
});