shadcn.io is not affiliated with official shadcn/ui
Weighted Decision Matrix About Block for React
A vendor decision matrix for an evaluation firm: options by weighted criteria, a computed score on each row, and a column that rings when its criterion is hovered or focused.
Installation
Overview
A decision matrix for React with Base UI, written for Weighwell, a fictional firm that scores vendors for a buyer. Options run down and criteria run across, each criterion with a weight. The weights add to 100. The last column is the weighted score, computed from the marks: each mark times its weight, over 100. Hovering a criterion, or focusing its header, rings that column. The table scrolls in a labelled region on a phone, and the option names stay put. It's built from Table and Guides, with a CSS entrance on the header and your theme's tokens for every colour. There is no client state: the ring is CSS. For an about page that should show how a firm weighs a choice. Northbin, Keppler and Yardline are a worked example, not customers.
FAQ
How do I change the options, the criteria and the weights?
CRITERIA names the columns and their weights, in the order the marks are stored. OPTIONS is one row per vendor, with a mark out of 5 for each criterion. The score column and the "weights that add to 100" line both read from that data. Keep the weights as a sum of 100 if you want the score to be a weighted mean on that scale.
How is the weighted score computed?
Each mark is multiplied by its criterion's weight, the products are added, and the sum is divided by the total of the weights. The result is written to two decimal places. Change a mark or a weight and the score changes with it. The number is not stored on the option.
How does a column ring without any state?
Each criterion's cells share a marker. While the pointer is over one of them, or while focus is inside that criterion's header, CSS rings the column and tints it. Leaving the column clears the ring. The score column is not a criterion, so it does not ring. The page does not move.
How is it read by a screen reader?
The heading is an h2. The table is named as a worked example of three vendors scored on four criteria. Option names are the row headers. A mark is read as a number out of 5, and the header button adds "Highlight this column" so the ring has a name. The closing paragraph says the three names are an example.
Related
- Pro
Duration Table Methodology
Principles and processA methodology section for an engineering consultancy: a to-scale bar of five phases across six weeks, over a framed table with each phase's work, tools as badges and duration.
- Pro
Client Results Table About
CustomersA framed table across five shop clients for an A/B testing tool: what was tested, before and after, and the improvement computed as a chip with an arrow and a sign, with a ringed row on hover and focus.
- Pro
A payroll co-op's report of seven measures over four quarters in Financial and Operational groups, a sparkline on every row, footnotes, and a quarter picker that rings one column.
- Pro
A framed table of seven company figures for an open-startup tracker: last quarter, this quarter, the computed change and a thin bar toward each target, sortable by metric, change or progress.
- Pro
Response Times Matrix About
Support and contactSupport promises as a framed matrix of channels by plan, each cell giving the promised first response and last quarter's median, with the Enterprise column ringed and a status dot per channel.
- Pro
Comparison Table Pricing
Comparison tablesFour plans compared feature by feature in one table whose hairlines meet the page rails, with a billing switch, a tinted popular column and, on a phone, a plan switch that keeps the feature column beside one plan.