Forums Ignite UI for Angular
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
Close
John clary
15
How to Dynamically Change Column Visibility Based on Screen Size in igxGrid?
posted

Hello!
I'm using igxGrid in a responsive app and would like to hide or show certain columns based on screen width. For example, on mobile, I want to hide less important columns to keep things clean.

Is there a recommended approach for responsive column visibility? Should I use media queries or listen to screen size changes in TypeScript?

Thanks for the suggestions!

Parents
No Data
Reply
  • 660
    Offline posted

    Hello,

    Thanks for your question regarding responsive behavior in igxGrid.

    After exploring the best approach, I’ve implemented a solution that dynamically hides or shows columns based on screen width. Rather than relying on media queries in CSS, I’m using Angular’s BreakpointObserver from @angular/cdk/layout. This gives us better control and flexibility directly in the TypeScript code, and works perfectly with Ignite UI’s built-in column visibility feature.

    Here’s how I’ve addressed it:

    • Use the [hidden] input on each igx-column to toggle visibility.
    • Then subscribe to breakpoints (e.g., 599px and 959px) using BreakpointObserver.
    • Depending on the screen size, we toggle specific columns.

    this.breakpointObserver.observe(['(max-width: 599px)'])
    .subscribe(result => this.isSmallScreen = result.matches);

this.breakpointObserver.observe(['(max-width: 959px)'])
    .subscribe(result => this.isMediumOrLess = result.matches);

    For example:

    • On mobile (≤599px), we hide two columns City and Country.
    • On tablet (≤959px), we hide just the column Country.

    <igx-column field="City" [hidden]="isSmallScreen"></igx-column>
<igx-column field="Country" [hidden]="isMediumOrLess"></igx-column>

    The great part is that the grid automatically respects the visibility state. It also works seamlessly with the grid toolbar's column hiding UI, so users can still manage column visibility manually if needed.

    You can view and test the working demo here:
    StackBlitz Demo

    Please do not hesitate to contact me if you need any further assistance with this matter. 

    Regards,

    Georgi Anastasov

    Associate Software Developer

    Infragistics

Children
No Data