The component is designed to display a leaderboard table based on a Metabase report. It is commonly used to show rankings, user avatars, names, and metric values in a customizable and visually appealing way.
The component supports conditional styling, custom slots for each column, and interactive elements such as position change indicators. It is ideal for displaying top performers, competition results, or any ranked list within your application.
Usage Example:
<ui-leader-board
id="lb1"
:board-id="514"
:items="['position', 'accountAvatar', 'accountTitle', 'value']"
:item-titles="{
position: 'Rank',
accountAvatar: 'Photo',
accountTitle: 'Name',
value: 'Value',
}"
:avatar-size="60"
:show-position-change="true"
:colors="{
fields: [
['vmlb.position', '<', crown="crown" user="user" pages="pages" top-middle="top-middle" you="you" red="red" white="white" bottom-middle="bottom-middle" 5px="5px">| props | default | type | description |
| boardId | — | number | Metabase report ID for the leaderboard. Must be provided by the support team. |
| id | undefined | string | Unique component identifier. |
| items | ['position', 'accountAvatar', 'accountTitle'] | string[] | List of columns to display. Available values: position, accountAvatar, accountTitle, accountId, value. |
| itemTitles | undefined | Record<string, string> | Custom column headers. Key is the column name, value is the displayed header. |
| avatarSize | 60 | number | Avatar size in pixels. Top 3 avatars are automatically enlarged by 1.5x. |
| showPositionChange | true | boolean | Whether to show position change indicators (up/down arrows). |
| colors | undefined | ColorRules | Conditional row styling rules. |
Slots:
<template #position="{ item, p, r }">
<div>#{{ p('vmlb.position') }}</div>
</template>
<template #accountAvatar="{ item, r, p }">
<img :src="r('vmlb.accountAvatar')" />
</template>
<template #accountTitle="{ item, r, p }">
<div>{{ p('vmlb.accountTitle') }}</div>
</template>
<template #value="{ item, p }">
<div>{{ p('vmlb.value') }} pts</div>
</template>Data Properties (vmlb prefix):
vmlb.position // Current position
vmlb.positionPrevious // Previous position
vmlb.accountId // Account ID
vmlb.accountAvatar // Avatar URL
vmlb.accountTitle // Participant name/title
vmlb.value // Metric value
Note: The table displays all records without pagination. The maximum number of records is 500. Top 3 positions automatically receive enlarged avatars (1.5x).