From a05cc768fd1c181857dff617536739db0631b64e Mon Sep 17 00:00:00 2001
From: Jonny <littlebigjonny06@gmail.com>
Date: Fri, 3 May 2019 13:25:47 +0200
Subject: [PATCH] Fix a bug which resets the striping after the last element
 that has not been hidden

---
 js/components/StandingsTable.js | 8 ++++----
 js/utils/rangedmap.js           | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/js/components/StandingsTable.js b/js/components/StandingsTable.js
index ecdb6ce..ea461ee 100644
--- a/js/components/StandingsTable.js
+++ b/js/components/StandingsTable.js
@@ -36,7 +36,7 @@ export class StandingsTable extends React.Component {
             <Card className="shadow-sm">
                 <CardBody>
                     <h1 className="custom-font">Aktuelle Rangliste</h1>
-                    <Table striped className="mt-3 mb-0">
+                    <Table className="mt-3 mb-0">
                         <thead>
                             <tr>
                                 <th>#</th>
@@ -47,12 +47,12 @@ export class StandingsTable extends React.Component {
                         </thead>
                         <tbody>
                             { rangedmap(sortedPerformances, (team, index) => (
-                                <TeamRow key={index} teams={this.props.data.teams} teamToShow={team}/>
+                                <TeamRow className={(index % 2 === 0)? 'bg-light' : 'bg-white'} key={index} teams={this.props.data.teams} teamToShow={team}/>
                             ), 0, 3) }
                         </tbody>
                         <Collapse isOpen={ this.state.showFullTable } tag="tbody">
                             { rangedmap(sortedPerformances, (team, index) => (
-                                <TeamRow key={index} teams={this.props.data.teams} teamToShow={team}/>
+                                <TeamRow className={(index % 2 === 0)? 'bg-light' : 'bg-white'} key={index} teams={this.props.data.teams} teamToShow={team}/>
                             ), 3) }
                         </Collapse>
                         <tfoot>
@@ -80,7 +80,7 @@ class TeamRow extends React.Component {
 
     render() {
         return (
-            <tr>
+            <tr className={this.props.className}>
                 <td>{ this.props.teamToShow.rank }</td>
                 <td className="w-100">{findTeam(this.props.teams, this.props.teamToShow.team).name}</td>
                 <td className="text-center">{ this.props.teamToShow.winlossdifferential }</td>
diff --git a/js/utils/rangedmap.js b/js/utils/rangedmap.js
index 1373ebe..adedcb6 100644
--- a/js/utils/rangedmap.js
+++ b/js/utils/rangedmap.js
@@ -1,4 +1,4 @@
 
 export function rangedmap(arr, func, start, end) {
-    return arr.slice(start, end).map(func);
+    return arr.slice(start, end).map((element, index) => func(element, start + index));
 }