React Grid 表示密度

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

Cozy
Comfortable
Compact

React Grid 表示密度の例

使用方法

上記デモで示されるように、IgrGrid は 3 つの密度オプション (compact、cosy、comfortable) を提供します。以下のコードスニペットは、displayDensity を設定する方法を示します。

<IgrGrid id="grid" displayDensity="cosy" >
</IgrGrid>

または

gridRef.current.displayDensity = 'cosy';

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

comfortable - これはデフォルトの IgrGrid 表示密度です。密度が最も低く、行の高さが 50px です。左と右のパディングが 24px で最小列 width は 80px です。
cosy - 中密度で、行の高さは 40px です。左と右のパディングが 16px で最小列 width は 64px です。
compact - これは最高密度で行の高さは 32px です。左と右のパディングが 12px で最小列 width は 56px です。

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

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

<IgrPropertyEditorPanel
    ref={propertyEditorRef}
    componentRenderer={renderer}
    target={grid}
    descriptionType="WebGrid"
    isHorizontal="true"
    isWrappingEnabled="true">
    <IgrPropertyEditorPropertyDescription
        propertyPath="DisplayDensity"
        name="DisplayDensityEditor">
    </IgrPropertyEditorPropertyDescription>
</IgrPropertyEditorPanel>

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

<IgrGrid 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 displayDensityEditor: 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.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;
}

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

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

rowHeight を指定した場合、displayDensity オプションは行の高さに影響しません。
displayDensity は、上記の理由により残りすべての Grid 要素に影響します。

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

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

API リファレンス

その他のリソース

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