leaderboard-table
Version:
93 lines (58 loc) • 3.53 kB
Markdown
# Leaderboard [](https://sonarcloud.io/summary/new_code?id=Patryk-Rozwadowski_npm-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:
1. import leaderboard package:
`import { Leaderboard } from "leaderboard-table";`
2. import leaderboard styles:
`import "leaderboard-table/dist/leaderboard.min.css";`
3. 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 |