Alignment customization in Exceljs for richText cells

"exceljs": "^3.9.0"

In order to create a spreadsheet with cells containing two different values, each aligned differently (one left and one right), I am looking for a solution similar to the image shown in this screenshot: https://i.sstatic.net/ySdiO.png

Currently, my output looks like this: https://i.sstatic.net/oQE0u.png

Below is the richText for the cells without the "/" character:

    [
  {
    "font": {
      "size": 8,
      "name": "Arial"
    },
    "alignment": {
      "vertical": "middle",
      "horizontal": "distributed"
    },
    "text": "392.3 "
  },
  {
    "font": {
      "color": {
        "argb": "00c90a00"
      },
      "size": 8,
      "name": "Arial"
    },
    "alignment": {
      "vertical": "middle",
      "horizontal": "distributed"
    },
    "text": " -10%"
  }
]

And here is the richText for the cell with the "/" character:

    [
  {
    "font": {
      "size": 8,
      "name": "Arial"
    },
    "alignment": {
      "vertical": "middle",
      "horizontal": "distributed"
    },
    "text": "392.3 "
  },
  {
    "font": {
      "size": 8,
      "name": "Arial"
    },
    "alignment": {
      "vertical": "middle",
      "horizontal": "distributed"
    },
    "text": " / "
  },
  {
    "font": {
      "color": {
        "argb": "00c90a00"
      },
      "size": 8,
      "name": "Arial"
    },
    "alignment": {
      "vertical": "middle",
      "horizontal": "distributed"
    },
    "text": " -10%"
  }
]

I am wondering if it is possible to achieve the layout seen in the first screenshot.

Answer №1

Can the layout seen in the initial screenshot be replicated?

Absolutely! However, adjusting text alignment within the same cell is not supported by Excel itself or ExcelJS. Numerous articles have addressed this limitation in Excel, with one quote summing it up perfectly:

Unlike Word, Excel does not support paragraph formatting within a single cell. Horizontal and vertical alignment settings apply to the entire cell.

This insight was shared by User Hansv MVP in this forum thread.

There are several approaches you can take to achieve a similar result:

  • Splitting cells containing data. ExcelJS offers the .spliceRows() function, which allows for manipulation of cells (with RichText formatting applied where needed).
  • Implementing a logic for sequential writing, placing each part of the data in a separate cell and manipulating borders to blend seamlessly with background colors.
  • And so on.

The second approach is recommended for its flexibility in establishing a "formatting logic" to accommodate diverse content needs.

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 best way to create a toggle button that can show more or show less of a text snippet with animation?

Is it possible for someone to assist me with showing a long text partially and providing a "show more" button to reveal the rest, along with a "show less" option, all with some CSS animation? I was thinking of using a font awesome arrow down icon for expan ...

Unexpected Behavior when Passing @Input() Data Between Parent and Child Components in Angular 2 Application

I am currently in the process of abstracting out a tabular-data display to transform it into a child component that can be loaded into different parent components. The main aim behind this transformation is to ensure that the overall application remains "d ...

invoking a function at a designated interval

I am currently working on a mobile application built with Ionic and TypeScript. My goal is to continuously update the user's location every 10 minutes. My approach involves calling a function at regular intervals, like this: function updateUserLocat ...

Learn how to effectively utilize templateURL in an express and angular project

