JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">

<head>
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- JS Interno -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>   

    <!-- Datatables -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.colVis.min.js"></script>

    <!-- JS Export datatable -->
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" language="javascript"...

CSS

.tabledit-toolbar.btn-toolbar {
   flex-wrap: nowrap;
}

JavaScript

(function($){
// Edit via ajax with MySQL
$(document).ready(function() {
        $('#example').Tabledit({    
            url: 'processing_materiais_ibm/att_del_retirada_ibm.php',
            dataType:'json',
            columns: {
                identifier: [0, 'id'],
                editable: [[1, 'material'], [2, 'party_number'],[4, 'quantidade'],[6, 'data_retirada']]
            },
            

            restoreButton:false,

            // Delete via ajax with MySQL
            onSuccess:function(data, textStatus, jqXHR)
            {
                if(data.action == 'delete')
                {
                    $('#' + data.id).closest('tr').css('background','#ffdfd4');
                    $('#' + data.id).closest('tr').fadeOut(800,function(){
                        $('#' + data.id).remove();
                    });
                }
            },
            
            // Botoes personalizados do Tabledit
            buttons: {
                edit: {
                    html: '<span class="fas fa-pencil-alt"></span>',
                    action: 'edit'
                },
                delete: {
                    html: '<span class="fas fa-trash-alt"></span>',
                    action: 'delete'
                },
                save: {
                    class: 'btn btn-sm btn-success',
                    html: 'Save'
                },
                confirm: {
                    class: 'btn btn-sm btn-danger',
                    html: 'Confirm'
                }
            },
        });
});
})(jQuery);