Extended to 25 and added some numbering

src/components/LookUp.vue

···
 const userHandle = ref("");
 const loading = ref(false);
 const artists = ref<{ name: string; plays: number }[]>([]);
-const tracks = ref<{ name: string; plays: number }[]>([]);
+const tracks = ref<{ name: string; artist: string; plays: number }[]>([]);
 const totalSongs = ref(0);
+
+const formatNumber = (n: number) => n.toLocaleString();
 
 const lookup = async () => {
     loading.value = true;
···
                 ) {
                     continue;
                 }
-                // new version
-
+                // new version of lexicon
                 if (play.value?.artists) {
                     for (const artist of play.value?.artists) {
                         let alreadyPlayed = inner_artists.find(
···
                         }
                     }
                 } else if (play.value?.artistNames) {
-                    // old version
+                    // old version of lexicon
                     for (const arist of play.value?.artistNames) {
                         let alreadyPlayed = inner_artists.find(
                             (a) => a.name === arist,
···
             // update reactive values incrementally (top 10)
             artists.value = inner_artists
                 .sort((a, b) => b.plays - a.plays)
-                .slice(0, 10);
+                .slice(0, 25);
             tracks.value = inner_tracks
                 .sort((a, b) => b.plays - a.plays)
-                .slice(0, 10);
+                .slice(0, 25);
             totalSongs.value = totalCount;
 
             cursor = response.data.cursor;
···
             ></span>
             <div v-if="tracks.length > 0" class="mt-8">
                 <h2 class="text-2xl font-bold mb-4">
-                    Top Songs out of {{ totalSongs }}
+                    Top Songs out of {{ formatNumber(totalSongs) }}
                 </h2>
                 <div class="overflow-x-auto">
                     <table class="table w-full">
                         <thead>
                             <tr>
+                                <th>Rank</th>
                                 <th>Plays</th>
                                 <th>Song</th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr v-for="track in tracks" :key="track.name">
-                                <td>{{ track.plays }}</td>
+                            <tr v-for="(track, idx) in tracks" :key="track.name">
+                                <td>{{ idx + 1 }}.</td>
+                                <td>{{ formatNumber(track.plays) }}</td>
                                 <td>{{ track.name }} by {{ track.artist }}</td>
                             </tr>
                         </tbody>
···
                     <table class="table w-full">
                         <thead>
                             <tr>
+                                <th>Rank</th>
                                 <th>Plays</th>
                                 <th>Artist</th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr v-for="artist in artists" :key="artist.name">
-                                <td>{{ artist.plays }}</td>
+                            <tr v-for="(artist, idx) in artists" :key="artist.name">
+                                <td>{{ idx + 1 }}.</td>
+                                <td>{{ formatNumber(artist.plays) }}</td>
                                 <td>{{ artist.name }}</td>
                             </tr>
                         </tbody>