Compact List Leaderboard Stats Block for React

Edit the TEAMS array at the top of the file: a name, the league points and the quiz points scored (scored, which only breaks ties). The table sorts itself, ranks the rows from 01 and works out the headline margin and the count of teams level on points, so you never type a rank. Change PLAYED and SEASON for the week line.

Yes. The list is a grid that fills columns first (lg:grid-flow-col lg:grid-cols-2 lg:grid-rows-6), so set grid-rows-N to half the number of rows, and update edgeOf, which gives the first row of each column its top hairline (row one, and the row at index N from lg). An odd count leaves the second column one row short, which is fine.

Teams level on league points are ordered by the quiz points they scored over the season, and the note under the facts says so. If both numbers are equal the sort keeps the order they have in TEAMS, so put the team you want first earlier in the array.

The table is an ordered list, so a screen reader announces the position of each row. The rank is also text in each row, and the points carry a visually hidden "points", so a row reads "01 Table Nine 61 points". Names are truncated by the layout only; the full text is in the page. The points are in bdi elements so right-to-left pages keep the number intact.

The split stacks, with a hairline between the header and the table, and the twelve rows become one column. The facts sit under the header, so the table starts well inside the first screen. Nothing scrolls sideways at 320 pixels.