Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
Here’s the API reference:
https://www.wix.com/velo/reference/wix-pricing-plans-backend/orders/cancelorder
I want to allow my customers to cancel their subscriptions by themselves.
Here’s an example from another user:
Possible security concerns with subscription handling in my Wix site?
@Letal1s just doesn’t share their backend module (probably for private reasons).
I’m simply a noob asking for help on how to let my members cancel their subscription with an onClick function.
X
I have tried t implement a method of persisted authentication following firebase online tutorial.
I wrote the following code:
const signIn = async () => {
await setPersistence(auth, browserLocalPersistence)
await signInWithPopup(auth, provider)
navigate(“/Account”)
}
where the imports are:
import { browserLocalPersistence, getAuth, GoogleAuthProvider , setPersistence, signInWithPopup} from “firebase/auth”
However everytime I refresh the application the it logs me out of the website. Does anybody know what the problem is
I tried following the tutorial attentively and I have made sure that setPersistence runs before signInWithPopup but it is just not working
In a parcel-bundled browser extension, I have set up my popup’s HTML to load a script tag with the attribute type="module", like so:
// popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<h1>My web extension</h1>
<script type="module" src="popup.js"></script>
<div id="app"></div>
</body>
</html>
// popup.js
import { setNameSpace, getTab } from "./helpers.js"
import { startStore } from "./store.js"
setNameSpace()
const store = startStore()
const state = await store.get()
As specified in the official documentation, this should allow use of the await keyword before async funcs at the top level:
Tip: You can use top level await by adding type="module" to the script tag.
…but popup.js still gives the error:
Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
I can get around this by wrapping in a self-invoking async function, but why is this extra workaround needed?
// popup.js
...
(async ()=> {
const store = startStore()
const state = await store.get()
})()
My package.json, for reference:
{
"name": "my-web-extension",
"version": "0.0.1",
"description": "My web extension",
"scripts": {
"watch:chrome": "parcel watch src/chrome/manifest.json --dist-dir dist-chrome --host localhost --config @parcel/config-webextension",
"build:chrome": "parcel build src/chrome/manifest.json --dist-dir dist-chrome --config @parcel/config-webextension",
"watch:firefox": "parcel watch src/firefox/manifest.json --dist-dir dist-firefox --host localhost --config @parcel/config-webextension",
"build:firefox": "parcel build src/firefox/manifest.json --dist-dir dist-firefox --config @parcel/config-webextension"
},
"devDependencies": {
"@parcel/config-webextension": "^2.10.3",
"parcel": "^2.10.3"
}
}
Could someone give me some direction?
i try to implement a Smooth Heatmap Appliction to display Sensor Data in real time and im not sure where to start.
Im not sure if i should try to use Unity, because i saw that u can make really clean Heatmaps with easy Shader implementation.
Could someone give me some direction? Should i just do it in Unity, or should i try it in VS Code, and if so: how can i get a smooth animation, right now i just have my array and the heatmap as a plotted figure with a cmap.
The heatmap animtation itself should look like: https://www.alanzucconi.com/wp-content/uploads/2015/06/heatmap4.gif
My first attempt was, too implement it via matplotlib in VS Code, but with that, i cant make smooth animations (guess i would need some shader implementation there aswell?).
Then i saw some people do some really clean heatmap applications in Unity, which had some really nice animations with the use of Shaders, but im not sure, if an Unity application is the right way, to write an non game related Dashboard.
I am building a web application with nextjs 14 in the client, nodejs/express in server, and firestore database. My application is working fine but i had no experience with firestore and now i have a complaint from firebase saying that i need to update my security rules, that i notice too late in my development and realize that i should use the firebase Oauth from the beginning but i didn’t I also wanted to make use of a hibrid aproach using some of next’s new features (app router) for my auth but still managing my apis in my node server so this was my approach
[…nextauth]/route.ts
import NextAuth from 'next-auth/next';
import GoogleProvider from 'next-auth/providers/google';
import { NextAuthOptions } from 'next-auth';
import { db } from '../../../../../firebase';
import { doc, setDoc, getDoc, serverTimestamp } from 'firebase/firestore';
const GOOGLE_CLIENT_ID = process.env.GOOGLE_CLIENT_ID!;
const GOOGLE_CLIENT_SECRET = process.env.GOOGLE_CLIENT_SECRET!;
const authOptions: NextAuthOptions = {
session: {
strategy: 'jwt',
},
providers: [
GoogleProvider({
clientId: GOOGLE_CLIENT_ID,
clientSecret: GOOGLE_CLIENT_SECRET,
}),
],
callbacks: {
async signIn({ user, account, profile }) {
if (!profile?.email) {
throw new Error('No profile');
}
const userData = {
name: profile.name || user.name,
email: profile.email,
bio: '',
wishlist: [],
eventsParticipated: [],
isActive: true,
hasCompletedProfile: false,
invitationStatus: 'pending',
privacySettings: {
showEmail: false,
showWishlist: true,
},
createdAt: serverTimestamp(),
updatedAt: serverTimestamp(),
};
const userRef = doc(db, 'users', profile.email);
try {
const userSnap = await getDoc(userRef);
if (!userSnap.exists()) {
await setDoc(userRef, userData);
} else {
await setDoc(userRef, userData, { merge: true });
}
} catch (error) {
console.error('Error updating user in Firestore', error);
throw new Error('Error updating user data');
}
return true;
},
},
};
export const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
i made a custom user model and create the firebase collection users in my db once a user login with google
Then the problem came when i tried to implement security rules to my db
the db doesn’t know about my next-auth google provider.
I tried to use the firestore adapter
//same code above plus @firebase-adapter and cert form firebase/app imports
const authOptions: NextAuthOptions = {
session: {
strategy: 'jwt',
},
providers: [
GoogleProvider({
clientId: GOOGLE_CLIENT_ID,
clientSecret: GOOGLE_CLIENT_SECRET,
}),
],
adapter: FirestoreAdapter({
credential: cert({
projectId: serviceAccount.project_id,
clientEmail: serviceAccount.client_email,
privateKey: serviceAccount.private_key!.replace(/\n/g, 'n'),
}),
}),
callbacks: {
async signIn({ user, account, profile }) {
if (!profile?.email) {
throw new Error('No profile');
}
//same code below
In my node server i was already using firestore-admin from the begining so i decide to share the same service-account.json like this
import serviceAccount from '../../../../../../server/service-account.json';
and when i tested i had the following error from google 
i tried also to eliminate the conflict removing the callback option but the error persist, it only works again if i remove the adapter, and now i only have 5 days left to update my security rules. can someone enlight me ? i have been researching about this issue 3 days now. (this is a personal project)
I was expecting that my database update with the session collection and the account collection and from there be able to update my security rules.
I have two tab controls: one to insert HTML text and the other to insert CSS text. Then I have a Preview to view the output (HTML + CSS). The problem is that in the preview I only display the HTML of the content, but I don’t also display the CSS of the content.
I am using this function in JavaScript:
function showPreview() {
var htmlContent = document.getElementById("editor").innerText;
var cssContent = "<style>" + document.getElementById("cssContent").value + "</style>";
var frame = document.getElementById("preview-window");
// var jsContent = "<scri" + "pt>" + document.getElementById("jsCode").value + "</scri" + "pt>";
// Create a data URL with the HTML content
var dataURL = "data:text/html;charset=utf-8," + encodeURIComponent(htmlContent + cssContent);
// Set the iframe src attribute to the data URL
frame.src = dataURL;
}
showPreview()
What am I doing wrong? How to solve?
Code Snippet
function showPreview() {
var htmlContent = document.getElementById("editor").innerText;
var cssContent = "<style>" + document.getElementById("cssContent").value + "</style>";
// var jsContent = "<scri" + "pt>" + document.getElementById("jsCode").value + "</scri" + "pt>";
var frame = document.getElementById("preview-window");
// Create a data URL with the HTML content
var dataURL = "data:text/html;charset=utf-8," + encodeURIComponent(htmlContent + cssContent);
// Set the iframe src attribute to the data URL
frame.src = dataURL;
}
showPreview()#editor,
#cssContent {
width: 456px;
height: 267px;
padding: 10px;
background-color: #d8d8d8;
color: rgb(0, 0, 0);
font-size: 14px;
font-family: monospace;
white-space: pre;
}<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">HTML</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">CSS</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div id="editor" contenteditable="true" oninput="showPreview();"><div>This is a Div</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div id="cssContent" contenteditable="true" oninput="showPreview()"><style> div { background-color: blue; color: white; } </style>
</div>
</div>
<h3>PREVIEW</h3>
<div class="preview-area">
<iframe id="preview-window"></iframe>
</div>
</div>I’m using API calls through JavaScript to check if a user is logged in or not, and replace the logout element in case the API returned an Ok response. However, the HTML document load first, and the API call takes time, which creates a delay, and even if the user is logged in, the login element will show up for half a second and then disappear
if you run the below code multiple times, you will see the login element show up for half a second. How do I fix this?
login_status();
function login_status() {
fetch("https://jsonplaceholder.typicode.com/todos/1", {
method: "GET",
}).then(function(response) {
if(response.ok) {
document.getElementById("login").style.visibility = "hidden";
document.getElementById("logout").style.visibility = "visible";
}
});
}
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact" id="login">Log In</a></li>
<li><a href="#contact" id="logout" hidden>Log out</a></li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
<div id="output">
</div>
</body>
</html>This is my first time building a Google Chrome Extension, so I am still learning and possibly doing something silly. Thank you for any help in advance.
Some background context:
Google Cloud Console IAM Admin page (https://console.cloud.google.com/iam-admin/) lists principles based on their project number. For example, a principle may be listed as [email protected], where 123456789012 is a project id. Obviously, 123456789012 isn’t very human readable, so I wanted to build a chrome extension that would create tooltips over strings containing the project id where the tooltip text would be the project name.
I created a background.js script. This script is used to toggle the chrome extension on / off.
let extensionEnabled = false; // Variable to track extension state
chrome.action.onClicked.addListener((tab) => {
extensionEnabled = !extensionEnabled; // Toggle extension state
// Save the state of extensionEnabled to storage
chrome.storage.local.set({ isEnabled: extensionEnabled });
// Update the extension icon to indicate the current state
const iconPath = extensionEnabled
? { '16': 'images/icon_enabled16.png', '48': 'images/icon_enabled48.png', '128': 'images/icon_enabled128.png' }
: { '16': 'images/icon16.png', '48': 'images/icon48.png', '128': 'images/icon128.png' };
chrome.action.setIcon({ path: iconPath });
});
I also created a contentScript.js file that contains the script logic.
const wordMap = {
// At present I am just hard-coding the project id number and project name
"123456789012": "project-name",
};
let extensionEnabled = false;
// Load the state from storage
chrome.storage.local.get('isEnabled', (result) => {
extensionEnabled = result.isEnabled || false;
if (extensionEnabled) processPage();
});
function processPage() {
// Create a new style element
const style = document.createElement('style');
// Set the CSS for tooltips
style.textContent = `
...
`;
// Append the style element to the head of the document
document.head.appendChild(style);
// Find occurrences of keys in wordMap in the text nodes of the document and put them in the textNodes array
const textNodes = [];
findTextNodes(document.body, textNodes);
// This creates tooltips for all nodes in the textNodes array
createTooltips(textNodes);
}
I’ve tested the logic on a test HTML document and processPage() works correctly on a simple static HTML document.
However, the extension wasn’t working properly when using it in Google cloud console. The textNodes array was never being populated with any nodes. I suspect it’s because in the Google console IAM page, they are populated / hydrated by the page’s JS scripts.
Upon googling, I found some tips online that this is because the extension runs in an isolated environment. I tried changing the world key in my Manifest to MAIN. However this causes an error in the extension: Uncaught TypeError: Cannot read properties of undefined (reading 'local') for the line chrome.storage.local.get('isEnabled', (result)
Here’s my manifest file:
{
"manifest_version": 3,
"name": "GCP Project ID Tooltip Chrome Extension",
"version": "0.1",
"description": "Chrome Extension that adds a tooltip with project names over project ID's in GCP console webpages.",
"action": {},
"permissions": [
"cookies",
"activeTab",
"storage",
"scripting"
],
"host_permissions": [
"https://console.cloud.google.com/*"
],
"optional_host_permissions":[
"https://*/*",
"http://*/*"
],
"background": {
"service_worker": "background.js",
"type": "module"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"contentScript.js"
],
"all_frames": true,
"world": "MAIN"
}
],
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
My few questions are:
"world": "MAIN" set for my use case? or is ISOLATED good enough?
Cannot read properties of undefined (reading 'local'), but then I am left with the textNodes array not being populated?host_permissions or optional_host_permissionscontent_scripts.matches? I suspect it’s https://console.cloud.google.com/, but I want to confirm.Thank you again for any insight!
How to implement facebook ads in Android studio
I want to know how to add Facebook ads from scratch, as I have no experience
I couldn’t find an easy way to explain this
I want a video explaining this in an easy way, or an explanation with pictures, or even written steps. The most important thing is that it be in a very simplified way so that I can apply the method correctly.
I need an Apps Script function that automatically converts function output in cells in Google sheets, into a static value (function -> text).
I am specifically looking for a function that monitors/acts upon an array of cells H2:AV250 or more….
It doesn’t matter if the function sets static values of 1 cell, 3 cells or a row of cells at a time – but it must only maximally convert 1 row at a time.
Conditions
Range:
The set.value function has to be executed by the completion of a function ((function creating an output) – automatically
Speed
The execution should be immediate (1-3 sec.)
(If converting a row or nearly a row 1-10 sec. is good)
All the functions in the range H2:AV250 are linked together using IF-functions, so they execute sequencially = h2-i2-j2-k2-l2…av2-h3-i3-j3-k3-l3…av3-h4… etc.
Functions waiting to be executed display “wait”, and should not be converted to static values:
Fix is = const skipStrings = [“wait”];
If you know of an app, google extension, program or any alternative that fixes this, that will be enough (I have searched for hours without finding anything…)
I cannot paste a spreadsheet link here since it contains OpenAI functions that can run me up a bill – but if you want a test-sheet from me – I will make one
——- ATTEMPTS
Here are a few examples of my approaches
OnEdit: These require edits by the ‘user’ of the sheet to fire and don’t work
OnChange: These work in principle but I run into the following problems;
Function 1)
I made a standard OnChange function that surveys the cell range H2:AV250, for any function completion
convert the completed functions into static values, but for some reason the last 5-8 functions,
would display “#ERROR!”, even though, they had completed their execution and had a different output
before the convertion to static values.
Function 2)
I then tried making the OnChange function survey the column AV for the output “Ready”
The functions in column AV outputs “Ready” when the function in, for example, AU2, has completed
Upon the output of “Ready” in the column AV, the OnChange function should convert the corresponding row of the cell, of where the output “Ready” was made, into static values
=
This approach worked but stalled the OnChange function for up to 4 minutes before executing.
Functions:
Function 1)
(https://i.stack.imgur.com/fQAbV.png)
function onChange(e) {
if (e.changeType !== 'EDIT') return;
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const range = sheet.getRange("H2:AV300");
const formulas = range.getFormulas();
const values = range.getValues();
for (let row = 0; row < formulas.length; row++) {
for (let col = 0; col < formulas[row].length; col++) {
// Add a condition to exclude cells containing "wait" and "Processing"
if (values[row][col] !== "wait" && values[row][col] !== "Processing") {
if (formulas[row][col]) {
range.getCell(row + 1, col + 1).setValue(values[row][col]);
}
}
}
}
}
Function 2)
function setupProperties() {
const sheet = SpreadsheetApp.getActive().getActiveSheet();
const lastRow = sheet.getLastRow();
let properties = {};
for (let row = 1; row <= lastRow; row++) {
let cellValue = sheet.getRange('AV' + row).getValue();
properties['AV' + row] = cellValue || '';
}
PropertiesService.getScriptProperties().setProperties(properties);
}
function onChange(e) {
if (e.changeType !== 'EDIT') return;
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const lastRow = sheet.getLastRow();
const scriptProps = PropertiesService.getScriptProperties();
for (let row = 1; row <= lastRow; row++) {
let cellAddress = 'AV' + row;
let currentValue = sheet.getRange(cellAddress).getValue();
let storedValue = scriptProps.getProperty(cellAddress);
if (currentValue !== storedValue) {
scriptProps.setProperty(cellAddress, currentValue || '');
if (currentValue === 'Ready') {
convertRangeToStatic(sheet, row);
sheet.getRange(row, 49).setValue('Ready'); // Column 49 is AW
}
}
}
}
function convertRangeToStatic(sheet, row) {
const range = sheet.getRange(row, 8, 1, 41); // Range from H:AV
range.setValues(range.getDisplayValues());
}
I am having problems getting the below code to go into the catch block on error,
try {
this.doSomething();
} catch (error) {
console.error(error);
}
if “doSomething” returns a promise / runs asynchronous code.
doSomething() {
return new Promise<void>((resolve, reject) => {
this.MySubscription = this.myService.fetchUserDataFromDB().subscribe({
next: (val: any) => {
this.userData = val
resolve()
}, error: (error) => {
let uiErrorMsg = 'Failed to fetch user data';
let consoleErrorMsg = 'Error occurred when calling backend API fetchUserDataFromDB';
if (error instanceof HttpErrorResponse) {
consoleErrorMsg += ` | Status: ${error.status} ${error.statusText} | URL: ${error.url}`;
}
const consoleError = new Error(consoleErrorMsg);
if(error?.status != 401) {
const data = [{ title: 'Alert', message: [uiErrorMsg] }, { okButtonTitle: 'Close' }]
let dialogRef: any = this.dialog.open(ConfirmationModalComponent, {data});
// await firstValueFrom(dialogRef.afterClosed())
}
reject(consoleError);
}
})
})
}
Some places I need to call this.doSomething() not caring exactly when it finishes, other places I do care, and in those cases put the word await in front when I want the code to wait until it finishes before it proceeds to the next line.
await this.doSomething();
There is apparently a way to catch the errors of a promise without awaiting for it, but it’s in a different syntax:
this.doSomething().catch(error => {
console.error(error);
});
So where I need to wait for it to finish I use try/catch with “await” as one would expect, but when I don’t care when it finishes I am needing to call it with “.catch()” instead of try/catch to catch the errors.
Is there any plan to allow marking a try block as async, so that we can keep try/catch syntax in both scenarios, so we don’t need two different syntaxes and can be more consistent with other programming languages where try/catches reliably go in the catch blocks when they are expected to?
Such as something like
try async {
this.doSomething()
} catch (error) {
console.error(error)
}
and
try {
await this.doSomething()
} catch (error) {
console.error(error)
}
respectively?
Luckily the purpose of my try catch was simply to handle printing of error messages in a visually pleasing manner. But I can imagine this causing a lot of frustration for someone who was relying on their catch block being entered regardless of whether they called their function with “await” or not.
Is there a way to make a try/catch asynchronous or do we need to maintain both .catch() syntax and try/catch syntax?
(I am using typescript 4.9.5, rxjs 7.8.1)
I have a very simple problem that I can’t solve. Se screenshot below and the related error. I’m trying to access the parameters in metadata but I get and uncaught type error because i’m referencing it incorrectly. How do I reference jobName inside of metadata?
Using Nodejs and image-downloader. I am trying to run a compiler function at the end after all the images have downloaded. The imageDownload function gets triggered multiple times. The console.log(‘Saved to’, filename); runs way after everything.
import {image} from ‘image-downloader’;
await imageDownload (‘https://syntheticnews.com/wp-content/uploads/2023/12/Kodiak_Defense_1-1024×683.jpg’);
export async function imageDownload (url) {
var options={
url: url,
dest: `../../testimage.jpg`,
};
image(options)
.then(({ filename }) => {
console.log('Saved to', filename);
})
.catch((err) => console.error(err));
}
console.log ("This will be the next function and should run after the save to filename log");
The await on the function call just seems to await the running of the code not the downloading of the file. I really need an await on the .then statement but that doesn’t work :). Is there a better way than watching the folder and await the files expected?
I have this droppable AJAX code which works fine like this. Note the specific values in the data line (1227 and 46.0), which I only did for testing purposes:
$( function() {
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function( event, ui ) {
var playerid = ui.draggable[0].getAttribute("data-playerid");
var value = jQuery(this).data('value');
console.log(playerid);
console.log(value);
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$.ajax({
type: "POST",
url: "ajax-update-value.php",
data: { data : 1227, data2: 46.0 },
success: function(result) {
// do something with the result of the AJAX call here
alert(result);
}
});
}
});
});
What I WANT to do is use the actual variables that were set in the drop function towards the top but when I change it so variables are there instead of actual values (only change is in the data line), the console gives a POST error (500 internal server error):
$( function() {
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function( event, ui ) {
var playerid = ui.draggable[0].getAttribute("data-playerid");
var value = jQuery(this).data('value');
console.log(playerid);
console.log(value);
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$.ajax({
type: "POST",
url: "ajax-update-value.php",
data: { data : playerid, data2: value},
success: function(result) {
// do something with the result of the AJAX call here
alert(result);
}
});
}
});
});
FWIW, here is how I’m processing those two pieces of data in the PHP file. I only have print_r($_POST) for testing purposes:
$playerid=$_POST['data'];
$value=$_POST['data2'];
$stmt = $pdo->prepare("UPDATE players SET value=:value WHERE playerid=:playerid");
$stmt->execute([':value' => $value, ':playerid' => $playerid]);
print_r($_POST);
I have difficulties to align the first line of a double-line header in ag-grid. The grid is configured as:
<ag-grid-angular
id="data_grid"
class="ag-theme-alpine ag-theme-material ag-center-aligned-header"
style="width: 2800px; height: 800px; margin-right: 1%; float: left; font-size: 16px !important"
(gridReady)="onDailyGridReady($event)"
[rowData]="row_data"
[columnDefs]="column_defs"
[gridOptions]="grid_options">
</ag-grid-angular>
Then in the ts file:
column_defs = [
{
headerName: 'A',
'headerClass': "ag-right-aligned-header",
children: [
{ headerName: 'A1', field, 'A1', ..., 'headerClass': "ag-right-aligned-header", 'cellClass': 'ag-right-aligned-cell'
},
...
]
},
{
headerName: 'B',
'headerClass': "ag-center-aligned-header",
children: [
...
]
}
]
The problem I am having is the alignment I put in for the first line header (‘A’, ‘B’) does not work. The first line always aligned to left. What am I missing?