JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link href="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.7.0/dt-2.2.2/b-3.2.2/b-colvis-3.2.2/date-1.5.5/sb-1.8.2/datatables.min.css" rel="stylesheet" integrity="sha384-gXCegGC0RpCpRdCKIITm0oip7QAvCrCTgMFH8q3eFva9/Kz48Eg764m8NbsPKkez" crossorigin="anonymous">
 
<script src="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.7.0/dt-2.2.2/b-3.2.2/b-colvis-3.2.2/date-1.5.5/sb-1.8.2/datatables.min.js" integrity="sha384-UQ/icYi42EVbJmfU6swL96VmMBo6vvHiajXqpgI6PlB1R9IBOaF0rzpBa5hEqeiC" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

</head>

<table id="example" class="display" style="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>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011-04-25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011-07-25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009-01-12</td>
     ...

JavaScript

new DataTable('#example', {
  dom: 'Bfrtip',
  buttons: [
    {
      extend: 'colvis',
      className: 'btn-test',
      collectionLayout: 'fixed two-column',
      columns: ':gt(0)',
      text: '<i class="fas fa-columns"></i>',
      titleAttr: 'Show/Hide Columns'
    },
    {
      extend: 'searchBuilder',
      className: 'dropdown-toggle'
    },
    {
      extend: 'collection',
      text: 'Table control',
      buttons: [
        {
          text: 'Toggle start date',
          attr: {
            "data-roles": 'admin',
            "data-roles-action": "remove"
          },
          action: function (e, dt, node, config) {
            dt.column(-2).visible(!dt.column(-2).visible());
          }
        },
        {
          text: 'Toggle salary',
          attr: {
            "data-roles": 'admin',
            "data-roles-action": "remove"
          },
          action: function (e, dt, node, config) {
            dt.column(-1).visible(!dt.column(-1).visible());
          }
        }
      ]
    }
  ]
});

dashboard = {}
dashboard['roles'] = [ "user" ];

for (i = 0; i < $.fn.dataTable.tables().length; i++){
  table = $($.fn.dataTable.tables(i)).DataTable();

  table.buttons().each(function(value, index){
    let btn_roles = value.node?.attributes?.getNamedItem("data-roles");
    if (btn_roles) {
      if (btn_roles.value.split(",").filter((role) => dashboard.roles.includes(role)).length == 0){
        if (value.node?.attributes?.getNamedItem("data-roles-action").value == "remove") {
          table.buttons(value.node).remove()
        }
      }
    }
  });
}