列の構成

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

    <igx-grid-lite [data]="data">
  <igx-grid-lite-column
    field="account"
    header="Account Number"
    ...
  ></igx-grid-lite-column>
  <!-- 追加の列 -->
</igx-grid-lite>

    データ ソースに基づく設定

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

    const data: Record[] = [
  { entryId: "1234", source: "https://example.com", ts: 1373521917579 },
  ...
];

    <igx-grid-lite [autoGenerate]="true" [data]="data"></igx-grid-lite>

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

    <igx-grid-lite [data]="data">
  <igx-grid-lite-column field="entryId" dataType="string"></igx-grid-lite-column>
  <igx-grid-lite-column field="source" dataType="string"></igx-grid-lite-column>
  <igx-grid-lite-column field="ts" dataType="number"></igx-grid-lite-column>
</igx-grid-lite>

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

    Note

    これはグリッドが初めて DOM に追加されたときに一度だけ実行されます。空のデータ ソースを渡すか、遅延バインドされたデータ ソース (HTTP リクエストなど) を使用すると、通常列設定は空になります。既存の列設定が存在する場合、このプロパティは無視されます。データ ソースに基づいて列構成を自動生成する方法の詳細については、データ バインディングのトピックを参照してください。

    追加の列設定

    列は、さらにいくつかのプロパティを公開します。

    列の幅

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

    列の幅を変更するには、列の width プロパティを使用します。

    <igx-grid-lite-column field="price" width="250px"></igx-grid-lite-column>

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

    列の非表示

    列の hidden プロパティを設定することで、列を非表示/表示できます。

    <igx-grid-lite-column field="price" hidden></igx-grid-lite-column>

    列のリサイズ

    Grid Lite コンポーネントの各列は、列要素の resizable プロパティを設定することで、サイズ変更可能に構成できます。

    <igx-grid-lite-column field="price" resizable></igx-grid-lite-column>

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

    Note

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

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

    その他のリソース

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