Sortable & Expandable Football League Table In JavaScript – soccer.js

soccer.js is a JavaScript library that helps you dynamically generate a sortable, expandable, responsive football league table using plain JavaScript.

How to use it:

1. Load the necessary JavaScript and CSS files in the document.

<link rel="stylesheet" href="dist/styles/soccer.min.css" />
<script src="dist/scripts/soccer.min.js"></script>

2. Create an empty container to hold the football league table.

<div class="league-table"></div>

3. Add teams to the league table.

soccer.addTeam(['Team 1', 'Team 2', 'Team 3', ...);

4. Specify the stats for each team.

• played
• won
• drawn
• lost
• scored
• conceded
• goalDiff
• points
• position – represents league position

soccer.updateTeam([{
  name: 'Team 1',
  played: 10,
  won: 3,
  drawn: 1,
  lost: 6,
  scored: 21,
  conceded: 24,
  points: 10
},{
  name: 'Team 2',
  played: 10,
  won: 2,
  drawn: 2,
  lost: 6,
  scored: 15,
  conceded: 20,
  points: 6
  },
{
  name: 'Team 3',
  played: 11,
  won: 10,
  drawn: 1,
  lost: 0,
  scored: 28,
  conceded: 6,
  points: 31
}]);

5. Render a football league table on the webpage and auto-sort and sort the teams.

soccer.renderLeague({
  leagueName: 'CSSScript League'
});

6. Collapse teams from a specific place and display a toggle button at the bottom of the league table.

soccer.renderLeague({
  leagueName: 'CSSScript League',
  dropdown: 5
});

7. Set a promotion and relegation zone.

soccer.renderLeague({
  leagueName: 'CSSScript League',
  zones: [1, 8]
});

8. Resort the league table manually.

soccer.sort();

9. Swap teams.

soccer.override([1, 2]);

10. Remove a team from the league table.

soccer.deleteTeam('Team 2');