Web Components Grid 列ピン固定の概要

Ignite UI for Web Components Data Grid は列をピン固定する機能をサポートし、エンド ユーザーが特定の列順序で列をロックできます。

単一または複数の列をデータ グリッドの左側または右側にピン固定できます。その他、pinColumn 関数を介して列のピン固定状態を変更できます。

Web Components Grid 列ピン固定の例

Edit on CodeSandbox

データグリッドの列ピン固定 API は、列の pinned プロパティまたはグリッドの pinColumn 関数を設定することで有効にできます。

pinned プロパティに 3 つのオプションがあります。

  • Left - Left を有効にすると、ピン固定した列がグリッドの左側に配置されます。
  • Right - Right を有効にすると、ピン固定した列がグリッドの右側に配置されます。
  • None - None を有効にすると、列のピン固定を解除し、グリッド内のデフォルトの配置を再配置します。

ピン固定された列に近接するピン固定されていない列は、水平スクロールを維持します。

pinColumn 関数に 2 つのパラメーターがあります。最初のパラメーターはピン固定する列で、2 番目は PinnedPositions 列挙体設定です。

コード スニペット

以下のコードは、pinned プロパティと pinColumn 関数で列のピン固定を使用して、データ グリッドで列のピン固定を実装する方法を示します。

<igc-data-grid
id="grid"
height="calc(100% - 40px)"
width="100%"
auto-generate-columns="false"
default-column-min-width="120px"
scrollbar-style = "thin"
>
    <igc-text-column pinned="left" field="ID" header-text="Employee ID" width="100"  horizontal-alignment="center"></igc-text-column>
    <igc-text-column pinned="left" field="FirstName" header-text="First Name" width="170"></igc-text-column>
    <igc-text-column pinned="left" field="LastName" header-text="Last Name" width="170"></igc-text-column>

    <igc-date-time-column pinned="none" field="Birthday" header-text="Date of Birth" width="150" horizontal-alignment="center"></igc-date-time-column>
    <igc-numeric-column pinned="none" field="Age" width="100" horizontal-alignment="center"></igc-numeric-column>
    <igc-image-column pinned="none" field="CountryFlag" header-text="Country" width="140" content-opacity="1" horizontal-alignment="center"></igc-image-column>

    <igc-text-column pinned="right" field="Street" header-text="Address" width="240"></igc-text-column>
    <igc-text-column pinned="right" field="City"  width="150" ></igc-text-column>
    <igc-text-column pinned="right" field="Country"  width="150" ></igc-text-column>
</igc-data-grid>
import { PinnedPositions } from 'igniteui-webcomponents-grids';

onButtonPinLeft () {

    let idColumn = this.grid.actualColumns.item(0);
    let firstNameColumn = this.grid.actualColumns.item(1);
    let lastNameColumn = this.grid.actualColumns.item(2);

    //pinned property
    idColumn.pinned = PinnedPositions.Left;
    firstNameColumn.pinned = PinnedPositions.Left;
    lastNameColumn.pinned = PinnedPositions.Left;

    // pinColumn Function
    this.grid.pinColumn(idColumn, PinnedPositions.Left);
    this.grid.pinColumn(firstNameColumn, PinnedPositions.Left);
    this.grid.pinColumn(lastNameColumn, PinnedPositions.Left);
}

onButtonPinRight () {

    let streetColumn = this.grid.actualColumns.item(6);
    let cityColumn = this.grid.actualColumns.item(7);
    let countryColumn = this.grid.actualColumns.item(8);

    //pinned property
    streetColumn.pinned = PinnedPositions.Right;
    cityColumn.pinned = PinnedPositions.Right;
    countryColumn.pinned = PinnedPositions.Right;

    //pinColumn function
    this.grid.pinColumn(streetColumn, PinnedPositions.Right);
    this.grid.pinColumn(cityColumn, PinnedPositions.Right);
    this.grid.pinColumn(countryColumn, PinnedPositions.Right);
}

onButtonUnPin () {

    let idColumn = this.grid.actualColumns.item(0);
    let firstNameColumn = this.grid.actualColumns.item(1);
    let lastNameColumn = this.grid.actualColumns.item(2);

    //pinned property
    idColumn.pinned = PinnedPositions.Left;
    firstNameColumn.pinned = PinnedPositions.Left;
    lastNameColumn.pinned = PinnedPositions.Left;

    //pinColumn function
    this.grid.pinColumn(idColumn, PinnedPositions.None);
    this.grid.pinColumn(firstNameColumn, PinnedPositions.None);
    this.grid.pinColumn(lastNameColumn, PinnedPositions.None);

    let streetColumn = this.grid.actualColumns.item(6);
    let cityColumn = this.grid.actualColumns.item(7);
    let countryColumn = this.grid.actualColumns.item(8);

    //pinned property
    streetColumn.pinned = PinnedPositions.None;
    cityColumn.pinned = PinnedPositions.None;
    countryColumn.pinned = PinnedPositions.None;

    //pinColumn function
    this.grid.pinColumn(streetColumn, PinnedPositions.None);
    this.grid.pinColumn(cityColumn, PinnedPositions.None);
    this.grid.pinColumn(countryColumn, PinnedPositions.None);
}

ツールバーの列ピン固定 UI

列ピン固定 UI は、グリッドとは別に IgcDataGridToolbarComponent コンポーネント内でアクセスできます。 このため、ツールバーの columnPinning プロパティを true に設定します。ツールバーは IgcButtonComponent を表示し、クリックすると列ピン固定 UI を表示します。このボタンは、左側にピン固定された列の合計も表示します。ツールバーが作成されていない場合、columnPinning プロパティを有効にしても効果はなく、ボタンを非表示にします。

IgcDataGridToolbarComponent は、toolbarTitle プロパティを使用してツールバーにタイトルを追加、 columnPinningText プロパティを設定して IgcButtonComponent にテキストを配置、columnPinningTitle を設定して、タイトル ヘッダーを列非表示 UI に追加などの追加プロパティを提供します。

サンプル

Edit on CodeSandbox

コード スニペット

<igc-dataGrid-toolbar
    toolbar-title="Grid Title"
    column-pinning="true"
    column-pinning-text="Pinning"
    column-pinning-title="Columns Pinned Left">
</igc-dataGrid-toolbar>
<igc-data-grid
    id="grid"
    height="calc(100% - 40px)"
    width="100%"
    auto-generate-columns="false"
    default-column-min-width="120px"
    scrollbar-style = "thin">
</igc-data-grid>
import { IgcDataGrid } from 'igniteui-webcomponents-grids';
import { IgcToolbar } from 'igniteui-webcomponents-grids';

private grid: IgcDataGridComponent;
private toolbar: IgcToolbarComponent;

connectedCallback() {
    this.toolbar.targetGrid = this.grid;
    let productNameColumn = document.getElementById("productname") as IgcTextColumnComponent;
    productNameColumn.pinned = true;
    this.toolbar.columnPinning = true;
    this.toolbar.toolbarTitle = "Grid Title";
    this.toolbar.columnPinningText = "Pinning Text";
    this.toolbar.columnPinningTitle = "Pinning Title Text";
}