JSFiddle - React, Tailwind, and code Playground

by iamthestig

HTML

<html>
<head></head>
<body>

<div id="tableDiv"></div>
<script type="text/javascript">

    var dataArray = []; // push your data here
    var futureTable = '<table>'; // string for you future table

    for (var i=0;i<217;i++){ // just a function to fill data, use your own
        dataArray.push(i);
    }

// function to create table in a string

    for (var i=0, size=dataArray.length; i<size;i++){ 
        switch ((i+1)%4){
            case 1:
                futureTable += '<tr><td>'+dataArray[i]+'</td>';
                break;
            case 2:
                futureTable += '<td>'+dataArray[i]+'</td>';
                break;
            case 3:
                futureTable += '<td>'+dataArray[i]+'</td>';
                break;
            case 0:
                futureTable += '<td>'+dataArray[i]+'</td></tr>';
                break;
            default:
                alert("ALARM!!");
        }

// this just checks if the element is not the last
// one in a row, it closes the table

        if ((i==size-1)&&(i+1)%4!=0) {
            futureTable += '</td></table>'