Leader Board

Menampilkan Table / List yang di desain untuk sebuah urutan ranking.

Contoh hasilnya seperti ini:

Contoh penulisan attribute nya seperti ini:

{
  "options": {
      "data": {
        "dynamicCard": [
          {
            "type": "leaderboard",
            "cardId": "_widget_user_top_activity_",
            "cardTitle": "Most Active Users",
            "cardTitlePrefix": "🎉",
            "cardTitleSuffix": "!",
            "cardSubTitle": "Top 10 Active Users in The last 1 Month",
            "cardImage": "illustration",
            "hideRankNumber": false,
            "hideFirstBadge": false,
            "ribbonStyle": {},
            "rankNumberStyle": {},
            "cardTitleStyle": {
              "fontSize": "1.3rem"
            },
            "cardSubTitleStyle": {
              "fontSize": "0.8rem"
            },
            "cardTheme": "style1",
            "cardStyle": {
              "borderTopLeftRadius": "0.428rem",
              "borderTopRightRadius": "0.428rem",
              "backgroundColor": "rgba(115, 103, 240, .1)"
            },
            "size": 4,
            "dataFrom": {
              "api": "http://localhost:5001/api/asxxcvcv/top",
              "resp_key": "data",
              "api_getAlways": false,
              "fieldNames": {
                "title": "name",
                "counter": "count",
                "avatar": "avatar"
              }
            }
          }
        ]
      }
    }
}

Keterangan Properti:

Property	Type	Required	Description	Default
fieldNames	object		Object untuk menampung nama kunci dari respon data: - title : tentukan nama kunci yang akan ditampilkan sebagai judul pada list. Jika tidak di set, maka secara default akan mencari kunci dengan nama "title". - counter: tentukan nama kunci yang akan ditampilkan sebagai count/value di sebelah kanan pada list. Jika tidak di set, maka secara default akan mencari kunci dengan nama "count". - avatar: tentukan nama kunci yang akan ditampilkan sebagai gambar avatar di samping judul. (value harus berupa path url gambar) -subtitle: tentukan nama kunci yang akan ditampilkan sebagai gambar deskripsi/subtitle di bawah judul.
dataFrom	string			null
hideRankNumber	boolean		Jika di set ke true, maka nomor urutan tidak akan dimunculkan.	false
hideFirstBadge	boolean		Jika di set ke true, maka gambar icon (medali) untuk posisi pertama tidak akan dimunculkan.	false
ribbonStyle	object		Untuk mengeset style pada ribbon (blok kotak urutan pertama). Penulisan object style harus dengan gaya reactJs.	{}
rankNumberStyle	object		Untuk mengeset style pada ribbon (blok kotak urutan pertama). Penulisan object style harus dengan gaya reactJs.	{

See Live Examples at https://sabaframework.web.app/dyn_pages/playground/dataOther20