JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<table id="example1" class="table table-sm cell-border compact stripe table-bordered table-hover dataTable dtr-inline"
    cellspacing="0" width="100%" aria-describedby="example1_info">


    <thead>
        <tr>
            <th class="d-none sorting_disabled" rowspan="1" colspan="1">Date</th>
            <th class="sorting_disabled" rowspan="1" colspan="1">Category</th>
            <th class="sorting_disabled" rowspan="1" colspan="1">Item Name</th>
            <th class="sorting_disabled" rowspan="1" colspan="1">Price</th>
            <th class="sorting_disabled" rowspan="1" colspan="1">Opening</th>
            <th class="sorting_disabled" rowspan="1" colspan="1">Recived</th>
            <th class="sorting_disabled" rowspan="1" colspan="1">Total</th>
            <th class="sorting_disabled" rowspan="1" colspan="1">Closing</th>
            <th class="sorting_disabled" rowspan="1" colspan="1">Sales</th>
            <th class="sorting_disabled" rowspan="1" colspan="1">Total</th>
        </tr>
    </thead>

    <tbody>

        <tr data-row-id="1761" class="even">
            <td class="editable-col d-none" col-index="0" oldval="2022-08-07">2022-08-07</td>
            <th class="editable-col dtr-control" col-index="1" oldval="Brandy" tabindex="0">Brandy</th>
            <td class="editable-col" col-index="2" oldval="Golden Touch...

JavaScript

$(document).ready(function () {

        document.title = 'shop';
        $('#example1').DataTable({
            "processing": true,
            "dom": 'Bfrtip',
            "lengthChange": false,
            "searching": false,
            "info": true,
            "autoWidth": false,
            "responsive": true,
            "retrieve": true,
            "paging": false,
            "lengthMenu": [
                [-1],
                ["All"]
            ],
            "bSort": false,
            "bLengthChange": false,

            "buttons": ["copy", {
                    extend: 'excelHtml5',
                    footer: true,
                    text: 'Save as Excel',
                    pageSize: 'A4',
                      customize: function (xlsx) {
                        var sheet = xlsx.xl.worksheets['sheet1.xml'];
                        
                        $('row:first c', sheet).attr('s', '32');

                        var col = $('col', sheet);
                        $(col[0]).attr('width', 8);
                        $(col[1]).attr('width', 24);
                        $(col[2]).attr('width', 9);
                        $(col[3]).attr('width', 8);
                        $(col[4]).attr('width', 7);
                        $(col[5]).attr('width', 8);
                        $('row* ', sheet).each(function (index) {
                            if (index > 0) {
                                $(this).attr('ht', 26);
                                $(this).attr('customHeight', 1);
                            }
                        });






                    },
                    
                  
                }
            ],


        });
    });