JSFiddle - React, Tailwind, and code Playground

by snavarro81

HTML

<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<table id="NominationTable" class="table table-condensed table-hover">
            <thead>
                <tr>
                    <th style="width: 10%">SortValue</th>
                </tr>
            </thead>
            <tbody>
               <tr id="100">
                    <td data-order="1" class="editable" id="100">
                        1
                    </td>
                </tr>
                <tr id="101">
                    <td data-order="2" class="editable" id="101">
                        2
                    </td>
                </tr>
                <tr id="102">
                    <td data-order="3" class="editable" id="102">
                        3
                    </td>
                </tr>
                <tr id="103">
                    <td data-order="4" class="editable" id="103">
                        4
                    </td>
                </tr>
            </tbody>
        </table>

JavaScript

var nominationTable = null;

        $(function() {

            var sortValueColumn = 0;
            
            nominationTable = $('#NominationTable').dataTable({
                    order: [[sortValueColumn, "asc"]],

                    drawCallback: function(settings) {
                        //var api = this.api();
												//$('.editable', api.table().body()).editable();                               
                    },

                    columnDefs: [
                       {
                            targets: sortValueColumn,
                            orderable: true
                        }
                    ]
                });
		});