JSFiddle - React, Tailwind, and code Playground

HTML

<table id="example" class="display dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
    <thead>
    <tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 156px;">Name</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Description: activate to sort column ascending" style="width: 178px;">Description</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="On Hand: activate to sort column ascending" style="width: 63px;">On Hand</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="On Order: activate to sort column ascending" style="width: 66px;">On Order</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Need to Order: activate to sort column ascending" style="width: 98px;">Need to Order</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="SO Demand: activate to sort column ascending" style="width: 81px;">SO Demand</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Kits: activate to sort column ascending" style="width: 32px;">Kits</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Plus/Minus: activate to sort column ascending" style="width: 79px;">Plus/Minus</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Box: activate to sort column ascending" style="width: 31px;">Box</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Buy: activate to sort column ascending" style="width: 32px;">Buy</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1"...

JavaScript

var editor = new $.fn.dataTable.Editor( {
	table: "#example",
	fields: [ {
                label: "Buy Amount",
                name: "buy"
            } ]
} );

 $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );
            $('#example', el).DataTable({

            	dom: 'Bfrtip',
                "aaData": data.data,
                initComplete: function () {
                this.api().columns([]).every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            });
			

/*            yadcf.init($('#example', el).DataTable(), [
                {column_number : 1, filter_type: "multi_select"},
                {column_number : 2, filter_type: "multi_select"},
                ]);         */   

            

        },
                "aoColumns": [
                    { "mDataProp": "name" },
                    { "mDataProp": "description" },
                    { "mDataProp": "onHand" },
                   { "mDataProp": "onOrder" },
                   { "mDataProp": "needOrder" },
                  { "mDataProp": "soDmd" },
                  { "mDataProp": "kits" },
                    { mRender: function(data, type, row){
                            return (Number(row.onHand) + Number(row.onOrder)) - Number(row.kits);
                        }
...