Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Rep Attainment Table Stats Block for Ark UI

A quota table for a sales team, each rep's attainment bar beside a badge for the change on last week.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An attainment table for React with Ark UI. Quotely, a quota desk, lists six reps in a real table: the rep, an attainment Progress bar with the closed and quota amounts, and a Badge for the change on last week, in points. A rise is a filled badge with an up arrow, a fall an outline badge with a down arrow, and a flat week an outline badge with a dash. All three are the text colour. The heading's team percent and the count of reps ahead of last week are summed from the same rows. The block has no state: it's Guides, Table, Progress, Badge and CSS transitions for the entrance. For the numbers section of a sales page.

FAQ

How do I change the reps?

Edit REPS at the top of the file. Each rep is an id, a name, closed and quota in dollars, and last, last week's whole percent. This week's percent is the rounded share of quota, and the pill is that percent minus last. The team percent is everyone's closed dollars over everyone's quota.

How does the badge decide its look?

From the sign of the point change. Above zero it is filled, foreground on the background colour, with an arrow toward the end and up. Below zero it is an outline with an arrow toward the end and down. Zero is an outline with a dash, so a flat week is not drawn as a fall. The number keeps its sign, and a minus is the true minus sign.

Why isn't a rise green and a fall red?

Ahead of last week is not always the point of the row: the bar already shows how close the rep is to quota, and the arrow shows the week. Colouring the pill would argue, on a churn-style number, the wrong way. Direction is the arrow and the sign. The sample has three reps ahead, two behind and one flat, and the heading counts only the three ahead.

How is the table named?

A caption, hidden visually, names it with the rep count and says the pills are against last week. The column headers are column headers, and each rep's name is a row header.

What happens on a phone?

Every column stays. The table is fixed-layout: the name takes about 38% and truncates, the change takes a narrow column so "vs last week" can wrap, and the bar keeps the rest. The closed and quota amounts wrap onto more than one line rather than pushing the table sideways.

What moves?

The header and the table fade up once. The bars don't grow, and the badges don't pop in on their own. With reduced motion the fade is off. Hovering a row doesn't tint it, so the filled badge stays as readable as it is at rest.