列の構成

列は、グリッド内の <GridLiteColumn> 子要素を使用して宣言的に定義されます。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 単位です。これにより、列は流動的でレスポンシブになり、グリッド幅の変更に対応します。

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

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

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

列の非表示

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

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

列のリサイズ

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

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

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

Note

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

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

その他のリソース

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

Grid Lite GitHub