Table List
A table listing products in rows with columns for image, name, stock, and price. Ideal for dashboards, admin catalogs, and bulk inventory views.
A table listing products in rows with columns for image, name, stock, and price. Ideal for dashboards, admin catalogs, and bulk inventory views.
Search blocks by description or jump to a page.
Table List renders a full product catalog as a bordered data table inside a card. A sticky header row holds a select-all checkbox followed by sortable column headers for Category, Price, Rating, and Stock, each with a toggle arrow. Below it every product row shows a thumbnail with a SKU label, a category badge, the current price alongside a struck-through original price, a star rating with review count, and a stock count that turns orange when units are low and red when they drop below twenty. The last cell holds a Buy button and a wishlist icon for each row.
All product data is declared in a single array, so you can add, remove, or reorder rows without touching the table structure. The sort logic, the select state, and the low-stock thresholds are self-contained and can be adjusted independently of the column layout.
This layout fits situations where buyers or internal teams need to scan and compare many items at once rather than browse one card at a time. For a product analytics SaaS it works well on an inventory overview screen, a top-sellers report, or any admin surface where operators need to act on multiple rows, sort by a metric, and spot low-stock items at a glance. It outperforms a card grid when the columns carry equal weight and the reader is likely to sort or filter before clicking through.
A natural flow around it on an Ecommerce page:
Before
After
The table works for any product set where multiple numeric attributes matter to the buyer. A few concrete ways to use it:
Tip: keep the row count to ten or fewer in the initial render and add pagination below the table so the page does not scroll endlessly on mobile.