JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/bs/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/b-print-2.2.3/cr-1.5.6/fc-4.1.0/fh-3.2.3/r-2.3.0/rg-1.2.0/sc-2.0.6/sp-2.0.1/sl-1.4.0/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/b-print-2.2.3/cr-1.5.6/fc-4.1.0/fh-3.2.3/r-2.3.0/rg-1.2.0/sc-2.0.6/sp-2.0.1/sl-1.4.0/datatables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<button type='button' class='reload'>
Reload
</button>
<table id="example" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Location</th>
                <th>Permissions</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Location</th>
                <th>Permissions</th>
            </tr>
        </tfoot>
    </table>

JavaScript

let count = 0;
$(document).ready(function() {
    let dt = $('#example').DataTable({
        ajax: function fnServerObjectToArray(aoData, fnCallback, settings) {
        	fnCallback(count % 2 === 0 ? data: data2);
          count++;
        },
        searchPanes: {
        	cascadePanes: true,
            columns: [ 3 ],
            viewTotal: true
        },
        dom: 'Plfrtip',
        columns: [
            {
                data: "users.first_name"
            },
            {
                data: "users.last_name"
            },
            {
                data: "sites.name"
            },
            {
                data: "permission",
                render: {
                    _: '[, ].name',
                    sp: '[].name'
                },
                searchPanes: {
                    orthogonal: 'sp'
                }
            }
        ],
        columnDefs: [
            {
                searchPanes: {
                    show: true
                },
                targets: [3]
            }
        ],
        initComplete: function() {
        console.log('init');
            //this.api().searchPanes.rebuildPane();
        }
    });
    $('.reload').on('click', () => {
    	console.log(1);
    	dt.ajax.reload();
    });
});
const data2 = {
  "data": [
    {

      "users": {
        "first_name": "Quynn",
        "last_name": "Contreras",
        "site": "1"
      },
      "sites": {
        "name": "Edinburgh"
      },
      "permission": [
        {
          "id": "3",
          "name": "Desktop"
        },
        {
          "id": "1",
          "name": "Printer"
        },
        {
          "id": "4",
          "name": "VMs"
        }
      ]
    },
     {

      "users": {
        "first_name": "Xantha",
        "last_name": "George",
        "site": "1"
      },
      "sites": {
        "name": "Edinburgh"
      },
      "permission": [
        {
          "id": "2",
          "name": "Servers"
        }
      ]
  ...