Leaderboard npm package

Description

A simple, lightweight and generic leaderboard module created in vanilla javascript. You can create multiple leaderboards on one page and set different options for each. Visit the Github Page to see the module API.

NPM

npm install leaderboard-table

YARN

yarn add leaderboard-table

CDN JS

https://unpkg.com/browse/leaderboard-table@1.0.3/dist/leaderboard.min.js

CDN CSS

https://unpkg.com/browse/leaderboard-table@1.0.3/dist/leaderboard.min.css

Examples

Simple leaderboard

Simples leaderboard setup with default options.

Root field in Leaderboard class instance stands for your html container, which will hold Leaderboard module. LeaderboardData will hold and parse your data, which you want to show.

    const usersLeaderboardRoot = document.getElementById("users-leaderboard-root");

     const  usersScoreLeaderboard = new Leaderboard({
        usersLeaderboardRoot,
        [
            {
                        name: "Peter",
                        place: 2
            },
            {
                        name: "Bob",
                        place: 1
            }
        ]
    });

    usersLeaderboardRoot.init();

Leaderboard with options

Simples leaderboard setup with default options.

Root field in Leaderboard class instance stands for your html container, which will hold Leaderboard module. LeaderboardData will hold and parse your data, which you want to show.

    const usersLeaderboardRoot = document.getElementById("users-leaderboard-root");

    const options = {
            contentForEmptyCells: "EMPTY",
            sortByPlaces: true
        };

    const leaderboardData = [
        {
            name: "Peter",
            place: 1,
            email: "bob@coolmail.com"
        },
        {
            name: "Bob",
            place: 3,
            email: ""
        },
        {
            name: "Bob",
            place: 2,
            email: "nick@coolmail.com"
        },
        {
            name: "Bob",
            place: 4,
            email: ""
        }
    ];

    const usersScoreLeaderboard = new Leaderboard({
        usersLeaderboardRoot,
        leaderboardData,
        options
    });

    usersLeaderboardRoot.init();