UNPKG

leaderboard-table

Version:

Simple leaderboard

github.com/Patryk-Rozwadowski/npm-leaderboard

Patryk-Rozwadowski/npm-leaderboard

73 lines (48 loc) • 2.84 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
# Leaderboard [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Patryk-Rozwadowski_npm-leaderboard&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=Patryk-Rozwadowski_npm-leaderboard) ##### Lightweight and easy to use leaderboard module. With this package you can create easy scoreboard for your products, users with ## Installation: ### NPM: `npm install leaderboard-table` ### YARN `yarn add leaderboard-table` ## Usage: Leaderboard will take size of its parent size (width and height). To be able use this package: 1. import leaderboard package: `import { Leaderboard } from "leaderboard-table";` 2. 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 |