列の構成

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

return (
  <IgrGridLite data={data}>
    <IgrGridLiteColumn
      field="account"
      header="Account Number"
      ...
    ></IgrGridLiteColumn>
    {/* 追加の列が続きます */}
  </IgrGridLite>
);

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

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

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

return (
  <IgrGridLite data={data} autoGenerate={true}></IgrGridLite>
);

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

return (
  <IgrGridLite data={data}>
    <IgrGridLiteColumn field="entryId" dataType="string"></IgrGridLiteColumn>
    <IgrGridLiteColumn field="source" dataType="string"></IgrGridLiteColumn>
    <IgrGridLiteColumn field="ts" dataType="number"></IgrGridLiteColumn>
  </IgrGridLite>
);

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

追加の列の構成

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

列の幅

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

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

return (
  <IgrGridLite>
    <IgrGridLiteColumn field="price" width="250px"></IgrGridLiteColumn>
  </IgrGridLite>
);

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

列の非表示

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

return (
  <IgrGridLite>
    <IgrGridLiteColumn field="price" hidden></IgrGridLiteColumn>
  </IgrGridLite>
);

列のリサイズ

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

return (
  <IgrGridLite>
    <IgrGridLiteColumn field="price" resizable></IgrGridLiteColumn>
  </IgrGridLite>
);

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

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

その他のリソース

• データ バインディング
• ソート
• フィルタリング
• テーマ設定とスタイル設定

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

• Grid Lite GitHub