Inventory table
Find products and inspect stock levels against their reorder thresholds.
Inventory
| Down parka — inkDP-INK-M | 0 | $420 |
| Beanie — rustBN-RUST | 18 | $38 |
| Wool overshirt — charcoalWO-CHAR-S | 32 | $189 |
| Canvas tote — naturalCT-NAT | 96 | $89 |
| Field jacket — mossFJ-MOSS-M | 184 | $148 |
| Trail socks — 3 packTS-3PK | 412 | $44 |
| Total | 742 units |
6 rows
Illustrative sample data. Sort a column, filter records, or use the table’s keyboard controls.
Implementation
1"use client";2 3import * as React from "react";4import { AnimatePresence, LayoutGroup, motion, useMotionValueEvent, useReducedMotion, useSpring } from "motion/react";5import { clsx, type ClassValue } from "clsx";6import { twMerge } from "tailwind-merge";7 8/**9 * Adapted from Spectrum UI by Arihant Jain (Apache-2.0).10 * Upstream revision: acdc998c64829f8ae037be48e3c273ccc8d71f60.11 * Modified for Gamma tokens, supplied data, portable exports, and accessible feedback.12 * License and attribution: docs/spectrum/LICENSE and docs/spectrum/NOTICE.13 */14function cn(...values: ClassValue[]) {15 return twMerge(clsx(values));16}17 18/* ---------------------------------------------------------------------------19 * Iconly on a 24px grid, recolored with `currentColor`. Outline (Light) is the20 * idle mark — search, clear — and fill (Bold) is reserved for a state that is21 * already on: a copied tick, a document in the empty body.22 * ------------------------------------------------------------------------- */23 24type IconProps = React.SVGProps<SVGSVGElement>;25 26function Glyph({ children, ...props }: IconProps) {27 return (28 <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>