Rating Column Table Block for React

Edit RECIPES. Each has a name, a category, the saves and stars, the number of people who gave five, four, three, two and one stars. The average, the half-star drawing, the count and the shares in the card are all derived, so there is one number to maintain per star. Change MINIMUM for a different sample size.

With it on, recipes with fewer than 20 ratings stop being ranked: they move below the others, show "Under 20 ratings" in a dashed row and lose their stars, but they keep their row height so the table does not jump. A polite line in the band says how many are hidden. Turn it off and they return in the order you had sorted.

By hover, by keyboard focus and by touch. The trigger is a real button named with the recipe and its average, so Tab reaches it, and the card opens on focus and closes on blur or Escape. On a touch screen a tap opens it. The card is extra: the average and the count are always in the table, so nothing is hidden behind it.

Each row is rounded to a whole percent, which can leave the total at 99 or 101. sharesOf rounds down, then gives the missing points to the rows with the largest remainders, so the five shares always add to exactly 100 and the same data always gives the same numbers.

The ratings are constants; the sort and the switch are two useState calls. To use real data, load recipes with their star counts and pass them in; to let people rate, post to your API and refetch the counts, since everything else is derived from them. The stars here are read-only on purpose.

The Category and Saves columns go; the category folds under the name and the stars shrink to one star beside the average, so the table keeps Recipe, Rating and Ratings without scrolling. The card still opens from the average.