Open Source

列の構成

列は、グリッド内の <IgbGridLiteColumn> 子要素を使用して宣言的に定義されます。Field プロパティは、列識別子として機能するため、列で唯一の必須プロパティです。また、グリッド行内の関連データをマッピングしてレンダリングするために使用されるプロパティでもあります。

<IgbGridLite Data="@products">
    <IgbGridLiteColumn 
        Field="Name"
        Header="Product Name"
        DataType="GridLiteColumnDataType.String" />
    <!-- 追加の列が続きます -->
</IgbGridLite>

データソースに基づく構成

グリッドは、AutoGenerate が true に設定されている場合、提供されたデータソースに基づいて列の構成を推論することをサポートします。データ内のレコードに基づいて、適切な Field および DataType プロパティを推論しようとします。

<IgbGridLite AutoGenerate=true Data="@products"/>
@code {
    private List<ProductInfo> products;

    protected override void OnInitialized()
    {
        products = new List<ProductInfo>
        {
            new ProductInfo { Id = "1", Name = "example", Price = 10 },
            ...
        };
    }

    public class ProductInfo
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
    }
}

前のスニペットでは、グリッドは次と同等の列を自動的に作成します:

<IgbGridLite Data="@products">
    <IgbGridLiteColumn Field="Id" DataType="GridLiteColumnDataType.String" />
    <IgbGridLiteColumn Field="Name" DataType="GridLiteColumnDataType.String" />
    <IgbGridLiteColumn Field="Price" DataType="GridLiteColumnDataType.Number" />
</IgbGridLite>

追加のカスタマイズを行わずに一部のデータをすばやくレンダリングする場合に便利です。

追加の列の構成

列は、カスタマイズのためのいくつかのプロパティを公開します:

列の幅

デフォルトでは列幅は minmax(136px, 1fr) で、最小 136px、最大は Grid Lite の利用可能幅の 1 単位です。これにより、列は流動的でレスポンシブになり、グリッド幅の変更に対応します。

列の幅を変更するには、IgbGridLiteColumn コンポーネントの Width パラメーターを使用します。

<IgbGridLiteColumn Field="Price" Width="250px" />

このプロパティは有効な CSS 長さ単位を受け入れます。

列の非表示

IgbGridLiteColumn コンポーネントの Hidden パラメーターを設定することで、列を非表示/表示できます。

<IgbGridLiteColumn Field="Price" Hidden="true" />

列のリサイズ

Grid Lite の各列は、IgbGridLiteColumn コンポーネントの Resizable パラメーターを設定することで、サイズ変更可能に構成できます。

<IgbGridLiteColumn Field="Price" Resizable="true" />

列がサイズ変更可能に設定されている場合、列ヘッダーの右端をドラッグして幅を増減できます。リサイズ領域をダブルクリックすると、自動調整がトリガーされ、セルやヘッダーの最大コンテンツに合わせて幅が設定されます。

「流動的」幅 (fr、% など) の列は、グリッドのリサイズ時に予期せぬ動作をする場合があります。アプリケーションのシナリオによっては、ユーザーがレイアウトのズレを経験しないように、「固定」単位を使用する方がよい場合があります。

以下のサンプルでは、さまざまな列プロパティと、それがレンダリングされたグリッドにどのように反映されるかを試すことができます。

API リファレンス

IgbGridLite<TItem>
IgbGridLiteColumn

その他のリソース

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

Grid Lite GitHub