Is it possible to specify tr styles in Grid.js? - css

Question

New to Grid.js, and by no means a css Expert.
I am trying to style alternate rows, which seems like a common use case that should be simple enough to implement, but I can't seem to get to 1st base.
It appears that I can not even apply a simple style to tr elements. There is no indication in the docs that tr styles are supported, either by using literals or style classNames.
columns: ["Name", "Email", "Phone Number"],
data: [
["John", "john#example.com", "(353) 01 222 3333"],
["Mark", "mark#gmail.com", "(01) 22 888 4444"],
["Eoin", "eoin#gmail.com", "0097 22 654 00033"],
["Sarah", "sarahcdd#gmail.com", "[phone]"],
["Afshin", "afshin#mail.com", "(353) 22 87 8356"]
],
style: {
tr: {
'background-color': '#69c'
}
}
}).render(document.getElementById("wrapper"));
And if I can't get a simple style to work, there's no hope of getting this to work:
tr:nth-child(even) {
background-color: Lightgreen;
}

Answer 1

Turns out, styling alternating rows is not that hard. This sample helped:
https://codesandbox.io/s/gridjs-bpf9g?file=/src/styles.css:0-57
It's not necessary to include style: class. The css tr selector works by itself.
new gridjs.Grid({
columns: ["Name", "Email", "Phone Number"],
data: [
["John", "john#example.com", "(353) 01 222 3333"],
["Mark", "mark#gmail.com", "(01) 22 888 4444"],
["Eoin", "eoin#gmail.com", "0097 22 654 00033"],
["Sarah", "sarahcdd#gmail.com", "[phone]"],
["Afshin", "afshin#mail.com", "(353) 22 87 8356"]
]
}).render(document.getElementById("wrapper"));
/* styles.css */
tr:nth-of-type(even) td {
background: #fff;
}
tr:nth-of-type(odd) td {
background: #fea;
}