Our project utilizes Express without any view engine. To set up static directories, we have the following: app.use(express.static(__dirname + '/public')); app.use(express.static(__dirname + '/view')); app.use(express.static(__dirname + ...

In a perplexing twist, requests made to the Express app arrive with empty bodies despite data being sent, but this anomaly occurs

Welcome to the community of inquisitive individuals on Stack! I'm facing an interesting challenge while developing an Express app. Despite everything running smoothly with two routes, I've hit a roadblock with one route that seems to have empty i ...

WebStorm: React and Bootstrap autocomplete feature fails to function

After installing React and Bootstrap in WebStorm, I encountered an issue where the Bootstrap code highlighting was not working. Despite JSX functioning correctly, the problem with Bootstrap remains unresolved. Can anyone provide guidance on how to resolve ...

The intricacies of converting AudioBuffers to ArrayBuffers

I currently have an AudioBuffer stored on the client-side that I would like to send through AJAX to an express server. This link provides information on how a XMLHttpRequest can handle sending and receiving binary data in the form of an ArrayBuffer. In m ...

hover event with dynamic query functionality

I am encountering an issue with a live search box and the onmouseout event. After typing a keyword in the search box and the results are displayed, I want the data (results) to disappear when I hover out of the div. If the user moves their mouse out of the ...

Interactions between faces in Three.js causing artifacts

I have successfully created two transparent boxes that are positioned so their faces touch. However, the issue arises when the faces of the boxes actually touch. // inner object var mesh2 = new THREE.Mesh(geometry, material); mesh2.position.x = 0; mesh2 ...

Ways to determine if a website is being accessed from a mobile device or a computer without relying on TeraWurfl technology

After my search on the internet yielded no answers, I decided to post my question here. Is there a method available to detect whether a site is being accessed from a computer or mobile device without using TeraWurfl? I'm looking for a simple code snip ...

I am looking to showcase the data retrieved from an API by arranging it into columns with automatic data filling in a project using React.js and MySQL

When using the onKeyUp event to trigger an API call without submitting the form, I successfully fetched data in response if the mobile number matched. However, I am struggling to understand how to display this data as a default value in columns. I have tri ...

What steps can be taken to retrieve a user's login information when their provided ID and Password match the records within the database?

When a user enters their ID and password in this form, the system checks whether it matches the data in the database. If there is a match, the user is allowed to log in and redirected to the "action.php" page. If there is no match, an error message is di ...

Display an alert in a React Native app using Native Base based on certain conditions

I am currently working on an alert component that utilizes a Native Base alert component function CustomAlert() { const { alert, setAlert } = useAuthContext(); const clearAlert = () => setAlert({ status: "", message: "" }); us ...

AngularJS Banner: Displaying Current Calendar Week and Increasing by 10 Days

I'm brand new to Angular and currently encountering some issues. Here's what I'm trying to create: I need to display the current Date: yyyy-MM-ss (Functional) I want to show the current Calendar Week: yyyy-Www (Not Working) When a butto ...

What is the most efficient way to update a large batch of documents in MongoDB?

I need to efficiently update a large number of documents (> 100,000). Initially, I attempted to do this on the JS level by writing scripts that fetch _ids first and then loop through them to invoke updates by _id (full docs or $set patches). However, ...

Disassociate all globally linked modules in npm network

If I want to display a list of all npm modules linked globally using npm link ..., I can execute the following command: npm ls -g --depth=0 --link=true But is there a way to remove or unlink all of these linked modules at once? With over 10 dependencies, ...

Providing access to information even in the absence of JavaScript functionality

Is it possible to make the content of a webpage using jQuery/JavaScript visible even when JavaScript is disabled? Currently, I have a setup where clicking on an h2 header will display information from div tags using the jQuery function. I've made sur ...

A regular expression in JavaScript for matching unpredictable numbers without any specific words preceding them

For instance, I am looking to extract the numbers that do not have 'the', 'abc', or 'he' before them; the89 (no match) thisis90 (match 90) iknow89999 (match 89999) getthe984754 (no match) abc58934(no match ...

employ the value of one array in a different array

Currently, I am working with an array (const second) that is being used in a select element to display numbers as dropdown options {option.target}. My question is: Is there a way to check within this map (that I'm using) if the 'target' from ...

What is the most efficient way to retrieve a substantial volume of data from Mongodb quickly, especially when the query results require processing before transmitting to the client?

My project involves a large Mongodb database paired with a React front-end and Node back-end, housing around 100000 documents. Indexing has been completed and Redis is already in use. The search feature implemented allows users to find relevant documents b ...