Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Cell has multiple rows in static grid - Angular
Technology Pin  Studio Region Market
Class 2 PLAT North America Class II US-CLASS2
EMEA South Africa Casino Class 2
NGP USCONT All Region All Market
VLT PLAT North America Route Market
Class 3 PLAT Asia Macau, Singapore, etc.
Australia/NZ NSW, QLD, Crown etc.
North America US/GLI, Nevada, Ontario etc.
South America LATAM is a TA from US/GLI

How can I achieve this this grid structure with igx-grid Angular? Kindly provide sample if possible. Using column-layout unable to achieve this as it is showing hearders in different places as per colstart and rowstart. I need exact this view with grid.

Thanks in advance!

No Data
  • 1680
    Verified Answer
    Offline posted

    Hello Disha,

    I have found a forum post that describes similar scenario to yours, based on it I was able to create a small sample with the data you have provided, which recreates the grid layout you shared above.

    This approach uses cell templating and complex data binding. The values for the Region and Market fields should be arrays, in the cell template they are looped and for each element of the array a div with border is created to simulate the look of an individual cell.

    I would also like to mention that features that operate on the data such as Sorting, Filtering etc. will not consider the templated cell values, meaning that if you want to use those features you would have to implement a custom logic for those fields.

    You can find the sample here:

    I am also attaching a screenshot of how the grid layout looks:


    Please test the sample and me know if you have any questions.

    Ivan Kitanov