PK
Pavan kalyan

Multi Vendor Purchase Grid - Copy this React, Mui Component to your project

Build a Multi Vendor Purchase DataGrid using MUI (Material UI). The grid should allow users to purchase the same asset from multiple vendors while supporting inline editing for key vendor specific details. Each row must represent a vendor and include fields for vendor name (selectable from a predefined list), quantity (validated for positive values), price per unit (with a default inherited from the asset), certifications (multi select dropdown), transfer properties (inherited but editable), and an additional notes field for vendor specific instructions. The total price should auto calculate based on quantity and price per unit. Include action buttons for editing, deleting, and cloning rows. Ensure dynamic totals are displayed clearly, and the design prioritizes clarity, validation, and seamless inline editing. the Transfer Properties column displays a truncated summary of selected options (e.g., RA, BALAM, AGRO...). On click, a modal opens showing dynamic fields based on the asset's specific properties (e.g., Certifications, Quality, Program). Changes update the grid without refreshing.

Prompt
Component Preview

About

MultiVendorPurchaseGrid - Purchase assets from multiple vendors with inline editing for details, auto-calculated totals, and action b. Free code available!

Share

Last updated 1 month ago