Server side table wont extract column headers to Excel

SamerJ92

I have a DataTables that loads its data server side.

Upon clicking my Excel extract button, my table will temporarily load all rows and then run the Excel extract command, before resetting to the default paginated view.

This all works great, all the rows and columns extract fine. Except it doesn't extract the column headers.

Excel button:

            $.fn.dataTable.ext.buttons.excelAll = {
                text: 'Excel',
                action: function ( e, dt, node, config ) {
                    dt.page.len(-1).draw()
                    setTimeout(() => {  
                        $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config)
                        dt.page.len(10).draw()
                    }, 8000)
                }
            }

Table HTML:

    <div class="table-responsive">
        <table ref="table" class="table table-hover-animation table-small table-striped sidebar-table" width="100%">
            <thead>
                <tr>
                    <th>Client</th>
                    <th>City</th>
                    <th>State</th>
                    <th>Postcode</th>
                    <th>Country</th>
                    <th>Created At</th>
                </tr>
            </thead>
        </table>
    </div>

Table config:

                 table: {
                   columns: [
                        { data: "client" },
                        { data: "city" },
                        { data: "state" },
                        { data: "postcode" },
                        { data: "country" },
                        { data: "created_at" }
                    ],
                    order: [[5, "desc"]],
                    info: false,
                    pageLength: 20,
                    lengthMenu: [5, 10, 15, 20, 25, 30, 35, 50, 100],
                    dom: '<"sidebar-table-top pr-1"<"sidebar-toggle d-block d-lg-none">fB>rt<"row sidebar-table-bottom"<"col-6"l><"col-6"p>>',
                    buttons: ['excelAll'],
                    language: {
                        search: "",
                        searchPlaceholder: "Search..."
                    },
                    processing: true,
                    serverSide: true,
                    ajax: '/clients-table'
                }

I have found absolutely nothing on enabling headers when extracting to Excel, leading me to believe that it's the default behaviour and something is not quite right with my button.

I just want to be able to include the headers in the output:

Client | City | State | Postcode | Country | Created At

I'm using Vue by the way.

Any help would be greatly appreciated. Thanks!

colin

That works nicely! You just need to add the header option for excelHtml5 - see here,

Colin

SamerJ92

Well I feel dumb, thanks @colin!