In my previous post, about exporting data to Excel from api using React, there were comments like how to add custom header and style to the sheet!...
For further actions, you may consider blocking this person and/or reporting abuse
Cool guide really easy to follow thanks for sharing.
You're welcome!
Sure no problem hope to see more of this content.
Great tutorial, I have one question. When I change SheetNames: ["data"] to SheetNames: ["Sheet 1"] or anything the data does not export, can I not change the sheet name?
what do you want to achieve bro ?
I want the sheet/page in the export to have a custom name and not data.
do you need assistance? or you found how to do it ?
I managed to make it work. I needed to add link.fillStyle = 'white'; in the click event function.
Hi Isaac, I have the same problem, can you explain with more detail how to you done to change the sheet name from "data" to anything?
Where you inserted linkfillStyle = 'white';
Thank you very much.
Javier.
thanks for sharing
There is one big catch though, you must define cell format yourself.
Let's say you already had an Excel sheet (with styling), and want to use that sheet to store data. An approach is to open your existing sheet, copy all existing cell information, write API data, then save to a new file (in-place replacement is not available AFAIK). However,
xlsxwill nullify all existing style of the sheet so you must manually define cell style upon exporting.Apparently, this feature is only available in the Pro version, so it is a huge blockage IMO.
Okay, wait a second - did I get this correctly: I load JSON data from your server and turn that into an excel file INSIDE YOUR BROWSER using massive amounts of client side javascript.
Why?
Instead of requesting JSON from the server, why not requesting the excel file directly from the server (create it serverside)?
That would result in a much smaller client side app and works even in older browsers.
Or did I miss any reason to do that stuff in the browser?
Server-side export is a different use case, and is not always a solution. For example, if you want to create a reusable table component with XLSX exporting feature, then client side is a way to do so. Certainly, information in the table is from an API, and at least I would not want to have my table feature being disabled due to internet connection issue.
The article is an introduction to
xlsxfeature, so either examples work.You should definitely mention just HOW BIG the xlsx module is. Its over 400kb of minified javascript. Thats nothing you should casually load alongside your app just because someone might want to save an excel file.
And if you want to create a React table component, it should not be built with excel export included in the component. That logic definitely belongs someplace else.
There may be a rare case of when there is really no other way than generating the excel file in the browser - but the way your article is written most people get the idea that there is no downside at all to that approach. "Just install those three modules" sounds simple but in the background you are getting truckloads of additional code into your application. Your article seems to be aimed at beginners.
So big red warning: you would normally NOT want to do it this way, but there MAY be reasons to do so.
I'm not the author by the way, just a passerby.
I agree it has an impact on performance and should have more consideration in a real product implementation, but again, that was not the point of this article (at least in the way I interpret it).
The table example was simply based on MUI data grid, which was on top of my head at that time.
How can I show values into rows rather than showing it in column
Nice question, I will research on this than answer to you
Sure,Thank you
@jasurkurbanov
I need a help and its urgent.
I need to set width property for columns that get displayed on excel sheet and also add some colors .
How do i do that ?????
@kadam you can do it with xlsx pro version sheetjs.com/pro. But there are other libraries which can help you npmjs.com/package/xlsx-color