IgxGrid 複数行レイアウトを利用する方法

IgxGrid では、１データレコードを複数行にわたって表示することができます。

IgxGrid 配下の IgxGridColumnLayout を定義し、その配下に列を定義します。また、各列のレイアウトは rowStart、rowEnd、colStart、colEnd をそれぞれ指定します。

<igx-grid #grid
          [primaryKey]="'ID'"
          [data]="data"
          width="1000px">
    <igx-column-layout>
        <igx-column field="ID" [width]="'200px'"
          [rowStart]="1" [rowEnd]="2" [colStart]="1" [colEnd]="2" ></igx-column>
        <igx-column field="Country" [editable]="true" [width]="'200px'"
          [rowStart]="2" [rowEnd]="3" [colStart]="1" [colEnd]="2" ></igx-column>
        <igx-column field="CompanyName" [editable]="true" [width]="'200px'"
          [rowStart]="1" [rowEnd]="2" [colStart]="2" [colEnd]="3"></igx-column>
        <igx-column field="ContactName" [editable]="true" [width]="'200px'"
          [rowStart]="1" [rowEnd]="2" [colStart]="3" [colEnd]="4"></igx-column>
        <igx-column field="ContactTitle" [editable]="true" [width]="'400px'"
          [rowStart]="1" [rowEnd]="2" [colStart]="4" [colEnd]="6"></igx-column>
        <igx-column field="Address" [editable]="true" [width]="'600px'"
          [rowStart]="2" [rowEnd]="3" [colStart]="2" [colEnd]="5"></igx-column>
        <igx-column field="Phone" [editable]="true" [width]="'200px'"
          [rowStart]="2" [rowEnd]="3" [colStart]="5" [colEnd]="6"></igx-column>
    </igx-column-layout>
</igx-grid>