DataTable column re-order

// install colreorder

  datatables.net-colreorder (v.2.1.0)
 
		
├── datatables.net-colreorder-dt@2.1.0
├── datatables.net-colreorder@2.1.0
├── datatables.net-dt@2.3.1
├── datatables.net-staterestore-dt@1.4.1
├── datatables.net@2.3.1		
						
npm i datatables.net-colreorder@2.1.0 datatables.net@2.3.1 
npm i datatables.net-colreorder-dt@2.1.0 datatables.net-dt@2.3.1

angular.json
   "node_modules/datatables.net-colreorder/js/dataTables.colReorder.js"

// Some code

import { CurrentCustomer } from 'src/app/models/current-customer';
import { DataTableConfigService } from 'src/app/services/data-table-config.service';

1.   
  disableOrderColumn = [4];  // Disable ordering for the last column
  isForCustomer = true;
  enableEdit = false;
  constructor(
     private dtConfigService: DataTableConfigService
  ) { }
 
2. 
  ngOnInit(): void {
    let isForCustomer = CurrentCustomer.IsCustomer()
    this.enableEdit = this.dtConfigService.hasAdminOrSupervisorAccess();
    if (this.enableEdit) {
      this.disableOrderColumn = [5];
    }
    else {
      this.disableOrderColumn = [4];
    }

    if (!isForCustomer) {
	  this.getRfidList();
    } else {
     // this.getRfidListByCustomerId(CurrentCustomer.CustomerId());
    }
  }

  
3. 
  buildDtOptions() {
    this.dtOptions = this.dtConfigService.buildDtOptions(
      {
        // pageLength: 25
		// order: [[1, 'asc']],
	   // serverSide: true,   ///<<<<<<< Enable server-side processing for paged list
      },
      this.disableOrderColumn,
      {

 //---------------------------------------------------
        data: this.CarList,    //<--- custom property
        columns: [
          { data: 'id', name: 'id', },
          { data: 'rfidNo', name: 'rfidNo' },
          { data: 'serialNo', name: 'serialNo' },
          {
            data: 'isAdmin', name: 'isAdmin',
	   // orderable: false,    ///<<<<< disable orderable
            render: (data: any, type: any, row: any, meta: any) => {
              if (data) {
                return '<div class="text-center text-success"> Yes </div>';
              }
              else {
                return '<div class="text-center text-danger"> No </div>';
              }
            }
          },
          { data: 'rego', name: 'rego' },

  //---------------------------------------------------
          {
            data: null,
            render: (data: any, type: any, row: any, meta: any) => {
             // console.log('✅changed', this.RfidList.size);
              if (this.enableEdit) {
                return (
                  '<div class="text-center operation-3">' +
                  '<button mat-button class="btn btn-outline-warning btn-sm edit-btn">' +
                  '<i class="fa fa-edit" title="Edit"></i>' +
                  '</button><span class="pe-1"></span>' +
                  '<button mat-button class="btn btn-outline-danger btn-sm delete-btn">' +
                  '<i class="fa fa-trash" title="Delete"></i>' +
                  '</button>' +
                  '</div>'
                );
              } else return '<div></div>';
            },
            createdCell: (td, cellData, rowData, row, col) => {
              const self = this;
              $(td)
                .off('click')
                .on('click', '.edit-btn', (e) => {
                  e.stopPropagation(); // Optional: stop event bubbling
                  self.editDialog('Edit', rowData);
                })
                .on('click', '.delete-btn', function (e) {
                  self.deleteDialog(rowData.id, rowData.name);
                });
            },
			   className: 'sticky-col-right',
          },
        ],
     /// below code is only for paged list
	 extraButtons: this.enableEdit ? [
          'copy',
          {
            text: 'CSV',
            extend: 'csvHtml5',
            className: 'btn-success',
            exportOptions: {
              columns: ':visible:not(.noExport)'
            }
          }, 'pdf', 'excel', 'print',
        ] : [], // Add extra buttons only if the user has edit permissions
      }, // <--- custom property
    );
  }

4. 
  getCarList() {
    this.isLoading = true;
    return this.carrierService.getAllCarriers().subscribe({
      next: (res) => {
        this.CarList = res;
        this.buildDtOptions();   ///<<<<<<<<
        this.dtTrigger.next(this.dtOptions);
        this.isLoading = false;
      },
      error: (error) => {
        console.log('Error: retrive Carrier list error - ' + error);
        this.toastr.warning(error.status + '- retrive data error', 'Fail');

      },
    });
  }

// Service

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';


