Web Components Grid Size

    The Ignite UI for Web Components Size feature in Web Components Grid allows users to control the spacing and layout of data within the IgcGridComponent. By changing --ig-size, you can significantly improve the user experience when interacting with large amounts of content. They can choose from three size options:

    • --ig-size-large
    • --ig-size-medium
    • --ig-size-small

    Web Components Grid Size Example

    Usage

    As you can see in the demo above, the IgcGridComponent provides three size options: small, medium and large. The code snippet below shows how to set --ig-size either inline or part of a CSS class:

    .gridSize {
    --ig-size: var(--ig-size-medium);
}

    <igc-grid id="grid" class="gridSize">
</igc-grid>

    And now let's see in details how each option reflects on the IgcGridComponent component. When you switch between different size options the height of each IgcGridComponent 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.

    • large - this is the default IgcGridComponent size with the lowest intense and row height equal to 50px. Left and Right paddings are 24px; Minimal column width is 80px;
    • medium - this is the middle intense size with 40px row height. Left and Right paddings are 16px; Minimal column width is 64px;
    • small - this is the size 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 --ig-size is applied. Let's first add a button which will help us to switch between each size:

    <div class="size-chooser">
    <igc-property-editor-panel
    description-type="WebGrid"
    is-horizontal="true"
    is-wrapping-enabled="true"
    name="PropertyEditor"
    id="propertyEditor">
        <igc-property-editor-property-description
        name="SizeEditor"
        id="SizeEditor"
        label="Grid Size:"
        value-type="EnumValue"
        drop-down-names="Small, Medium, Large"
        drop-down-values="Small, Medium, Large">
        </igc-property-editor-property-description>
    </igc-property-editor-panel>
</div>

    Agora podemos adicionar a marcação.

    <igc-grid id="grid" width="100%" height="550px" allow-filtering="true">
    <igc-column-group  header="Customer Information">
    <igc-column field="CustomerName" header="Customer Name" data-type="String" sortable="true" has-summary="true">
    </igc-column>
    <igc-column-group  header="Customer Address">
        <igc-column field="Country" header="Country" data-type="String" sortable="true" has-summary="true">
        </igc-column>
        <igc-column field="City" header="City" data-type="String" sortable="true" has-summary="true">
        </igc-column>
        <igc-column field="Address" header="Address" data-type="String" sortable="true" has-summary="true">
        </igc-column>
        <igc-column field="PostalCode" header="Postal Code" data-type="String" sortable="true" has-summary="true">
        </igc-column>
    </igc-column-group>
    </igc-column-group>
    <igc-column field="Salesperson" header="Sales Person" data-type="String" sortable="true" has-summary="true">
    </igc-column>
    <igc-column field="ShipperName" header="Shipper Name"  data-type="String" sortable="true" has-summary="true">
    </igc-column>
    <igc-column field="OrderDate" header="Order Date"  data-type="Date" sortable="true" has-summary="true">
    </igc-column>
    <igc-column-group  header="Product Details">
        <igc-column field="ProductID" header="ID" data-type="String" sortable="true" has-summary="true" filterable="false">
        </igc-column>
        <igc-column field="ProductName" header="Name" data-type="String" sortable="true" has-summary="true" filterable="false">
        </igc-column>
        <igc-column field="UnitPrice" header="Unit Price" data-type="Number" sortable="true" has-summary="true" filterable="false">
        </igc-column>
        <igc-column field="Quantity" header="Quantity" data-type="Number" sortable="true" has-summary="true" filterable="false">
        </igc-column>
        <igc-column field="Discontinued" header="Discontinued" data-type="Boolean" sortable="true" has-summary="true" >
        </igc-column>
    </igc-column-group>
    <igc-column-group  header="Shipping Information">
        <igc-column field="ShipName" header="Name" data-type="String" sortable="true" has-summary="true" >
        </igc-column>
        <igc-column-group  header="Shipping Address">
            <igc-column field="ShipCountry" header="Country" data-type="String" sortable="true" has-summary="true" >
            </igc-column>
            <igc-column field="ShipCity" header="City" data-type="String" sortable="true" has-summary="true" >
            </igc-column>
            <igc-column field="ShipPostalCode" header="Postal Code" data-type="String" sortable="true" has-summary="true" >
            </igc-column>
        </igc-column-group>
    </igx-column-group>
</igx-grid>

    Finalmente, vamos fornecer a lógica necessária para realmente aplicar o tamanho:

    constructor() {
    var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
    var sizeEditor = this.sizeEditor = document.getElementById('SizeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
    var grid = this.grid = document.getElementById('grid') as IgcGrid;
    propertyEditor.componentRenderer = this.renderer;
    propertyEditor.target = this.grid;
    this.webGridSetGridSize = this.webGridSetGridSize.bind(this);
    sizeEditor.changed = this.webGridSetGridSize;
    grid.data = this.data;
}

private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
    if (this._componentRenderer == null) {
        this._componentRenderer = new ComponentRenderer();
        var context = this._componentRenderer.context;
        PropertyEditorPanelDescriptionModule.register(context);
        WebGridDescriptionModule.register(context);
    }
    return this._componentRenderer;
}

public webGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
    var newVal = (args.newValue as string).toLowerCase();
    var grid = document.getElementById("grid");
    grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}

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

    Lembre-se do seguinte:

    • --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.

    We can now extend our sample and add rowHeight property to the IgcGridComponent:

    <igc-grid id="grid" class="gridSize" row-height="80px" width="100%" height="550px" allow-filtering="true">
</igc-grid>

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.