JSFiddle - React, Tailwind, and code Playground

HTML

<table id="grid">
        <tr>
        <td>Inv No</td>
        <td> Thingy</td>
        <td> Blank</td>
        <td> Number</td>
        </tr>
    <tr>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    </tr>
    <tr>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    </tr><tr>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    </tr><tr>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    </tr><tr>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    </tr><tr>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    </tr><tr>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    </tr>
    <tr>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    </tr>
    <tr>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    </tr>
    <tr>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    </tr>
    <tr>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    </tr>
    <tr>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    </tr>
    <tr>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    </tr>
    <tr>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    <td>fgdfg</td>
    </tr>
</table>

JavaScript

tableToGrid('#grid', {
    rowNum: 5,
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 10},
    {
        name: 'thingy',
        index: 'thingy',
        width: 90},
    {
        name: 'blank',
        index: 'blank',
        width: 30},
    {
        name: 'number',
        index: 'number',
        width: 80},
    
    ],
    pager: '#pager',
    rowList: [50,20,30],
    caption: "JQGrid Example"
});