Datatable ColReorder

by Fred Farmer

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.1.7/css/dataTables.bootstrap5.css">
<script src="https://cdn.datatables.net/2.1.7/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.1.7/js/dataTables.bootstrap5.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/2.0.4/css/colReorder.bootstrap5.css">
<script src="https://cdn.datatables.net/colreorder/2.0.4/js/dataTables.colReorder.js"></script>
<script src="https://cdn.datatables.net/colreorder/2.0.4/js/colReorder.bootstrap5.js"></script>
<script src="https://cdn.datatables.net/plug-ins/2.1.7/dataRender/ellipsis.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<table id="DealGridTable" class="display table table-striped" style=""></table>

JavaScript

let DealGridTable = $('#DealGridTable').DataTable({
    autoWidth: false,
    scrollX: true,
    lengthChange: false,
    searching: false,
    colReorder: { columns: ':not(:first-child)'},
    scrollY: 'calc(100vh - 130px)',
    order: [],
    columns: [
        {
            title: 'Actions',
            data: 'rowActions',
            orderable: false,
            type: 'html',
            width: '100px'
        },
        {
            title: 'ID',
            data: 'id',
            orderable: false,
            visible: false,
            className: '',
            type: 'num'
        },
        {
            title: 'Deal Confirmation Number',
            data: 'dealNumber',
            orderable: true,
            visible: true,
            className: '',
            width: '150',
            type: 'string'
        },
        {
            title: 'Type',
            data: 'dealType',
            orderable: true,
            visible: true,
            className: '',
            width: '100',
            type: 'string'
        },
        {
            title: 'Status',
            data: 'status',
            orderable: false,
            visible: true,
            className: '',
            width: '100',
            type: 'string'
        },
        {
            title: 'Date',
            data: 'tradeDate',
            orderable: true,
            visible: true,
            className: '',
            width: '100',
            type: 'date'
        },
    ],
    processing: false,
    serverSide: false,
    stateSave: true,
    "data": [
        {
            "id": 10001,
            "dealNumber": "23-10001",
            "dealType": "Sale",
            "status": "Approved",
            "tradeDate": "2023-02-13",
            "rowActions": "\u003Ca href=\u0022#\u0022class=\u0022btn btn-sm btn-outline-primary me-1\u0022 role=\u0022button\u0022 title=\u0022Edit\u0022 \u003E\u003Ci class=\u0022fa fa-sm fa-fw fa-pencil\u0022\u003E\u003C/i\u003E\u003C/a\u003E\u003Ca...