JSFiddle - React, Tailwind, and code Playground
HTML
<div class="virtualization-page">
<div>
<div class="grid-container" tabindex="0">
<div class="grid-virtualized-container" style="height: 7580px;">
<div class="grid-header-container grid-header-container--sticky" role="rowgroup">
<div class="grid-header">
<div class="grid-header-row" role="row">
<div data-header-id="0" draggable="false" role="columnheader" class="grid-column-header-cell align-left">
<div class="grid-column-header-cell-content">
<div class="grid-column-header-cell-content-parts">
<div>
Image
</div>
</div>
</div>
</div>
<div data-header-id="1" draggable="false" role="columnheader" class="grid-column-header-cell grid-column-header-cell--active align-left">
<div class="grid-column-header-cell-content" style="color: rgb(49, 117, 47);">
<div class="grid-column-header-cell-content-parts">
<div>
ID
</div>
</div>
</div>
</div>
<div data-header-id="2" draggable="false" role="columnheader" class="grid-column-header-cell align-left" style="width: 200px; border-color: rgb(200, 200, 200);">
<div class="grid-column-header-cell-content">
<div class="grid-column-header-cell-content-parts">
<div>
Name
</div>
</div>
</div>
</div>
<div data-header-id="3" draggable="false" role="columnheader" class="grid-column-header-cell align-left">
<div class="grid-column-header-cell-content" style="">
<div class="grid-column-header-cell-content-parts">
<div>
Height
...
CSS
.virtualization-page {
flex: 1 1 auto;
overflow-y: scroll;
overflow-x: scroll;
will-change: transform;
}
::-webkit-scrollbar {
width: 25px;
height: 10px;
}
::-webkit-scrollbar-track {
border-radius: 5px;
}
::-webkit-scrollbar-track-piece {
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #666666;
}
.grid-container {
display: inline-table;
outline: 0;
background-color: rgb(255, 255, 255);
color: rgb(51, 51, 51);
}
.grid-container > .grid-virtualized-container {
position: relative;
display: inline-flex;
}
.grid-container > .grid-virtualized-container > .grid-header-container.grid-header-container--sticky {
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 2;
height: 30pxx
}
.grid-container > .grid-virtualized-container > .grid-header-container .grid-header {
display: flex;
}
.grid-container > .grid-virtualized-container > .grid-header-container .grid-header > .grid-header-row {
white-space: nowrap;
display: inline-flex;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
border-top: 1px solid;
border-bottom: 1px solid;
height: 30px;
border-color: rgb(200, 200, 200);
background-color: rgb(255, 255, 255);
}
[dir='rtl'] .grid-container > .grid-virtualized-container > .grid-header-container .grid-header > .grid-header-row {
border-right: 1px solid;
}
.grid-container > .grid-virtualized-container > .grid-header-container .grid-header > .grid-header-row > .grid-column-header-cell {
display: "-webkit-flex";
display: "-moz-flex";
display: "-ms-flexbox";
display: "-ms-flex";
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
vertical-align: middle;
position: relative;
align-items: center;
box-sizing: border-box;
width: 200px;
border-color:...
JavaScript
document.documentElement.setAttribute("dir", "rtl");