JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://nightly.datatables.net/css/jquery.dataTables.css">
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<button id="attach">Attach Event</button> <button id="detach">Detach Event</button><hr/>
<table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>

        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
        </tbody>
      </table>

Babel + JSX

"use strict";
class myPlugin{
    constructor (dtSettings){
        this._dtApi 	 = new $.fn.dataTable.Api( dtSettings );
        this._dtSettings = dtSettings;
        
        dtSettings.oMyPlugin = this;
    }
    
    attach(){
        var eventParams = {
        	dtSettings: this._dtSettings,
            dtApi:		this._dtApi
        };
        
    	 //this._dtApi.on( 'draw.dt', eventParams, myPlugin.event.bind( myPlugin ) );
        
         this._dtApi.on( 'draw.dt', eventParams, function(eventParams){
         	myPlugin.event(eventParams);
         });
    }
    
    detach(){
    	var eventParams = {
        	dtSettings: this._dtSettings,
            dtApi:		this._dtApi
        };
		
        /*
        // None of the following seem to work..
    	this._dtApi.off( 'draw.dt', eventParams, myPlugin.event.bind( myPlugin ) );
        this._dtApi.off( 'draw.dt', myPlugin.event.bind( myPlugin ) );
        this._dtApi.off( 'draw.dt', eventParams, myPlugin.event );
        this._dtApi.off( 'draw.dt', myPlugin.event );
        */
        
        // Neither of these seem to work, or any of the above, obviously
        this._dtApi.off( 'draw.dt', function(){
         	myPlugin.event();
        });
        
        this._dtApi.off( 'draw.dt', function(eventParams){
         	myPlugin.event(eventParams);
        });
    }
    
    static event(e){
        console.debug('e',e);
    	var { dtSettings, dtApi } = e.data;
        
        alert('Triggered draw.dt for table ID #'+dtSettings.sTableId);
    }
}

((window, document, $, undefined) => {
    $( document ).on( 'init.dt', ( e, dtSettings ) =>  {
        new myPlugin( dtSettings );
    });
    
    $.fn.dataTable.Api.register( 'myPlugin.attach()', function (  ) {
        return this.iterator( 'table', function ( dtSettings ) {
            return dtSettings.oMyPlugin.attach();
        } );
    } );
    
    $.fn.dataTable.Api.register( 'myPlugin.detach()', function (  ) {
        return this.iterator( 'table',...