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

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", "[email protected]", "(353) 01 222 3333"],
    ["Mark", "[email protected]", "(01) 22 888 4444"],
    ["Eoin", "[email protected]", "0097 22 654 00033"],
    ["Sarah", "[email protected]", "+322 876 1233"],
    ["Afshin", "[email protected]", "(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", "[email protected]", "(353) 01 222 3333"],
    ["Mark", "[email protected]", "(01) 22 888 4444"],
    ["Eoin", "[email protected]", "0097 22 654 00033"],
    ["Sarah", "[email protected]", "+322 876 1233"],
    ["Afshin", "[email protected]", "(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;
}