First row not sorted

by Nayana Das

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<div style="width: 100%;overflow:auto;">
    <Table class="container">
        <TR>
            <TD>
                <TABLE id="fixed">
                    <thead></thead>
                    <tbody>
                        <TR id="row1">
                            <TD>Data 1</TD>
                        </TR>
                        <TR id="row2">
                            <TD>Data 2</TD>
                        </TR>
                        <TR id="row3">
                            <TD>Data 3</TD>
                        </TR>
                    </tbody>
                </TABLE>
            </TD>
            <TD>
                <TABLE id="sortable">
                    <thead></thead>
                    <tbody>
                        <TR id="row1">
                            <TD>Data 1</TD>
                            <TD class="sortable">Data 2</TD>
                            <TD>Data 3</TD>
                            <TD>Data 4</TD>
                        </TR>
                        <TR id="row2">
                            <TD>Data 1</TD>
                            <TD class="sortable">Data 2</TD>
                            <TD>Data 3</TD>
                            <TD>Data 4</TD>
                        </TR>
                        <TR id="row3">
                            <TD>Data 1</TD>
                            <TD class="sortable">Data 2</TD>
                            <TD>Data 3</TD>
                            <TD>Data 4</TD>
                        </TR>
                    </tbody>
                </TABLE>
            </TD>
</div>

CSS

.container{
    margin:0px;
    padding:0px;
    
}
#fixed{
     font-weight: bold;   
}
}

JavaScript

var fixHelperModified = function (e, tr) {
      var $originals = tr.children();
      var $helper = tr.clone();
      $helper.children().each(function (index) {
          $(this).width($originals.eq(index).width())
      });
      return $helper;
  };

  $("#sortable").sortable({
      helper: fixHelperModified,
      cancel: ".ui-state-disabled",
      items: "tr:not(.ui-state-disabled)"
  }).disableSelection();

  $("#fixed tr").addClass("ui-state-disabled");