JSFiddle - React, Tailwind, and code Playground

by chauhangs

HTML

<title>Example 1 - apply dataTable()</title>

      <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
      <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">


      <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
      <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
      
      
  </head>

    <body>
        <div class="container">
            
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    <thead>
        <tr>
            <th>Colunn 1</th>
            <th>Colunn 2</th>
            <th>Colunn 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>5</td>
            <td>1</td>
            <td>A</td>
        </tr>
        <tr>
            <td>3</td>
            <td>1</td>
            <td>A</td>
        </tr>	
		<tr>
            <td>4</td>
            <td>1</td>
            <td>A</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>B</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>B</td>
        </tr>	
		<tr>
            <td>3</td>
            <td>2</td>
            <td>B</td>
        </tr>		
    </tbody>
</table>
            
        </div>
    </body>

JavaScript

$(document).ready(function() {
    $('#example').dataTable({
    columnDefs: [ {
            targets: [ 0 ],
            orderData: [ 0, 1 ]
        }, {
            targets: [ 1 ],
            orderData: [ 1, 0 ]
        } ]
    });
});