JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Summary Portal</title>

    <!-- CDN contain the column reorder, fixed header and row reorder -->
    <link href="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.0.1/af-2.7.0/cr-2.0.0/fc-5.0.0/rr-1.5.0/datatables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/v/dt/jq-3.7.0/dt-2.0.1/af-2.7.0/cr-2.0.0/fc-5.0.0/rr-1.5.0/datatables.min.js"></script>
</head>
<body>
    <table id="SummaryTable">

    </table>
</body>
</html>

<!-- Note : I can move/Drag the row, but the row immediately moves back to its original location.  -->

JavaScript

var data = [{
                "fieldData": {
                    "Item_name": "XET",
                    "Item_code": "TOB0051",
                    "status": "Active",
                    "row count": 10,
                    "page count": 1,
                    "Item_Qty": 0
                },
                "portalData": {},
                "recordId": "206",
                "modId": "9"
            },
            {
                "fieldData": {
                    "Item_name": "XAM-8",
                    "Item_code": "TOB0040",
                    "status": "Active",
                    "row count": 10,
                    "page count": 1,
                    "Item_Qty": 0
                },
                "portalData": {},
                "recordId": "195",
                "modId": "9"
            },
            {
                "fieldData": {
                    "Item_name": "abc",
                    "Item_code": "TOB0001",
                    "status": "Active",
                    "row count": 10,
                    "page count": 1,
                    "Item_Qty": 0
                },
                "portalData": {},
                "recordId": "156",
                "modId": "9"
            }]
  $(document).ready( function(){
    $("#SummaryTable").DataTable({
        data : data,
        columns : [
            {data : 'fieldData.Item_name'},
            {data : 'fieldData.Item_code'},
            {data : 'fieldData.status'},
            {data : 'fieldData.Item_Qty'}
        ],
        ordering: false,
        rowReorder: {
        dataSrc: 'fieldData.Item_name'
        }
        // tried this one but not wokring.
        /* 
        rowReorder : true, 
        
        */
        
        //tries this one but not working.
        /* 
        
        columnDefs: [
      { orderable: true, className: 'reorder', targets: 0 },
      { orderable: false, targets: '_all' }
 			 ]

        */
    });

  });