JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://cdn.datatables.net/2.3.2/css/dataTables.dataTables.min.css" rel="stylesheet" integrity="sha384-gC2LYLqCExndkNE9hTLhmEXvk8ZgIf42nRengHFbC9uaws2Ho0TW+ENGe4w15AHy" crossorigin="anonymous">
<link href="https://cdn.datatables.net/buttons/3.2.4/css/buttons.dataTables.min.css" rel="stylesheet" integrity="sha384-CEGjJEAUOa45Jz9PQsvKuOUrsy4B/1nuiBPCJWCO8JkPbziwbjZV+vqPsHc1wA7z" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net/2.3.2/dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-buttons/3.2.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables.net-buttons-bs5/3.2.4/buttons.bootstrap5.min.js"></script>


<table id="example" style="width:100%"></table>

CSS

#example tbody tr.selected {
  background-color: #cce5ff !important;
  color: #004085;
}

JavaScript

$(document).ready(function () {
  const dataSet = [
    { id: 1, client: 'Acme Corp', invoiceNumber: 'INV001', amount: 1200, status: 'Pending' },
    { id: 2, client: 'Beta LLC', invoiceNumber: 'INV002', amount: 500, status: 'Paid' },
    { id: 3, client: 'Gamma Inc', invoiceNumber: 'INV003', amount: 750, status: 'Overdue' }
  ];

  const table = $('#example').DataTable({
    data: dataSet,
    columns: [
      { title: "ID", data: "id" },
      { title: "Client", data: "client" },
      { title: "Invoice Number", data: "invoiceNumber" },
      { title: "Amount", data: "amount" },
      { title: "Status", data: "status" }
    ],
    layout: {
      topStart: {
        buttons: [
          {
            extend: 'collection',
            text: 'Actions',
            // enabled: false,
            name: 'actionsCollection',
            autoClose: true,
            buttons: [
             {
                text: 'Withdraw',
                name: 'withdrawBtn',
                action: function (e, dt, node, config, cb) {
                  alert('Withdraw clicked');
                },
                enabled: false
              },
              {
                text: 'Write-off',
                name: 'writeoffBtn',
                action: function (e, dt, node, config, cb) {
                  alert('Write-off clicked');
                },
                enabled: false
              }
            ]
          }
        ]
      }
    }
  });

  // table.button('actionsCollection:name').enable(false);
  // table.button('withdrawBtn:name').enable(false);
  // table.button('writeoffBtn:name').enable(false);
  
  // Handle row selection
  $('#example tbody').on('click', 'tr', function () {
    if ($(this).hasClass('selected')) {
      $(this).removeClass('selected');
      // Disable buttons if no selection
      table.button('actionsCollection:name').enable(false);
     ...