shadcn.io is not affiliated with official shadcn/ui
Team Capacity Table Block for React
A team resourcing table with a utilisation bar on a 150 percent scale, a line at 100 percent, hatched overflow that says Over by 6 h, a week menu that swaps the hours, sortable heads and a team total in the footer.
Installation
Overview
See who has too much on and who has room, with this team capacity table for React with Base UI. A compact header holds a Native Select for the week: this week, next week or in two weeks. Inside a hairline frame with a plus mark on each corner, a band says which week and order you are looking at, over a native table of eight Loadlark members with an Avatar of initials, a role, hours booked against hours worked and a utilisation bar. The bar runs to 150 percent with a line at 100: booked time fills it up to the line, and anything past it carries on as a hatched stretch with "Over by 6 h" written in words under it, or "8 h free" for those with room. The Member, Hours and Utilisation heads sort, and a closing band adds the team up ("Team 87% of 288 h") with a short legend. It is built from Native Select, Avatar and Guides, with a CSS entrance only. For resourcing boards, staffing views, sprint capacity and any table where load is judged against a limit.
FAQ
How is the bar scaled?
The track stands for 150 percent, so the 100 percent line is two thirds of the way along it. Booked hours divided by the person's weekly hours gives the percent; the solid part fills up to the line and the hatched part runs from the line to the percent, capped at 150 so a very large booking cannot leave the track. The figure and the words under the bar are never capped.
How do I use my own team and weeks?
Edit TEAM (a name, a role, the weekly capacity and the hours booked for each week) and WEEKS (a label and the Monday it starts on). The percent, the words under the bars, the team total and the count of people over capacity are derived. Different people can work different hours, as the part-timers here do.
How does it say someone is over capacity without colour?
In three ways at once: the hatched stretch past the line, a figure over 100 percent and the words "Over by 6 h". Nothing depends on telling two colours apart, so the table reads the same in greyscale and in both themes.
How do the heads sort?
Member starts A to Z, Hours and Utilisation start with the most first; the second press reverses and the third returns to the team order. The sort applies to the week you are looking at, ties fall to the name, the sorted head has aria-sort and a polite line reads the week and the order together.
What stays local, and how do I wire real data?
The hours are constants and the week and order are two useState calls. To connect a planning API, fetch each member's booked hours for the weeks you offer, pass them in as booked, and refetch when the week changes. Capacity is a property of the person, so keep it on the member record.
Related
- Pro
An initiative tracker whose progress bars show tasks done, in review and not started, with a line for last week and a diamond for the plan, a change in points, a Behind plan flag, and sortable Progress and Change heads.
- Pro
An email campaigns table with a data bar under every result sized to the column maximum, a Counts and Rates toggle that changes the numbers and bars together, status words with dots, sortable heads and a line naming each bar scale.
- Pro
Sortable Members Table
Sort and searchA members table whose column heads are buttons: press one to sort, again to reverse, a third time for the original order, with aria-sort on the active head, ties settled by name and a spoken line for each result.
- Pro
Effective Priority Table
Rich cellsA 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
Table Footer With Totals
Totals and comparisonA timesheet table with a real footer row whose totals (hours, average rate, amount, paid and pending) are worked out from the rows shown, so a client filter changes every figure.
- Pro
Table With a Summary Footer Chain
Totals and comparisonA hire quote whose footer works down from the subtotal through a percentage discount, a tax rate, a flat delivery charge and the total, each showing its formula.