Inventory Viewer

A single-page inventory browser that uses the UI component suite to render product data in both table and card layouts.

Capabilities

Paginated table with sortable price

• Displays products in a tabular renderer with columns Name, Category, Price, and Stock; default page size is 5 and pagination controls allow moving to a second page when more than 5 items exist. @test
• Activating the Price header toggles ascending then descending order and updates visible rows accordingly. @test

Category filtering

• Selecting a category option above the table filters the products shown in the tabular view and resets pagination to the first page. @test

Card view with virtual scrolling

• A visible control toggles to a card layout that shows the same products as stacked cards inside a scrollable container; with more than 50 items it uses built-in virtual scrolling so only the visible window renders while showing a loader placeholder when loading is true. @test

Implementation

@generates

API

export interface Product {
  id: number;
  name: string;
  category: string;
  price: number;
  stock: number;
}

export interface InventoryViewerProps {
  products: Product[];
  loading?: boolean;
}

export default function InventoryViewer(props: InventoryViewerProps): unknown;

Dependencies { .dependencies }

primevue { .dependency }

UI component suite providing tabular and virtualized data renderers plus input controls.

vue { .dependency }

Application framework for rendering the view.