列の構成

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

return (
  <igc-grid-lite data={data}>
    <igc-grid-lite-column
      field="account"
      header="Account Number"
      ...
    ></igc-grid-lite-column>
    <!-- 追加の列が続きます -->
  </igc-grid-lite>
);

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

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

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

return (
  <igc-grid-lite data={data} auto-generate></igc-grid-lite>
);

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

return (
  <igc-grid-lite data={data}>
    <igc-grid-lite-column field="entryId" data-type="string"></igc-grid-lite-column>
    <igc-grid-lite-column field="source" data-type="string"></igc-grid-lite-column>
    <igc-grid-lite-column field="ts" data-type="number"></igc-grid-lite-column>
  </igc-grid-lite>
);

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

追加の列設定

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

列の幅

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

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

return (
  <igc-grid-lite>
    <igc-grid-lite-column field="price" width="250px"></igc-grid-lite-column>
  </igc-grid-lite>
);

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

列の非表示

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

return (
  <igc-grid-lite>
    <igc-grid-lite-column field="price" hidden></igc-grid-lite-column>
  </igc-grid-lite>
);

列のリサイズ

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

return (
  <igc-grid-lite>
    <igc-grid-lite-column field="price" resizable></igc-grid-lite-column>
  </igc-grid-lite>
);

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

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

その他のリソース

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

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

• Grid Lite GitHub