Lightweight, generic and easy to use leaderboard module. With this package you can create easy scoreboard for your products, users or for whatever you want!
npm install leaderboard-table
yarn add leaderboard-table
https://unpkg.com/browse/leaderboard-table@[VERSION]/dist/leaderboard.min.css
https://unpkg.com/browse/leaderboard-table@[VERSION]/dist/leaderboard.min.js
<link rel="stylesheet" href="https://unpkg.com/browse/leaderboard-table@1.0.3/dist/leaderboard.min.css">
<script src="https://unpkg.com/browse/leaderboard-table@1.0.3/dist/leaderboard.min.js"></script>
Leaderboard will take size of its parent size (width and height). To be use this package:
-
import leaderboard package:
import { Leaderboard } from "leaderboard-table"; -
import leaderboard styles:
import "leaderboard-table/dist/leaderboard.min.css"; -
Create root div element with class in your HTML file:
<div class="root"></div>
| Class | Description |
|---|---|
| .lb | Root container for leaderboard module |
| .lb_col | Column container |
| .lb_cell | Leaderboard's cell styles |
| .lb_cell_container | Container of leaderboard's cell |
| .lb_headers_container | Headers container |
| Class | Description |
|---|---|
| .lb_header_text_primary | Primary styles for headers |
| .lb_header_text_secondary | Secondary styles for subheaders |
| .lb_text_primary | Primary styles for text |
| .lb_text_secondary | Secondary styles for text |
| Leaderboard properties | Type | Default Value | Description |
|---|---|---|---|
rootContainer |
HTMLElement | - | Your root container for leaderboard. |
leaderboardData |
Object | - | Object with data which you want to put into Leaderboard |
options |
Object | - | Options object |
| Options | Type | Default Value | Description |
|---|---|---|---|
headerTags |
String | "h5" | Display the help window. |
logs |
boolean | false | Display the help window. |
contentForEmptyRows |
String | "" | Display the help window. |
| Methods | Description |
|---|---|
| init() | Method for leaderboard initialization |