JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/AutoFill/css/dataTables.autoFill.css">
<script src="https://datatables.net/release-datatables/extensions/AutoFill/js/dataTables.autoFill.js"></script>
<table class="top100" cellspacing="0" width="300px">
        <thead>
            <tr>
                <th>Date</th>
                <th>1</th>
                <th>2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="header"><input disabled type="text" class="commission-date" value=""/></td>
                <td><input type="text" value=""/></td>
                <td><input type="text"/></td>
            </tr>
             <tr>
                <td class="header"><input disabled type="text" class="commission-date" value=""/></td>
                <td><input type="text" value=""/></td>
                <td><input type="text"/></td>
            </tr>
                        <tr>
                <td class="header"><input disabled type="text" class="commission-date" value=""/></td>
                <td><input type="text" value=""/></td>
                <td><input type="text"/></td>
            </tr>
                        <tr>
                <td class="header"><input disabled type="text" class="commission-date" value=""/></td>
                <td><input type="text" value=""/></td>
                <td><input type="text"/></td>
            </tr>
            
        </tbody>
    </table>

JavaScript

var table = $('.top100').dataTable({
    "paging":   false
});
 
new $.fn.dataTable.AutoFill( table, {
    mode: 'both',
    "columnDefs": [
        { enable:    false, targets: [0] }
    ]
 
} );