Angular Grid Display Density

IgxGrid design is based on Material Design Guidelines. We currently provide an option to choose between predefined set of display density options that will bring a cosy, comfortable or compact view respectively. By selecting the right density for your Material UI table / Material UI grid you can significantly improve the user experience when interacting with large amounts of content.

Angular Grid Display Density Example

Usage

As you can see in the demo above, the IgxGrid provides three density options: compact, cosy and comfortable. The code snippet below shows how to set displayDensity:

<igx-grid #grid [data]="data" [displayDensity]="'cosy'" >
</igx-grid>

this.grid.displayDensity = 'cosy';

And now let's see in details how each option reflects on the Grid component. When you switch between different density options the height of each Grid element and the corresponding paddings will be changed. Also if you want to apply custom column width, please consider the fact that it must be bigger than the sum of left and right padding.

comfortable - this is the default Grid display density with the lowest intense and row height equal to 50px. Left and Right paddings are 24px; Minimal column width is 80px;
cosy - this is the middle intense density with 40px row height. Left and Right paddings are 16px; Minimal column width is 64px;
compact - this is the density with highest intense and 32px row height. Left and Right paddings are 12px; Minimal column width is 56px;

Note

Please keep in mind that currently you can not override any of the sizes.

Let's now continue with our sample and see in action how the displayDensity is applied. Let's first add a button which will help us to switch between each density:

<div class="density-chooser">
    <igx-buttongroup [values]="displayDensities"></igx-buttongroup>
</div>

@ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent;
public density = 'compact';
public displayDensities;

public ngOnInit() {
    this.displayDensities = [
        {
            label: 'compact',
            selected: this.density === 'compact',
            togglable: true
        },
        {
            label: 'cosy',
            selected: this.density === 'cosy',
            togglable: true
        },
        {
            label: 'comfortable',
            selected: this.density === 'comfortable',
            togglable: true
        }
    ];
}

Now we can add the markup.

<div class="density-chooser">
    <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
</div>
<igx-grid #grid [data]="data" [displayDensity]="density" width="100%" height="550px" [allowFiltering]="true">
    <igx-column-group  header="Customer Information">
    <igx-column field="CustomerName" header="Customer Name" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column-group  header="Customer Address">
        <igx-column field="Country" header="Country" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
        </igx-column>
        <igx-column field="City" header="City" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
            </igx-column>
        <igx-column field="Address" header="Address" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
        </igx-column>
        <igx-column field="PostalCode" header="Postal Code" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
        </igx-column>
    </igx-column-group>
    </igx-column-group>
    <igx-column field="Salesperson" header="Sales Person" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column field="ShipperName" header="Shipper Name"  [dataType]="'string'" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column field="OrderDate" header="Order Date"  [dataType]="'date'" [sortable]="true" [hasSummary]="true">
        <ng-template igxCell let-cell="cell" let-val>
            {{val | date:'dd/MM/yyyy'}}
        </ng-template>
    </igx-column>
    <igx-column-group  header="Product Details">
        <igx-column field="ProductID" header="ID" [dataType]="'string'" [sortable]="true" [hasSummary]="true" [filterable]="false">
        </igx-column>
        <igx-column field="ProductName" header="Name" [dataType]="'string'" [sortable]="true" [hasSummary]="true" [filterable]="false">
        </igx-column>
        <igx-column field="UnitPrice" header="Unit Price" [dataType]="'number'" [sortable]="true" [hasSummary]="true" [filterable]="false">
        </igx-column>
        <igx-column field="Quantity" header="Quantity" [dataType]="'number'" [sortable]="true" [hasSummary]="true" [filterable]="false">
        </igx-column>
        <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [sortable]="true" [hasSummary]="true" >
        </igx-column>
    </igx-column-group>
    <igx-column-group  header="Shipping Information">
        <igx-column field="ShipName" header="Name" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
        </igx-column>
        <igx-column-group  header="Shipping Address">
            <igx-column field="ShipCountry" header="Country" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
            </igx-column>
            <igx-column field="ShipCity" header="City" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
            </igx-column>
            <igx-column field="ShipPostalCode" header="Postal Code" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
            </igx-column>
        </igx-column-group>
    </igx-column-group>
</igx-grid>

Finally, let's provide the necessary logic in order to actually apply the density:

@ViewChild('grid', { read: IgxGridComponent })
public grid: IgxGridComponent;

public selectDensity(event) {
    this.density = this.displayDensities[event.index].label;
}

Another option that IgxGrid provides for you, in order to be able to change the height of the rows in the Grid, is the property rowHeight. So let's see in action how this property affects the Grid layout along with the displayDensity option.

Please keep in mind the following:

displayDensity options will have NO impact on row height if there is rowHeight specified;
displayDensity will affect all of the rest elements in the Grid, as it has been described above;

And now we can extend our sample and add rowHeight property to the Grid:

<igx-grid #grid [data]="data" [displayDensity]="density" [rowHeight]="'80px'" width="100%" 
height="550px" [allowFiltering]="true">
..............
</igx-grid>

API References

Additional Resources

Our community is active and always welcoming to new ideas.

Angular Grid Display Density