JSFiddle - React, Tailwind, and code Playground

by Kamruz Jaman

HTML

<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<table id="example" class="display" cellspacing="0" width="100%">
</table>

<!--
The documentation is very good for datatables.net
- http://datatables.net/reference/option/

example of setting column names: http://datatables.net/reference/option/data

example of Ajax: http://datatables.net/examples/ajax/objects.html
-->

JavaScript

var dataSet = {
    "Header": ["Name", "Party", "Province", "Age", "Gender"],
    "data": [{
        Name: "Mourani, Maria",
        Age: "43",
        Gender: "Female",
        Party: "BlocQuebecois",
        Province: "Quebec"
    }, {
        Name: "Sellah,Djaouida",
        Age: "30",
        Gender: "Female",
        Party: "NDP",
        Province: "Quebec"
    }, {
        Name: "St-Denis,Lise",
        Age: "72",
        Gender: "Female",
        Party: "NDP",
        Province: "Quebec"
    }]
};

$('#example').dataTable( {
    //uncomment to test for AJAX, comment out "data" instead
    //"ajax": "../ShowUploadedCSVFile"
    "data": dataSet.data,
    
    //"data" tells it which column to display data for
    //"title" is the label to use for the header
    "columns": [
        { data: "Name", title: "Name" },
        { data: "Party", title: "Party" },
        { data: "Province", title: "Province" },
        { data: "Age", title: "Age", className: "dt-center" },
        { data: "Gender", title: "Gender", className: "dt-center" }
    ]
});