5

I am using react table in react.I learn from here https://github.com/tannerlinsley/react-table/tree/v6#codesandbox-examples and from here https://www.npmjs.com/package/react-table

I want to show my rows alternate color "red" and "green" having a border of black on each cell.can we show in react table?

here is my code https://codesandbox.io/s/ecstatic-banzai-zp54o

enter image description here

user944513
  • 12,247
  • 49
  • 168
  • 318

1 Answers1

7

Set the background to green then using the nth-of-type selector you can target even rows and style their background red. You could also use odd to do this the other way around.

.rt-tr-group{
  background: green;
}
.rt-tr-group:nth-of-type(even){
  background: red;
}
<div class="rt-tbody" style="min-width: 200px;"><div class="rt-tr-group" role="rowgroup"><div class="rt-tr -odd" role="row"><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;">naveen</div><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;"><div><span class="number">14</span><br><span class="number">jgjg</span></div></div></div></div><div class="rt-tr-group" role="rowgroup"><div class="rt-tr -even" role="row"><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;">test</div><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;"><div><span class="number">18</span><br><span class="number">jggkhkg</span></div></div></div></div><div class="rt-tr-group" role="rowgroup"><div class="rt-tr -odd" role="row"><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;">naveen</div><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;"><div><span class="number">14</span><br><span class="number">jgjg</span></div></div></div></div><div class="rt-tr-group" role="rowgroup"><div class="rt-tr -even" role="row"><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;">test</div><div class="rt-td" role="gridcell" style="flex: 100 0 auto; width: 100px;"><div><span class="number">18</span><br><span class="number">jggkhkg</span></div></div></div></div></div>

updated sandbox https://codesandbox.io/s/bu45o?fontsize=14

Pixelomo
  • 6,373
  • 4
  • 47
  • 57