This sample demonstrates a product catalog built using the Syncfusion® React Data Grid with column templates and a detail template. Each row displays product information through customized templates, including product details, sales trends, pricing, and stock status.
The Syncfusion® React Data Grid demonstrates the use of detail and column templates to display product inventory. Custom templates are applied to columns such as "Product", "Sales", and "Status".
Rows can be expanded to display a detail section using the Syncfusion® Card layout. This section presents product information including detailed descriptions, specifications, and pricing details.
Injecting Module:
Features of the Grid component are segregated into individual feature-wise modules. To use the detail row feature, inject the DetailRow module into the services collection.
More information on the detail template can be found in this documentation section.
Looking for the full React Data Grid component overview, features, pricing, and documentation? Visit our React Data Grid component page.