React グリッドの列サイズ変更

Ignite UI for React Data Grid は列サイズを変更する機能をサポートしており、各列の幅に関して列の表示方法を柔軟に選択できます。

React グリッドの列サイズ変更の例

Ignite UI for React データグリッド内の列サイズ変更はデフォルトでオンになっており、グリッドの columnResizingMode プロパティを使用して制御できます。このプロパティには 3 つのオプションがあります。各オプションを以下に説明します。

• Deferred: デフォルト オプションです。サイズを変更すると、サイズが変更された後に列が大きくまたは小さくなる量を示すセパレーターが表示されます。
• Immediate: サイズを変更する際のセパレーターはありません。列の端をドラッグすると、列の幅はポインターの動きを追ってそれに応じてサイズを変更します。
• None: 列サイズを変更することはできません。

列サイズ変更を Deferred に設定すると、グリッドの columnResizingSeparatorBackground プロパティと columnResizingSeparatorWidth プロパティを使用して、表示するセパレーターの色と幅をそれぞれ変更できます。

サイズ変更モードが Deferred のみに設定されている場合、列のサイズを変更するときに列をアニメーション化することもできます。これを実行するには、columnResizingAnimationMode プロパティ Interpolate にを設定します。

グリッドの各列は、個別にサイズ変更できるかどうかを決定できます。特定の列でサイズ変更を有効または無効にする場合、その列の IsResizingEnabled プロパティを設定できます。

スター幅の列のサイズを変更すると、その列が固定列に変更されます。

コード スニペット

以下のコード スニペットは、React データ グリッドで列のサイズ変更を実装する方法を示します。この場合、Street 列はサイズ変更できません。この場合、列のサイズ変更セパレーターの幅は 5 ピクセルになり、サイズ変更可能な列もサイズ変更時にアニメーション化されます。

import { ColumnResizingMode } from 'igniteui-react-grids';
import { ColumnResizingAnimationMode } from 'igniteui-react-grids';

<IgrDataGrid ref={this.onGridRef}
    height="100%"
    width="100%"
    columnResizingAnimationMode={ColumnResizingAnimationMode.Interpolate}
    columnResizingMode={ColumnResizingMode.Deferred}
    columnResizingSeparatorWidth={5}
    autoGenerateColumns={false}
    dataSource={this.data} >
    <IgrTextColumn field="FirstName" headerText="First Name" />
    <IgrTextColumn field="LastName" headerText="Last Name" />
    <IgrTextColumn field="Street" headerText="Street" isResizingEnabled={false} />
    <IgrTextColumn field="City" headerText="City" />
</IgrDataGrid>

API リファレンス

• columnResizingAnimationMode
• columnResizingMode
• columnResizingSeparatorBackground
• columnResizingSeparatorWidth
• Deferred
• Interpolate