Creating an Excel file with a right-to-left sheet column order using React: A step-by-step guide

The code provided above is functioning properly and successfully generates the file file.xlsx.

Inquiry: Is there a way to arrange the columns of the sheets in right-to-left order?

import React from 'react'
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";

export const ExportToExcel = ({ apiData, fileName }) => {
  const fileType =
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
  const fileExtension = ".xlsx";

  const exportToXL = (apiData, fileName) => {
    const ws = XLSX.utils.json_to_sheet(apiData);
    const wb = { Sheets: { data: ws, data2: ws }, SheetNames: ["data", "data2"] };
    const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const data = new Blob([excelBuffer], { type: fileType });
    FileSaver.saveAs(data, fileName + fileExtension);
  };

  return (
    <button onClick={(e) => exportToXL(apiData, fileName)}>Export</button>
  );
};

Answer №1

To include a new attribute on each sheet, use the code snippet below:

    let workbook = { Sheets: { sheet1: ws, sheet2: ws }, SheetNames: ["sheet1", "sheet2"], Workbook: { Theme: "dark", Views: [{Gridlines:true}, {Gridlines:true} ]} }

Make sure to pay attention to the Workbook section.

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

What is the integration between redux and next.js like?

I am currently trying to integrate Redux into an existing Next.js project, but I am struggling to grasp how the store functions server-side. I came across this example that I am following: https://github.com/vercel/next.js/blob/canary/examples/with-redux ...

Creating an interactive dropdown menu in React JS on click

My goal is to display a select tag when a text or div element is clicked. I'm unsure of the correct method and location to render it. Therefore, I decided to create a handler function that sets a variable, isItClick, to true in order to show the sele ...

Rendering a component and updating state with inline onClick event handlers

When discussing the concept of pure render methods in React and highlighting the serious anti-pattern of setting state inside the render function, how strictly should this be adhered to? It is understood that triggering a setState within the render functio ...

The React rendering process failed when attempting to utilize a stateless component

Struggling to integrate a stateless component with fetch in my project. The fetch API is successfully retrieving data, but for some reason, the stateless component remains blank. import React, { PropTypes } from 'react'; import { Card, CardTitle ...

I'm not sure how I can retrieve the pollId from a ReactJS poll

In my React code, I am fetching a poll using an API. However, I am facing an issue while working on the handleChange function for making a POST API request. The information required for the request includes PollId, userId, and answer. I am able to retrieve ...

How far should the Material UI Tooltip be positioned from its anchor element?

Is there a straightforward method to adjust the distance between the Tooltip and the anchor element? The current positioning doesn't work well for my situation, as the tooltip is too near the anchor. After reviewing all the available properties and ev ...

What is the best way to show my button only when within a specific component?

Is there a way to display the Logout button on the same line as the title only when the user has reached the Home component? In simpler terms, I don't want the logout button to be visible all the time, especially when the user is at the login screen. ...

Encountering a proxy error while attempting to create an account or log in, with no network

Embarking on my first web development journey, I utilized React-Redux to craft a React.js application within the client folder. For the backend code, I employed Node.js and MongoDb as my database. This project represents a significant milestone in my lear ...

"Exploring the possibilities of customizing Material UI tabs and implementing a tabs scroller

I'm currently trying to customize the appearance of these MUI tabs, specifically the tab color and bottom border color. Despite my attempts using makeStyles and other methods, I haven't been able to achieve the desired result. Here is an example ...

Error: An invalid object was passed instead of a stream in Redux-observal. Fix this issue

An error has occurred: TypeError - You have provided an invalid object when a stream was expected. The acceptable types are Observable, Promise, Array, or Iterable. //action.js import { map,mergeMap } from 'rxjs/operators'; import {ofType } from ...

What are the steps for importing a file into a React app that is built using Create React App as plain text?

Objectives I aim to showcase code snippets from the project itself for reference. I intend to keep the displayed code up-to-date with its implementation. I prefer not to remove myself from create-react-app This React project, built using create-react-ap ...

The main-panel div's width increase is causing the pages to extend beyond the window's width limit

I recently downloaded a Reactbootstrap theme and managed to integrate it with NextJS successfully. However, I am facing an issue where my <div className="main-panel"> in the Layout.js is extending slightly beyond the window. It seems like t ...

Exploring the contents of a dropdown menu by navigating through a tree structure in React JS

A unique custom component has been developed, featuring a dropdown with a tree-like structure inside that allows users to search for values. However, it seems that the search function only works after reaching two levels of the tree structure. Currently, ...

Trouble with the layout of Material UI's Select component

I recently created a select component with menu items using Material-UI version 4.12. However, when I try to display the select component, it appears completely wrong on the screen. Strangely, there are no error messages in the console. What could possibly ...

Combining query results/objects by id in an array within a React application with Firebase Firestore

After retrieving chat messages from a Firestore snapshot, I have the following query result involving conversations among three individuals: {timestamp: "October 25th 2020, 11:13:59 am", name: "John Doe", email: "<a href="/cdn ...

Difficulty in dynamically rendering a component using React Router

I've been working on my personal website and I'm facing an issue with rendering a component dynamically using React Router. Everything seems correct to me, but for some reason, it's not functioning as expected. Despite following the documen ...

The Next.js page suddenly disappears after a moment

Out of the blue, my next.js page suddenly went blank for no apparent reason. I didn't make any changes, it just happened. I attempted to restart my dev server and even deleted the '.next' folder, but nothing seemed to fix the issue. Despite ...

The React Material UI Select component shows an issue where the selected value does not update after choosing an item from the dropdown menu

This snippet represents a portion of the code I have been working on. My approach involves fetching drug data and categorizing them based on their class. I then proceed to map these categories, checking if a drug belongs to a certain category. If it does, ...

Is there a way to add CSS styles to all div elements except for those that are contained within a parent div with a certain class

I have a universal CSS that impacts all div elements, but I need to exclude the divs within a parent div that has a specific class, like in this instance where it's the "should-not-apply" class. div { font-size: 20px !important; font-weight: 50 ...

The type 'Dispatch<SetStateAction<boolean>>' cannot be assigned to type 'boolean'

Currently, I am attempting to transfer a boolean value received from an onChange function to a state variable. let [toggleCheck, setToggleCheck] =useState(false);` <input type="checkbox" id={"layout_toggle"} defaultChecked={toggleCh ...