React Grid 列ピン固定の概要

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

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

    React Grid 列ピン固定の例

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

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

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

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

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

    コード スニペット

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

    <IgrDataGrid
    ref={this.onGridRef}
    height="calc(100% - 40px)"
    width="100%"
    autoGenerateColumns="false"
    defaultColumnMinWidth={120}
    scrollbarStyle="thin"
    dataSource={this.data}>
    
        {/*Columns pinned left*/}
        <IgrTextColumn pinned="left" field="ID" headerText="Employee ID" width="100"  horizontalAlignment="center"/>
        <IgrTextColumn pinned="left" field="FirstName" headerText="First Name" width="170"/>
        <IgrTextColumn pinned="left" field="LastName" headerText="Last Name" width="170"/>
    
        {/*Columns unpinned*/}
        <IgrDateTimeColumn pinned="none" field="Birthday" headerText="Date of Birth" width="150" horizontalAlignment="center"/>
        <IgrNumericColumn pinned="none" field="Age" width="100" horizontalAlignment="center"/>
        <IgrImageColumn pinned="none" field="CountryFlag" headerText="Country"
        width="140" contentOpacity="1" horizontalAlignment="center"/>
    
        {/*Columns pinned right*/}
        <IgrTextColumn field="Street" headerText="Address" width="240"/>
        <IgrTextColumn field="City"  width="150" />
        <IgrTextColumn field="Country"  width="150" />
    </IgrDataGrid>
    
    import { PinnedPositions } from 'igniteui-react-grids';
    
    public onButtonPinLeft = (e: any) => {
    
        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);
    }
    
    public onButtonPinRight = (e: any) => {
    
        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);
    }
    
    public onButtonUnPin = (e: any) => {
    
        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 は、グリッドとは別に IgrDataGridToolbar コンポーネント内でアクセスできます。このため、ツールバーの columnPinning プロパティを true に設定します。ツールバーは IgrButton を表示し、クリックすると列ピン固定 UI を表示します。このボタンは、左側にピン固定された列の合計も表示します。ツールバーが作成されていない場合、columnPinning プロパティを有効にしても効果はなく、ボタンを非表示にします。

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

    サンプル

    コード スニペット

    <IgrDataGridToolbar ref={this.onToolbarRef}
        toolbarTitle="Grid Title"
        columnPinning="true"
        columnPinningText="Pinning"
        columnPinningTitle="Column Pinning">
    </IgrDataGridToolbar>
    <IgrDataGrid
        ref={this.onGridRef}
        height="calc(100% - 40px)"
        dataSource={this.data}
        autoGenerateColumns="true">
    </IgrDataGrid>
    
    import { IgrDataGrid } from 'igniteui-react-grids';
    import { IgrDataGridToolbar } from 'igniteui-react-grids';
    
    public grid : IgrDataGrid;
    public toolbar: IgrDataGridToolbar;
    
    this.onGridRef = this.onGridRef.bind(this);
    this.onToolbarRef = this.onToolbarRef.bind(this);
    
    
    public onGridRef(grid: IgrDataGrid) {
        this.grid = grid;
        if (this.toolbar != null) {
            this.toolbar.targetGrid = this.grid;
    
            let productNameColumn = this.grid.actualColumns.item(0);
            productNameColumn.pinned = PinnedPositions.Left;
        }
    }
    
    public onToolbarRef(toolbar: IgrDataGridToolbar) {
        this.toolbar = toolbar;
        if (this.grid != null) {
        this.toolbar.targetGrid = this.grid;
        this.toolbar.columnPinning = "true";
        this.toolbar.toolbarTitle = "Grid Title";
        this.toolbar.columnPinningText = "Pinning";
        this.toolbar.columnPinningTitle = "Pinning Title";
        }
    }
    

    API リファレンス