Angular Grid Size
IgxGrid design is based on Material Design Guidelines. We currently provide an option to choose between predefined set of size options that will bring a small, medium, or large view respectively. By selecting the right size for your Material UI table / Material UI grid you can significantly improve the user experience when interacting with large amounts of content.
Angular Grid Size Example
Usage
As you can see in the demo above, the IgxGrid provides three size options: small, medium and large. The code snippet below shows how to set size:
<igx-grid #grid [data]="data" style="--ig-size: var(--ig-size-small)">
</igx-grid>
And now let's see in details how each option reflects on the Grid component. When you switch between different sizes 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.
- --ig-size-large - this is the default Grid size with the lowest intense and row height equal to
50px
. Left and Right paddings are24px
; Minimal columnwidth
is80px
; - --ig-size-medium - this is the middle size with
40px
row height. Left and Right paddings are16px
; Minimal columnwidth
is64px
; - --ig-size-small - this is the smallest size with
32px
row height. Left and Right paddings are12px
; Minimal columnwidth
is56px
;
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 each size is applied. Let's first add a button which will help us to switch between each size:
<div class="density-chooser">
<igx-buttongroup [values]="sizes"></igx-buttongroup>
</div>
@ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent;
public size = 'small';
public sizes;
public ngOnInit() {
this.sizes = [
{
label: 'small',
selected: this.size === 'small',
togglable: true
},
{
label: 'medium',
selected: this.sie === 'medium',
togglable: true
},
{
label: 'large',
selected: this.size === 'large',
togglable: true
}
];
}
Now we can add the markup.
<div class="density-chooser">
<igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
</div>
<igx-grid #grid [data]="data" 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 size:
@ViewChild('grid', { read: IgxGridComponent })
public grid: IgxGridComponent;
public selectSize(event: any) {
this.size = this.sizes[event.index].label;
}
@HostBinding('style.--ig-size')
protected get sizeStyle() {
return `var(--ig-size-${this.size})`;
}
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 --ig-size
CSS variable.
Please keep in mind the following:
--ig-size
CSS variable will have NO impact on row height if there is rowHeight specified;--ig-size
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" [rowHeight]="'80px'" width="100%"
height="550px" [allowFiltering]="true">
..............
</igx-grid>
API References
Additional Resources
- Grid overview
- Virtualization and Performance
- Editing
- Paging
- Filtering
- Sorting
- Summaries
- Column Pinning
- Column Resizing
- Selection
- Searching