1.1.0 • Published 2 years ago
leaderboard-table v1.1.0
Leaderboard 
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!
Demo: https://patryk-rozwadowski.github.io/npm-leaderboard-doc/
Installation:
NPM:
npm install leaderboard-table
YARN
yarn add leaderboard-table
CDN
https://unpkg.com/browse/leaderboard-table@[VERSION]/dist/leaderboard.min.css
https://unpkg.com/browse/leaderboard-table@[VERSION]/dist/leaderboard.min.js
CDN usage:
index.html:
<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>
Usage:
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>
CSS style classes
Containers
| 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 |
Typography
| 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 |
API
Properties
| 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
| 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
| Methods | Description |
|---|---|
| init() | Method for leaderboard initialization |