Pushing arrays using jexcel plugin to customize a subtitle editor

Question

Please be kind enough to let me know how I can push arrays using the jexcel plugin. https://bossanova.uk/jexcel/v3/

The push functionality must work in the exact same way as for arrays with 6 different colors as shown below.

Subtitles = orange, 
Captions = yellow,
Chapters = blue, 
Description = lime, 
Interaction purple, 
Metadata = pink

var data = [
["Subtitles"],
["Captions"],
["Chapters"], 
["Description"],
["Interaction"], 
["Metadata"], 
];

jexcel(document.getElementById('spreadsheet'), {
data:data,
columns: [
{ 
  type: 'hidden',
},

{
  title: 'Subtitles',
},

{
   title: 'Captions',
},

{
   title: 'Chapters',
},

{
   title: 'Description',
},

{
   title: 'Interaction',
},

{
   title: 'Metadata',
},
    ],
});

I tried using the following code but it does not work in the proper way.

titlesArray = ["Subtitles", "Captions", "Chapters", "Description", "Interaction", "Metadata"];
var colors = ["orange", "yellow", "blue", "lime", "purple", "pink"];

for(var index = 0; index < subtitles.length; index++) {
    var newArray = titlesArray.push("Subtitles", "Captions", "Chapters", "Description", 
"Interaction", "Metadata");
}

$('p').css('color', function(index) {
    return colors[index % colors.length];
});

The screenshot includes the way the colors should display for the respective titles but should happen for all 6 subtitles without changing the respective color.

I need the title French colored in blue and the title English colored in Orange which includes a font with a specific size as the two headings on top of the last two boxes shown on the very first row shown in the screenshot.

Answer 1

maybe i don't understand as you want. but i try give you an help

For your table, i suggest use JSON (object with property) to load data in jExcel.

var data = [
    {"Subtitles":"YourValue", "Captions":"YourValue", "Chapters":"YourValue", "Description":"YourValue", "Interaction":"YourValue", "Metadata":"YourValue"},
    /* ... */
]

For style, in jexcel options, you have an option updateTable (https://bossanova.uk/jexcel/v4/examples/table-scripting)

And on this function you can define dynamicaly style like

var colors = ["orange", "yellow", "blue", "lime", "purple", "pink"];
if(color[col]) {
   cell.style.backgroundColor = color[col];
}