This sample demonstrates a product catalog built using the Syncfusion® TypeScript Data Grid with column templates and a detail template. Each row displays product information through customized templates, including product details, sales trends, ratings, pricing, and stock status.
The Syncfusion® TypeScript 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 Grid instantiation can be found in this documentation section. Looking for the full TypeScript Data Grid component overview, features, pricing, and documentation? Visit our TypeScript Data Grid component page