webdevpuneet.com

Related Snippets

85 in Tables category
1–6 of 60

SortableJS Sortable Table Rows with Live Ranking and Undo

Accessible Tree Table with Expandable Nested Rows

Virtualized 100,000-Row Table in Vanilla JavaScript

Grid.js Lightweight Searchable Table with Row Details

Tabulator Grouped Rows with Aggregates

Tabulator Editable Cells with Validation and Undo

Leaderboard Table — Free HTML CSS JS Snippet

Leaderboard Table · Tables · Plain HTML, CSS & JS · Live preview

CategoryTables
TagsData Tables

Copy & paste

Source Code

<div class="wrap">
  <div class="lb-head">
    <h2 class="lb-title">Top Performers</h2>
    <div class="period-tabs">
      <button class="period active" onclick="setPeriod(this,'week')">Week</button>
      <button class="period" onclick="setPeriod(this,'month')">Month</button>
      <button class="period" onclick="setPeriod(this,'all')">All time</button>
    </div>
  </div>

  <div class="table-scroll">
    <table class="table">
      <thead>
        <tr>
          <th class="rank-col">Rank</th>
          <th>User</th>
          <th class="hide-sm">Streak</th>
          <th>Score</th>
          <th class="bar-col">Progress</th>
          <th class="change-col">Change</th>
        </tr>
      </thead>
      <tbody id="lb-body">
        <tr class="row top1">
          <td><div class="rank medal gold">1</div></td>
          <td><div class="user"><div class="av" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">KW</div><div class="user-info"><span class="uname">Kim Walsh</span><span class="urole">Senior Dev</span></div></div></td>
          <td class="hide-sm"><span class="streak">🔥 14d</span></td>
          <td class="score">9,840</td>
          <td class="bar-col"><div class="bar-track"><div class="bar-fill" style="width:98%;background:linear-gradient(90deg,#f59e0b,#f97316)"></div></div></td>
          <td><span class="change up">+2</span></td>
        </tr>
        <tr class="row top2">
          <td><div class="rank medal silver">2</div></td>
          <td><div class="user"><div class="av" style="background:linear-gradient(135deg,#94a3b8,#64748b)">AJ</div><div class="user-info"><span class="uname">Alex J.</span><span class="urole">Full-Stack</span></div></div></td>
          <td class="hide-sm"><span class="streak">🔥 9d</span></td>
          <td class="score">9,210</td>
          <td class="bar-col"><div class="bar-track"><div class="bar-fill" style="width:91%;background:linear-gradient(90deg,#94a3b8,#64748b)"></div></div></td>
          <td><span class="change same">–</span></td>
        </tr>
        <tr class="row top3">
          <td><div class="rank medal bronze">3</div></td>
          <td><div class="user"><div class="av" style="background:linear-gradient(135deg,#b45309,#d97706)">SM</div><div class="user-info"><span class="uname">Sara M.</span><span class="urole">Designer</span></div></div></td>
          <td class="hide-sm"><span class="streak">🔥 7d</span></td>
          <td class="score">8,760</td>
          <td class="bar-col"><div class="bar-track"><div class="bar-fill" style="width:87%;background:linear-gradient(90deg,#b45309,#d97706)"></div></div></td>
          <td><span class="change up">+1</span></td>
        </tr>
        <tr class="row">
          <td><div class="rank">4</div></td>
          <td><div class="user"><div class="av" style="background:linear-gradient(135deg,#6366f1,#a78bfa)">RP</div><div class="user-info"><span class="uname">Raj P.</span><span class="urole">Backend</span></div></div></td>
          <td class="hide-sm"><span class="streak">🔥 5d</span></td>
          <td class="score">7,920</td>
          <td class="bar-col"><div class="bar-track"><div class="bar-fill" style="width:78%;background:#6366f1"></div></div></td>
          <td><span class="change down">-2</span></td>
        </tr>
        <tr class="row">
          <td><div class="rank">5</div></td>
          <td><div class="user"><div class="av" style="background:linear-gradient(135deg,#10b981,#0ea5e9)">MK</div><div class="user-info"><span class="uname">Maya K.</span><span class="urole">DevOps</span></div></div></td>
          <td class="hide-sm"><span class="streak">🔥 3d</span></td>
          <td class="score">6,540</td>
          <td class="bar-col"><div class="bar-track"><div class="bar-fill" style="width:65%;background:#10b981"></div></div></td>
          <td><span class="change up">+4</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Gold/silver/bronze gradient medal badges with colour-matched box-shadow glow
Top-3 row tint: subtle rgba background on medal rows for visual separation
Progress bars as percentage of top score with per-user gradient colours
Rank change indicators: up (green +N), down (red -N), same (grey –)
Period tab switcher with pill active state (white on grey container)
Score column: font-feature-settings "tnum" tabular numbers for column alignment
Streak counter column with fire emoji and day count
Avatar gradient initials with name and role sub-label in flex column
Responsive: .hide-sm hides streak column on narrow screens

About this UI Snippet

Leaderboard Table — Medal Ranks, Progress Bars, Streak Counter & Period Tab Switcher

Screenshot of the Leaderboard Table snippet rendered live

A leaderboard table ranks users, teams, or entities by a score metric — displaying position, identity, score, relative progress, and rank movement. Leaderboards are used in learning platforms, gamified apps, sales dashboards, fitness trackers, and developer community sites to drive engagement and competition. This snippet provides a complete leaderboard table with gradient medal badges, avatar initials, streak counters, score display, progress bars relative to the top score, rank change indicators, and a period tab switcher.

Medal rank badges

