Remove characters from column titles on CSV buttons export

glimpsed_chaos

I added icons (Font Awesome 5) into my table's column visible headers as shown:

<th><i class="fas fa-users dt_icon_header"></i>&nbsp;Assigned Group</th>
<th><i class="fas fa-hashtag dt_icon_header"></i>&nbsp;Incident ID</th>
<th><i class="fas fa-calendar-alt dt_icon_header"></i>&nbsp;Date</th>
<th><i class="fas fa-calendar-check dt_icon_header"></i>&nbsp;Status</th>
<th>Assignee</th>
<th>Summary</th>
<th>Notes</th>
<th>Product</th>
</tr>

When I use the Copy or the CSV button my headers appear as in the output file or pasted into say notepad:
Assigned Group  Incident ID  Date  Status Assignee Summary Notes Product

However, when I use the CSV button and use the browser option to open the CSV file with an application (such as Excel) my headers appear as:
 Assigned Group  Incident ID  Date  Status Assignee Summary Notes Product

I get this is probably just an issue with the font reference and some odd substitution character. I can remove the icon inclusion and the problem goes away but would prefer to not have to do so for consistency as I have this implemented across all of my many tables but only a few will have the button extension available.

Is there a way to clean up / remove the "Â " character when the CSV option is chosen? Or remove the whole icon tag but not have it impact the DOM?

(note: I am intentionally not using the Excel or PDF option at this time due to other restrictions)

Thanks!

colin

Hi @glimpsed_chaos ,

This example here may help - it converts a checkbox to a letter on the export. That's not what you want, but the thing of interest is the orthogonal data - you could have different renderings in columns.render for the two buttons (Copy and CSV). Copy would just return the data, while CSV does that stripping.

Would that work?

Cheers,

Colin

glimpsed_chaos

Thanks for the quick reply Colin.

That might do it, I will see what I can work out from there.

glimpsed_chaos

Colin, I think that would be a fine solution for the checkbox vs Y/N or other row data manipulation needed.

However, I did manage to find a solution and it was looking deeper into the options, specifically "customize", which lead me to a Stack Overflow response.

    buttons: [
        'copyHtml5',
        {
            extend: 'csvHtml5',
            title: 'Incidents Export',
            customize: function (csv) {
                var csvRows = csv.split('\n');
                csvRows[0] = csvRows[0].replace('" Assigned Group"', '"Assigned Group"');
                csvRows[0] = csvRows[0].replace('" Incident ID"', '"Incident ID"');
                csvRows[0] = csvRows[0].replace('" Date"', '"Date"');
                csvRows[0] = csvRows[0].replace('" Status"', '"Status"');
                return csvRows.join('\n');
            }
        }                       
    ],

Essentially, removing the space that would be between the Icon and column name.

Now the export to CSV and opening from within the browser as a download is all tidy with no unwanted characters or spaces.

Thanks for the help.

colin

Ah sorry, you are right. I just noticed you said column headers - I was misread the thread to be 'column data', so yep, my solution would've been no good. Glad it's all up and running.