JSFiddle - React, Tailwind, and code Playground

by prtome

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.2/css/uikit.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.2/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/css/jquery.dataTables.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
<ul data-uk-tab="{connect:'#tab-content'}" class="uk-tab">
  <li id="viewA" class="uk-active" aria-expanded="false">
    <a href="#" >Tab A</a></li>
  <li id="viewB" class="" aria-expanded="true">
    <a href="#">Tab B</a></li>
  <li id="viewC" aria-expanded="false" class="">
    <a href="#">Tab C</a></li>
 </ul>
 
 <ul id="tab-content" class="uk-switcher">
   <li>
     <div id="data_viewA">
       <table id="tableA" class="uk-table">
        <thead><tr><th>HAHAHA</th><th>HAHAHA</th></tr></thead>
         <tbdoy><tr><td>yes1</td><td>yes1</td></tr><tr><td>yes2</td><td>yes2</td></tr></tbdoy>
       </table>
     </div>
   </li>
    <li>
     <div id="data_viewB">
       <table id="tableB" class="uk-table">
         <thead><tr><th>OHOHOH</th><th>OHOHOH</th></tr></thead>
         <tbdoy><tr><td>oui</td><td>yes2</td></tr><tr><td>non</td><td>yes2</td></tr></tbdoy>
       </table>
     </div>
   </li>
    <li>
     <div id="data_viewC">
       <table id="tableC" class="uk-table">
         <thead><tr><th>HIHIHI</th><th>HIHIHI</th></tr></thead>
         <tbdoy><tr><td>si</td><td>yes2</td></tr><tr><td>no</td><td>yes2</td></tr></tbdoy>
       </table>
     </div>
   </li>
   </ul>

JavaScript

mTableA = $('#tableA').DataTable({
            "pageLength": 5,
            dom: 'ZBlfrtip',
            "lengthMenu": [[ 15, 30, 50, 75, 100,-1],[ 15, 30, 50, 75, 100,'all']]
          });

 mTableB = $('#tableB').DataTable({
            "pageLength": 5,
            dom: 'ZBlfrtip',
            "lengthMenu": [[ 15, 30, 50, 75, 100,-1],[ 15, 30, 50, 75, 100,'all']]
          });

 mTableC = $('#tableC').DataTable({
            "pageLength": 5,
            dom: 'ZBlfrtip',
            "lengthMenu": [[ 15, 30, 50, 75, 100,-1],[ 15, 30, 50, 75, 100,'all']]
          });


$('[data-uk-tab]').on( 'change.uk.tab', function (e,active) {
      console.log("UK-TABLE",$('.uk-switcher').find('.uk-table').get(active.index()).id);
				console.log("PAGE DATATABLE ARE ",$.fn.dataTable.tables());
				console.log("THIS DATATABLE IS: ", $.fn.dataTable.tables(true));
        
          $($.fn.dataTable.tables({visible: true, api: true})).DataTable().columns.adjust();
});