How to preserve alternating row styles when exporting Angular Data Table to Excel with .withButtons?

Utilizing Angular DataTable to display a list of data, with alternate row background color and border styles defined.

An issue arises when exporting the Data table to excel as the alternate row style and border styles are lost. Only the raw data is included.

The approach involves using Data Table buttons for this purpose. The following Code snippet showcases the button Options being used:

this.dtOptions = DTOptionsBuilder.newOptions()
    .withFnServerData(serverData)
    .withDataProp('data')
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withOption('paging', true)
    .withOption('autoWidth', false)
    .withPaginationType('full_numbers')
    .withDisplayLength(rowCount)
    .withDOM('lrtip')
.withButtons([
     {
            extend: "excelHtml5",
            filename: "MailItemList",
            text: "<i class='fa fa-file-excel-o'></i>  Excel",
            title: "Mail Item List",
            exportOptions: {                    
                columns:[2,3,4,5,6,7,8.9,10,11,12,13,14,15,16,17,18,19,20,21,22]
            },
            exportData: { decodeEntities: true }
     }
      ]);

Any assistance on this matter would be highly appreciated.

cssangularjs

Answer №1

In order to apply styles in the .xlsx file, you will need to manually add them. The simplest method is to utilize the built-in styles using the s attribute.

For example:

.withButtons([{
        extend: 'excelHtml5',
        customize: function ( xlsx ){
            var sheet = xlsx.xl.worksheets['sheet1.xml'];

            // jQuery selector to add a border to the third row
            $('row c[r*="3"]', sheet).attr( 's', '25' );

            // jQuery selector to set the forth row's background gray
            $('row c[r*="4"]', sheet).attr( 's', '5' );
        }
    }
]);

A demo showcasing this: http://plnkr.co/edit/pUcKSbjqavCKUN3eIdy1?p=preview

UPDATE To alternate row striping, you can use 

$('row:odd c', sheet).attr( 's', '5' );

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reposition the selection column to the right side within the UI-Grid

I am currently working with ui-grid and I need help relocating the selection column to the right side. Appreciate any assistance. Thank you! ...

javascriptangularjsangular-ui-grid

New alternative for form-control-feedback in Bootstrap 4

The form-control-feedback class doesn't appear to be included in Bootstrap 4. What is the most effective way to achieve the desired outcome (an icon inside the textbox) using Bootstrap 4? <head> <link rel="stylesheet" href="https://max ...

csstwitter-bootstrapbootstrap-4

Tips for making modal body text reactive to different screen sizes

The text sent from JavaScript to the modal does not make the text_description element in the modal body responsive Modal Image https://i.sstatic.net/UJEG8.png HTML Code Snippet <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/boot ...

htmlcssbootstrap-4

Hide the div once it goes off screen, ensuring that the user stays in the same position on the page

On my website, I implemented an effect similar to the Airbnb homepage where there is a "How it Works" button that toggles a Div element pushing down the entire page. However, when the user scrolls to the bottom of the toggled div (#slideDown) and it disapp ...

javascriptjqueryhtmlcss

Ways to ensure a div is positioned beneath another div

I am facing an issue with two divs; one on the right and the other on the left. When I try to add a third div below the right div, it ends up appearing under the left div or at the left side of the left div. Here is my current setup: https://i.sstatic.n ...

htmlcss

What is the best way to prevent <hr> from covering a <div> in CSS?

I'm currently facing a challenge in moving an <hr> element behind my div element. I have already tried positioning, but it didn't work as expected. The <hr> is still visible through the white parts, most likely because they are transp ...

htmlcss

Emphasize a feature within a dynamic DIV

How can I highlight the span(class="tiny") element individually when its containing div is active or clicked? I have attempted to highlight the tiny span element without success, as only the entire div was highlighted. Here's the code snippet I' ...

javascriptjqueryhtmlcss

Is it possible to utilize ag-grid's API to filter multiple checkbox values simultaneously?

I am currently utilizing angularjs and have implemented a series of checkboxes to filter my ag-grid. So far, I have successfully utilized radio buttons and the api.setQuickFilter method for filtering based on individual values. However, I am facing an iss ...

javascriptangularjscheckboxfilteringag-grid

AngularJS page not loading variables within scope during initial page load

I am facing an issue with a chart in my single-page application. The chart, created using angular-chart.js, is not loading when the view initializes because the data has not yet been loaded via the API in the factory. Even after spending time on that view, ...

angularjs

Working with JSON objects in AngularJS

I have a JSON dataset in the following structure. I need to extract information from the JSON and display it on an HTML table. [region: [name:"", code:""IntradayBalance:{ currency:,Time:,Balance: }.... ], acccountcurrencyBalance:[{ c ...

javascriptjsonangularjs

The MIME type 'text/html' is incompatible with stylesheet MIME type and is not supported

I have exhausted all possible solutions for the issue, from specifying the type for <link rel="stylesheet" href="./style.css" /> to using app.use(express.static('public')), but unfortunately, none of them seem to resolve the problem. index ...

javascriptcssreactjswebpackmime-types

Is it possible to change the hover highlight rotation on a link without affecting the surrounding elements?

Is it possible to rotate the highlight on a link when hovered? I'm new at this, so apologies if this question seems basic. This is how my css/html is currently structured: .links { display: block; } .links a { color: #000000; text-decoratio ...

javascripthtmlcss

The width of table cells expands even when using the box-sizing property set to border-box

Whenever I click the View button, I want to apply padding to the cells in my table. However, this action also increases the width of the cell. Despite researching various solutions like those found in this question, this one, and this post, I still encount ...

htmlcssangular

During the selection of a dropdown in an AngularJS application using Python Selenium, an unexpected error occurred

In my AngularJS application, I am trying to select a drop down using Python Selenium. However, instead of <select>, I have <i class="dropdown icon"/>. When attempting to use the Select class, an exception is thrown stating that "Select only wor ...

pythonangularjsseleniumwebautomation

The background image on my link bar is inexplicably not appearing

I've been trying to solve this issue for hours and I'm at a loss. Initially, the background image was displaying correctly, but now it's not working. HTML: <head> <link type="text/css" rel="stylesheet" href="css/normalize.css" ...

phphtmlcssimagebackground

What about employing the position:fixed property to create a "sticky" footer?

I've come across various methods for creating a sticky footer, such as Ryan Fait's approach found here, another one here, and also here. But why go through the trouble of using those techniques when simply applying #footer{position:fixed; bottom ...

htmlcssfootersticky-footer

Using ASP.NET MVC to generate dynamic CSS styles

I am seeking a solution that will allow me to achieve the following objectives: Retrieve dynamically generated CSS from an action method Select a CSS file based on request parameters or cookies Utilize a tool for combining and compressing (minifying) CS ...

c#.netasp.net-mvccss

Is it common for content to duplicate when using the 'position: fixed' property in CSS media print?

Consider the following div element: ... <div id='section-to-print'>CONT /*Content*/ </div> ... Accompanied by this CSS code snippet: @media print { * { -webkit-transition: none !important; ...

cssprintingpositionduplicatesfixed

What's causing this element to overlap the previous one (apologies, once more)?

This is the code: <form id="the_form" action="">ev </div> <!-- final pay_block --> <div class="linea"/> <div class="spacer"/> The "linea" element is currently overlapping the buy button because a margin-bottom of 15px has be ...

csshtml

Implement the properties encapsulation design pattern

In need of a method to control document activation logic, where activating a document involves adding it to a list of activeDocuments and setting a flag to true. Direct access to the isActive property should be prohibited. class DocumentService { pr ...

angularjsangulartypescriptdesign-patternsarchitecture