Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tables blocks

Pro

Badge Count Table Block for React

Moderation queues as counts: compact badges like 1.2K, a quiet dash for zero, a strip of three totals and a number field that flags any queue past a limit with a flag glyph and the words Over limit, never a colour.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Count what is waiting and flag what is too much, with this badge count table for React with Base UI. A framed panel opens with a strip of three totals (open, escalated and snoozed) over a table of four moderation queues from a forum's tooling. Every count is a Badge in compact notation ("1.2K", with the whole number in the text a screen reader gets) and a zero is a quiet dash. A Number Input reads "Flag a queue above 1,000 open items": a queue whose open count is past it gets a flag glyph and the words "Over limit by 240" under its name, a bar at its start and a solid count, never a colour, and the line beside the field says "2 queues are over 1,000 open items." Type another number and the flags follow. The Snoozed column folds away on a phone. It's built from Badge, Number Input and Guides, with a CSS entrance only. For moderation, support and review queues, backlogs and any table where a count can be too high.

FAQ

How are the counts shown, and read?

Intl.NumberFormat with compact notation and one decimal, in en-US so the digits are always 0 to 9: 1,240 shows as "1.2K". The visible text is hidden from assistive technology and each badge carries the whole number and the column as text ("1,240 open"), so nothing depends on guessing what "1.2K" means. A zero is a dash for sighted users and "0 snoozed" for screen readers.

How is a queue flagged without colour?

A queue is over when its open count is greater than the limit. It then gets a flag icon and "Over limit by 240" under its name, a start bar and a tint of the foreground behind the row, and its open count turns solid. All of it is weight and words, so it reads the same in every theme and for anyone who can't tell colours apart.

How does the number field behave?

Type digits and the queues, the sentence and the totals follow. An empty field means zero, and anything that isn't a whole number is ignored; there are no stepper buttons, since a limit is typed. The flags move as you type. The field reads Arabic-Indic digits in a right-to-left page and turns them into plain numbers before comparing.

What does a screen reader hear when I change the limit?

One polite sentence ("2 queues are over 1,000 open items.") about 600 ms after you stop typing, and only when its words changed, so typing "1", "10", "100" doesn't read three times. The visible copy of the sentence is hidden from assistive technology so it isn't read twice.

Where do the totals come from?

They are sums of the typed queues, shown in the same compact notation with the whole number for screen readers. Add a queue to QUEUES and the totals, the flags and the sentence all follow.

What stays local?

The four queues are typed in QUEUES and the limit lives in the tab. To wire it, load your counts into QUEUES and keep the limit in your settings so it persists; the derived flags and sentence need nothing else.

  • Pro

    Color Indicator Table

    Rich cells

    A project table whose categories are marked by shape, weight and word, never colour: a circle, square, diamond and triangle in foreground weights, and a legend of toggle chips with counts that dims the other categories.

  • Pro

    Effective Priority Table

    Rich cells

    A ticket queue where a switch raises any ticket due within two days by one level, shown as drawn bars, a word and a raised-from note, and the Priority head sorts by that effective rank.

  • Pro

    Chip Filters Table

    Sort and search

    A bug table beside a rail of chip filters for priority and status: chips in a group are or, the groups are and, every chip counts what it would show, and an empty state clears them all.

  • Pro

    Tags Table

    Rich cells

    A note library whose rows carry tag buttons: two show and a plus button opens the rest in a popover, pressing any tag filters the table to the notes that have it, and a strip says Tag and how many of the seven remain.

  • Pro

    Density Table

    Columns and paging

    A page list with a three-way density toggle (Compact, Comfortable, Spacious) that sets row height and text size together, in a fixed-height region so the block never changes height, with a line that says what the mode does.

  • Pro

    Avatar Stack Table

    Rich cells

    A sprint board whose assignee cell is a stack of initials and a plus count that opens a popover of checkboxes: ticking assigns a teammate, unticking removes them, an empty cell is a dashed circle and Unassigned.

All 42 tables blocks