Ranks 1–3 use gradient medal badges: gold (amber → orange), silver (slate → grey), bronze (dark amber). Each uses background: linear-gradient with a matching box-shadow glow in the same colour. Ranks 4+ use a neutral grey background. The medal div is a fixed 28×28px square with border-radius: 8px for a rounded square shape — different from the circular avatar to maintain visual separation.

Progress bars relative to top score

Each row's progress bar width is set as a percentage of the top score (not 100%). Row 1 gets 98% (not 100% to avoid exact full-fill), row 2 gets 91%, and so on. Each bar uses a unique gradient matching the medal or avatar colour — creating colour-coded rows without repeating colours, the same fill technique as the standalone progress bar snippet. The bar transition: width 0.6s ease animates on the period tab switch.

Rank change indicators

The .change span shows +N (green), -N (red), or – (grey) for rank movement since the previous period. These use the same tinted background pattern as status badges elsewhere in the library.

Period tab switcher

Three tabs (Week, Month, All time) switch the data period. The active tab gets a white background on the grey tab container — the standard pill-style tab switcher pattern. In production, the tab click triggers an API fetch for the selected period and re-renders the table.

Score display

Scores use font-feature-settings: "tnum" (tabular numbers) so digits align vertically — a critical detail for numerical columns where values need to be visually compared across rows. Without tabular numbers, proportional digit widths cause misalignment in number columns.

Streak counter

A fire emoji + day count (🔥 14d) communicates daily engagement streaks. This is a lightweight gamification signal that is increasingly standard on learning and fitness platforms.

Step by step

How to Use

  1. 1
    Click the period tabs to see the bar animationClick Week, Month, or All time to trigger the bar width animation (bars drop to 0 then refill). In production, wire each tab to an API fetch that returns the ranked data for that period.
  2. 2
    Update user dataIn the HTML tbody, edit each row: change avatar initials, gradient colours, name, role, streak count, score, bar fill width percentage, and change indicator class (up/down/same) and value.
  3. 3
    Add or remove rowsDuplicate any table row pair in the tbody. Update the data-values and assign .top1/.top2/.top3 class only to the first three rows. Remove those classes from all others — the medal gradient and subtle row tint apply automatically.
  4. 4
    Calculate bar widthsSet each bar width as (score / topScore) * 100 + "%". Round to the nearest integer. The top scorer gets ~98% (not 100%) so the bar does not look artificially maxed out.
  5. 5
    Change the score label and period tabsUpdate the th "Score" header to your metric (Points, Revenue, Commits, Completions). Edit the three period button labels to match your time period options (Day/Week/Month, Sprint/Quarter/Year, etc.).
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component mapping a sorted data array to rows, or "Tailwind" for a React + Tailwind CSS version.

Real-world uses

Common Use Cases

Learning platform and course completion leaderboards
Course completion percentage, quiz scores, and XP points make excellent leaderboard metrics. The streak counter (🔥 14d) is a standard gamification element on learning platforms like Duolingo and Codecademy — pair it with the streak tracker widget to reward daily engagement habit formation.
Sales team performance and quota attainment rankings
Revenue closed, deals won, and pipeline value are natural leaderboard metrics for sales teams. The progress bar relative to the top performer communicates distance to the leader at a glance — top it with stats cards for team totals. Period tabs switch between weekly sprint and monthly quota tracking.
Developer contribution and commit leaderboards on team dashboards
Commits, pull requests, code review comments, and issues closed map directly to the score column. Wire to your GitHub or GitLab API to show real contribution data per team member for the selected period.
Gaming and community platform high score tables
The medal badge and gradient progress bar are visually engaging for game high score tables. The rank change indicator (+2, -1) adds competitive context between play sessions. Show top 10 or top 50 with a "Your rank: #23" sticky footer row for the current user.
Study tabular numbers and rank badge CSS techniques
font-feature-settings: "tnum" enables OpenType tabular number figures — a typographic detail essential for numerical columns. The medal gradient badges show how a single div with linear-gradient background and box-shadow creates a dimensional badge effect.
Fitness challenge and step-count leaderboards
Step counts, calories burned, workout minutes, and active days make excellent fitness leaderboard metrics. The streak counter and progress bar communicate daily habit data at a glance. Period tabs toggle between weekly and monthly challenge views.
Related: Table Inline Cell Validation
See the Table Inline Cell Validation for a related tables pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Divide each user's score by the top score and multiply by 100: const width = Math.round((score / topScore) * 100). Set this as the bar width percentage. Cap the top scorer at 98% (not 100%) so the bar does not appear artificially maxed: const width = Math.min(98, Math.round(score/topScore*100)). In a JavaScript-rendered table, compute this in the data mapping: rows.map((r,i) => ({...r, barWidth: Math.min(98, Math.round(r.score/rows[0].score*100))})).

Call your API on period tab click: fetch("/api/leaderboard?period=week").then(r=>r.json()).then(data => renderTable(data)). In renderTable, generate the table rows from the sorted data array: data.forEach((user, i) => { const rank = i+1; const tr = document.createElement("tr"); tr.innerHTML = ...; tbody.appendChild(tr); }). Clear the tbody before each render to prevent duplicate rows.

Compare each row's user ID to the current user ID: if (row.userId === currentUserId) { tr.classList.add("current-user"); }. In the CSS: .current-user td { background: rgba(99,102,241,0.05); } and .current-user .uname { color: #6366f1; font-weight: 800; }. Optionally add a "(You)" label after the name for unambiguous identification.

Click "JSX" to download. Accept a data prop: an array of {rank, name, role, score, streak, change, barWidth} objects sorted by score descending. Use useMemo to compute barWidth from scores. Manage activePeriod in useState. On period change, fetch new data and update the data state. Animate bars by setting a key on the table body that changes on data update, triggering a re-mount and re-animation.