//grid.html

/* Create a new file grid.html and copy/paste the following code. */

<html>
 <head>
  <style>
table{width:100%;overflow:hidden}
table th{text-align:left}
tbody{background-color:#eee;cursor:pointer;border-bottom: 15px solid white}
tbody:nth-of-type(2n){background-color:#ccc}
th{position:relative;}
table{border-collapse:collapse}
thead{background:#000;color:#fff}
td,th{padding:5px 15px;border:1px solid #fff}
#col3{width:100%}

td:nth-child(3) {
 overflow-wrap: break-word;
 word-wrap: break-word;
 word-break: break-all;
 word-break: break-word;
}
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <th id="col1"><input type="checkbox" id="checkBoxSelectAll"></th>
     <th id="col2">Size</th>
     <th id="col3">File</th>
    </tr>
   </thead>
  </table>

<script>
var table = document.getElementsByTagName('table')[0],
columnDivs = [];

document.querySelectorAll('tbody tr').forEach(tr => {
 makeRowSelectable(tr);
});


function makeRowSelectable(a){
//return;
a.addEventListener('click', e => {
let c = a.querySelector('input');
if (c.disabled === true) return;
let regularRow = (a) => { a.style.backgroundColor = ''
 a.style.color = ''},
selectedRow = (a) => {a.style.backgroundColor = 'red'
 a.style.color = 'white'};
if (c !== e.target){
if (c.checked){
 regularRow(a);
 c.checked = false;
} else{
 selectedRow(a);
 c.checked = true;
}} else {
c.checked ? selectedRow(a) : regularRow(a);
}

})};

//Resizable grid method
((function () {
 var tableHeight = table.offsetHeight,
 col3 = document.querySelector('#col3'),
 row = table.getElementsByTagName('tr')[0],
 cols = row ? row.children : undefined;
 
 table.style.overflow = 'hidden';
 col3.style.width = col3.offsetWidth;
 
 for (var i=0;i<cols.length;i++){
 var div = createDiv(tableHeight);
 cols[i].appendChild(div);
 cols[i].style.position = 'relative';
 columnDivs.push(div);
 setListeners(div);
 }

function setListeners(div){
 var pageX,curCol,nxtCol,curColWidth,nxtColWidth;

div.addEventListener('mousedown', function (e) {
 curCol = e.target.parentElement;
 nxtCol = curCol.nextElementSibling;
 pageX = e.pageX; 
 
 var padding = paddingDiff(curCol);
 
 curColWidth = curCol.offsetWidth - padding;
 if (nxtCol)
 nxtColWidth = nxtCol.offsetWidth - padding;
 });

div.addEventListener('mouseover', function (e) {
 e.target.style.borderRight = '2px solid #0000ff';
 })

div.addEventListener('mouseout', function (e) {
 e.target.style.borderRight = '';
 })

document.addEventListener('mousemove', function (e) {
 if (curCol) {
 var diffX = e.pageX - pageX;
 
 if (nxtCol)
 nxtCol.style.width = (nxtColWidth - (diffX))+'px';

curCol.style.width = (curColWidth + diffX)+'px';
 }
 });

document.addEventListener('mouseup', function (e) { 
 curCol = undefined;
 nxtCol = undefined;
 pageX = undefined;
 nxtColWidth = undefined;
 curColWidth = undefined
 });
 }
 
 function createDiv(height){
 var div = document.createElement('div');
 div.style.top = 0;
 div.style.right = 0;
 div.style.width = '5px';
 div.style.position = 'absolute';
 div.style.cursor = 'col-resize';
 div.style.userSelect = 'none';
 div.style.height = height + 'px';
 return div;
 }
 
 function paddingDiff(col){
 
 if (getStyleVal(col,'box-sizing') == 'border-box'){
 return 0;
 }
 
 var padLeft = getStyleVal(col,'padding-left');
 var padRight = getStyleVal(col,'padding-right');
 return (parseInt(padLeft) + parseInt(padRight));

}

function getStyleVal(elm,css){
 return (window.getComputedStyle(elm, null).getPropertyValue(css))
 }
})());

var tbodys = [];
function addRows(data) {
 if (!data) return;
 var tbody = tbodys[data.id];
 var size = data.size;
 if (size > 1073741823){
 size = (size/1073741824).toFixed(2)+'GB';
 }else if (size > 1048575){
 size = (size/1048576).toFixed(2) + 'MB';
 } else if (size > 1023){
 size = (size/1024).toFixed(2)+'KB';
 }

if (tbody === undefined){
 tbody = table.createTBody();
 tbody.id = data.id;
 tbodys[data.id] = tbody;
 }

data.files.forEach(file => {

var tr = tbody.insertRow();
 makeRowSelectable(tr);
 
 var td1 = tr.insertCell(),
 td2 = tr.insertCell(),
 td3 = tr.insertCell(),

cb = document.createElement('input');
 cb.type = 'checkbox';
 
 td1.appendChild(cb);
 cb.value = file;

var sz = document.createTextNode(size);
 td2.appendChild(sz);

var ph = document.createTextNode(file);
 td3.appendChild(ph);
 });
 var tableHeight = table.offsetHeight;
 columnDivs.forEach(div => {div.style.height = tableHeight+'px'});
 
 return ((document.body.scrollHeight+50)+'px');

}

</script>
</body>
</html>