react-group-table

A simple React component that can be used to display football league tables. It was written with small tables (i.e. 4 team World Cup groups) in mind, but you can use it for as many teams as you like.

Usage

If you want to include this component in your React app, install from npm with

npm i --save react-group-table

Import wherever you want to use it with

import GroupTable from 'react-group-table'

This gives you a standard React component:

<GroupTable {...this.props}>

Props

react-group-table has some mandatory props and some optional props.

Prop Name	Prop Type	Required	Default	Usage
cutOffPositions	Array of numbers	❎	[2]	Adds a dashed border under any position in this array to indicate cut off positions, e.g. between qualifying and non-qualifying positions. Not zero indexed so if you want a cut off position after the second and fourth team, the array will be [2,4]
dangerZonePositions	Array of numbers	❎	[3,4]	These positions will be shaded red to indicate non-qualifying/relegation positions
groupName	String	❎		Group name to be displayed above team names
qualificationPositions	Array of numbers	❎	[1,2]	These positions will be shaded green to indicate qualification positions (or similar)
pointsForWin	number	❎	3	In case you want to render old tables from the days of 2 points for a win, or some dystopian future with 7 points for a win or something
showGoalsConceded	bool	❎	true	Display the goals conceded column
showGoalsScored	bool	❎	true	Display the goals scored column
showPositions	bool	❎	true	Display the league position column
teams	Array of object (see below)	✅		List of teams and their stats for the group table

The 'teams' array

The most important prop is an array of team objects. There can be as many teams as you want, but each can have the following properties (note some are mandatory):

{
  gamesDrawn: number.isRequired,
  gamesLost: number.isRequired,
  gamesPlayed: number,
  gamesWon: number.isRequired,
  goalDifference: number,
  goalsConceded: number.isRequired,
  goalsScored: number.isRequired,
  points: number,
  teamName: string.isRequired
}

With all columns shown, group name supplied, default qualification and danger zone positions

With only mandatory columns shown, no group name, default qualification and danger zone positions

Test Harness

If you want to fork this repo and make changes or just clone it to play about with, it also comes with a 'Reduxified' test harness. Run

npm start

to serve the component - access it at

localhost:8080

in your browser. Hot reloading is enabled so you can make changes on the fly. Although not used for this simple example (other than the initial state), there is a redux directory with an example reducer (test/tools/redux/group/increment.js). If you are familiar with Redux and wish to make use of this in development then you can simply add new actions (to test/tools/redux/group/actions.js) and new reducers. The component is rendered in test/tools/containers/Harness.js and test/tools/components/Harness.js.