shadcn.io is not affiliated with official shadcn/ui
Product Inventory Table Block for Solid
A stock valuation table ranked by value with a running-total step bar, A, B and C classes from typed 70 and 90 percent thresholds, a search box and an All, A, B, C toggle with counts, in a fixed-height scrolling region.
Installation
Overview
Find the few products that carry most of the money, with this product inventory table for Solid with Ark UI. Twelve products of a wholesaler are ranked by what the stock on hand is worth, unit cost times stock, with each one's value, a running total drawn as a step bar and an ABC class. The step bar shows the running total before the product in a light weight, the product's own share in full weight, and ticks at 70 and 90 percent. The classes come from the running total before a product is added: A while it is below 70 percent, B while it is below 90, C after that, and the two thresholds are typed and shown over the table. An Input searches name, SKU and warehouse and a Toggle Group filters to All, A, B or C with a live count on each; filtering never changes a product's running total. The table keeps its height in a scrolling region with a sticky head and a designed empty state. It's built from Input, Toggle Group, Badge, Empty and Guides, with a CSS entrance only. For wholesalers, warehouses and any catalogue where a few lines matter most. This is the valuation view; the stock-level view is a different block.
FAQ
How are the classes decided?
Products are sorted by value, highest first, and the running total of their shares is built down the list. A product is class A if the running total before it is under 70 percent (so the product that crosses the line is still A), B if it is under 90 percent, and C after that. Change LIMIT_A and LIMIT_B to change the rule; the text over the table reads them back.
Why does the running total not change when I filter?
Because it describes the product's place in the whole ranking, not in the filtered list. Searching "tile" or choosing class B shows fewer rows, each with its real share and running total, and the status line says "Showing 3 of 12 products, class B".
What if nothing matches?
The table keeps its head and an empty state fills the region under it with the same height, naming the situation and offering Clear search, which empties the box, goes back to All and returns focus to the search field.
What changes on a phone?
Below the large breakpoint the Warehouse, Unit cost, Stock and Running total columns fold away: the product's cell shows its SKU, warehouse and the stock times unit cost in one line, and the value and the class stay as columns.
Is it accessible?
The table has a caption, heads and row heads, the search is labelled, the toggle group is named "Show class", the scrolling region is reachable by keyboard and a polite status line reports the shown count after each change. The step bar is decoration; the percentage and the class carry the same facts.
What stays local, and how do I wire it for real?
Everything: the twelve products are typed in PRODUCTS, and the ranking, shares, classes and counts are derived from them. To wire it up, load your products with their unit cost and stock, keep rankOf and the two limits, and feed the search and class state to your own query if the list is too long to hold in the page.