JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war14/resources/js/jquery.dataTables.yadcf.js"></script>
<link rel="stylesheet" href="https://rawgit.com/vedmack/yadcf/7b37b3142059efc8e2d81c5f6d93d38d81a022bd/jquery.dataTables.yadcf.css">
<table id="sample_1" class="table table-striped table-bordered table-hover table-full-width dataTable">
                        <thead>
                            <tr role="row">
                                <th></th>
                                <th>Transaction Date</th>
                                <th>Transaction Type</th>                                
                            </tr>                            
                        </thead>
                        <tbody role="alert" aria-live="polite" aria-relevant="all">

                        </tbody>
                    </table>

JavaScript

$(document).ready(function(){
$('#sample_1').dataTable({
        aaData: [{"transaction_id":"8","reference_id":"9","transaction_type":"Test","transaction_date":"2015-05-03"},{"transaction_id":"9","reference_id":"10","transaction_type":"Test","transaction_date":"2015-05-04"}], 
"aoColumns": [{"mData": "transaction_id"},
            {"mData": null,
                "mRender": function (data, type, row) {
                    var tdate = row.transaction_date;
                    return tdate.replace(/(\d{4})-(\d{2})-(\d{2})/, "$3-Aug-$1");
                }
            },
            {"mData": "transaction_type"             }]
}).yadcf([{column_number: 1, filter_type: "select", column_data_type: 'rendered_html'}]);
});