React Grid サイズ

    Ignite UI for React の React Grid サイズ機能を使用すると、ユーザーは IgrGrid 内のデータの間隔とレイアウトを制御できます。--ig-size を変更することで、大量のコンテンツを操作するときのユーザー エクスペリエンスを大幅に向上させることができます。次の 3 つのサイズ オプションから選択できます。

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

    React Grid サイズの例

    使用方法

    上記デモで示されるように、IgrGrid は 3 つのサイズ オプション (smallmediumlarge) を提供します。以下のコード スニペットは、--ig-size をインラインまたは CSS クラスの一部として設定する方法を示しています。

    .gridSize {
        --ig-size: var(--ig-size-medium);
    }
    
    <IgrGrid id="grid" className="gridSize">
    </IgrGrid>
    

    各オプションを IgrGrid に反映する方法を紹介します。サイズ オプション間で切り替える際に各 IgrGrid 要素の高さとそのパディングが変更されます。カスタムの列 width を適用する場合、左右のパディングより大きくする必要があることに注意してください。

    • large - これはデフォルトの IgrGrid サイズです。サイズが最も低く、行の高さが 50px です。左と右のパディングが 24px で最小列 width80px です。
    • medium - 中サイズで、行の高さは 40px です。左と右のパディングが 16px で最小列 width64px です。
    • small - 強度が最も高く、行の高さは 32px です。左と右のパディングが 12px で最小列 width56px です。

    [!Note] 現在サイズはオーバーライドできません

    引き続きサンプルを使用して、--ig-size の適用方法について説明します。最初に各サイズを切り替えるボタンを追加します。

    <IgrPropertyEditorPanel
        ref={propertyEditorRef}
        componentRenderer={renderer}
        target={grid}
        descriptionType="WebGrid"
        isHorizontal="true"
        isWrappingEnabled="true">
        <IgrPropertyEditorPropertyDescription
            name="SizeEditor"
            label="Grid Size:"
            valueType="EnumValue"
            dropDownNames={["Small", "Medium", "Large"]}
            dropDownValues={["Small", "Medium", "Large"]}
            changed={this.webGridSetGridSize}>
        </IgrPropertyEditorPropertyDescription>
    </IgrPropertyEditorPanel>
    

    マークアップを追加します。

    <IgrGrid id="grid" autoGenerate="false" ref={gridRef} data={invoicesData} allowFiltering="true">
        <IgrColumn field="CustomerName" header="Customer Name" dataType="String" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="Country" header="Country" dataType="String" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="City" header="City" dataType="String" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="Address" header="Address" dataType="String" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="PostalCode" header="Postal Code" dataType="String" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="Salesperson" header="Sales Person" dataType="String" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="ShipperName" header="Shipper Name" dataType="String" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="OrderDate" header="Order Date" dataType="Date" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="ProductID" header="ID" dataType="String" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="ProductName" header="Name" dataType="String" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="UnitPrice" header="Unit Price" dataType="Number" sortable="true" hasSummary="true" filterable="false">
        </IgrColumn>
        <IgrColumn field="Quantity" header="Quantity" dataType="Number" sortable="true" hasSummary="true" filterable="false">
        </IgrColumn>
        <IgrColumn field="Discontinued" header="Discontinued" dataType="Boolean" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="Discontinued" header="Discontinued" dataType="Boolean" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="ShipName" header="Name" dataType="String" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="ShipCountry" header="Country" dataType="String" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="ShipCity" header="City" dataType="String" sortable="true" hasSummary="true">
        </IgrColumn>
        <IgrColumn field="ShipPostalCode" header="Postal Code" dataType="String" sortable="true" hasSummary="true">
        </IgrColumn>
    </IgrGrid>
    

    最後にサイズを適用するためのロジックを実装します。

    private propertyEditor: IgrPropertyEditorPanel
    private propertyEditorRef(r: IgrPropertyEditorPanel) {
            this.propertyEditor = r;
            this.setState({});
    }
    private sizeEditor: IgrPropertyEditorPropertyDescription
    private grid: IgrGrid
    private gridRef(r: IgrGrid) {
        this.grid = r;
        this.setState({});
    }
    
    constructor(props: any) {
        super(props);
    
        this.propertyEditorRef = this.propertyEditorRef.bind(this);
        this.webGridSetGridSize = this.webGridSetGridSize.bind(this);
        this.gridRef = this.gridRef.bind(this);
    }
    
    private _componentRenderer: ComponentRenderer = null;
      public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
          this._componentRenderer = new ComponentRenderer();
          var context = this._componentRenderer.context;
          PropertyEditorPanelDescriptionModule.register(context);
          WebHierarchicalGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }
    
    public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
        var newVal = (args.newValue as string).toLowerCase();
        var grid = document.getElementById("grid");
        grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
    }
    

    IgrGrid の行の高さを変更するその他のオプションに rowHeight プロパティがあります。このプロパティと --ig-size プションが IgrGrid レイアウトにどのように動作に影響するかを以下で確認できます。

    以下を確認してください。

    • rowHeight を指定した場合--ig-size CSS 変数は行の高さに影響しません。
    • --ig-size は、上記の理由により残りすべての Grid 要素に影響します

    サンプル機能を拡張して rowHeight プロパティを IgrGrid に追加します。

    <IgrGrid id="grid" className="gridSize" rowHeight="80px" width="100%" height="550px" allowFiltering="true">
    </IgrGrid>
    

    API リファレンス

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。