@Injectable({
  providedIn: 'root'
})
export class DataTableConfigService {
  constructor(
    private toastr: ToastrService,
    private router: Router
  ) { }

  buildDtOptions(config?: Partial<any>, disableOrderColumn: number[] = [], customProps?: any): any {
    let component = this.getCurrentComponent();
    if (!component) {
      console.error('Component name not found. Please ensure the component is properly configured.');
      return {};
    }
    let component_name = component.name.toLowerCase() + '_table_state'; // Ensure the name is in lowercase and ends with '_table_state'

    return {
      scrollY: 720,
      scrollCollapse: true,
      autoWidth: true,
      columnDefs: [
        { orderable: false, targets: disableOrderColumn, className: 'text-center' },
        { targets: '_all', className: 'text-center' } // Center align all columns
      ],
      pagingType: 'full_numbers',
      pageLength: 15,
      lengthMenu: [10, 15, 20, 25, 50, 100],
      colReorder: true,
      responsive: true,
      stateSave: true,
      fixedHeader: true,
      fixedColumns: true,
      ordering: true,
      processing: true,  ///<<<<<<< Enable processing indicator
      ...config,       // Allow override
      ...customProps,  // Add custom props like datatable_name

      stateSaveCallback: (settings: any, data: any) => {
        const { time, ...dataWithoutTime } = data;
        const newState = JSON.stringify(dataWithoutTime);
        const parsedState = localStorage.getItem(component_name);

        if (parsedState) {
          const existingState = JSON.parse(parsedState);
          const { time, ...existingWithoutTime } = existingState;
          const oldState = JSON.stringify(existingWithoutTime);
          // Compare the new state with the existing state

          if (oldState !== newState) {
            localStorage.setItem(component_name, JSON.stringify(data));
            // console.log('✅changed', newState);
          }
          else {
            // console.log('🔄 no changed');
          }
        } else {
          localStorage.setItem(component_name, JSON.stringify(data));
        }
      },
      stateLoadCallback: (settings: any) => {
        const state = localStorage.getItem(component_name);
        return state ? JSON.parse(state) : null;
      },
      stateDuration: 0, // 1:no time limit for localStorage,  (1day）= 60 * 60 * 24, -1:for sessionStorage,

      dom:
        "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3 pull-right'f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-5'i><'col-sm-7 text-right'p>>",
      buttons:  [
        {
          extend: 'createState',
          text: 'Create State', config: {
            creationModal: true,
            toggle: {
              columns: {
                name: true,
                search: true,
                visible: true,
              },
              length: true,
              order: true,
              paging: true,
              scroller: true,
              search: true,
              searchBuilder: true,
              searchPanes: true,
              select: true,
            },
          }
        },
        'savedStates',
        {
          extend: 'removeAllStates',
          text: 'Remove All States',
          action: (e, dt: any, node, config) => {
            this.toastr.toastrConfig.positionClass = 'toast-top-center';
            this.toastr.clear();
            this.toastr.warning('Reset all statuses to default.', 'Warning');
            dt.colReorder.reset();
            localStorage.removeItem(component_name);
            // Remove all saved states
            const states = dt.stateRestore.states();
            if (states && typeof states === 'object') {
              for (const stateName in states) {
                if (states[stateName]?.remove instanceof Function) {
                  states[stateName].remove();
                }
              }
            }

            // Reset the initial columns visibility
            dt.columns().every((index) => {
              dt.column(index).visible(true);
            });

            // Reset the column reordering
            dt.colReorder.reset();
            localStorage.removeItem(component_name);
            dt.draw(); // Redraw after modification
            this.toastr.toastrConfig.positionClass = 'toast-top-right';
          },
        },
        //'colvis',   // Column visibility button
        {
          extend: 'colvis',
          text: 'Column Visibility',
          className: 'buttons-colvis',
          columns: ':not(.noVis)' // Exclude columns with the class 'noVis'
        },
         ...(customProps?.extraButtons || [])  // Allow additional buttons to be added dynamically
      ]


    };
  };

  getCurrentComponent(): any {
    let route = this.router.routerState.root;
    while (route.firstChild) {
      route = route.firstChild;
    }
    return route.routeConfig?.component ?? null;
  }

  getCurrentComponentName(): string {
    const component = this.getCurrentComponent();
    return component ? component.name.toLowerCase() : '';
  }

  hasAdminOrSupervisorAccess(): boolean {
    let currentRole = sessionStorage.getItem('Role');
    if (currentRole === 'Administrator' || currentRole === 'Supervisor') {
      return true
    }
    else {
      return false;
    }
  }

}