Visão geral da fixação de colunas de grade do React

    O Ignite UI for React Data Grid dá suporte à capacidade de fixar colunas, permitindo que os usuários finais bloqueiem uma coluna em uma ordem de coluna específica.

    Uma ou várias colunas podem ser fixadas no lado esquerdo ou direito da Grade de Dados. Além disso, você pode alterar o estado dos pinos das colunas utilizando apinColumn função.

    React Grid Column Pinning Example

    A API de Fixação de Colunas na Grade de Dados pode ser ativada definindo apinned propriedade de uma coluna, ou, ao configurá-la, utilizando apinColumn função da grade.

    Apinned propriedade possui três opções:

    • Esquerda - permitindoLeft posicionar colunas fixadas no lado esquerdo da grade.
    • À direita - ativarRight posicionará colunas fixadas no lado direito da grade.
    • Nenhum - ativarNone vai desprender uma coluna e reposicionar sua posição padrão dentro da grade.

    As colunas não afixadas adjacentes às colunas fixadas ainda manterão a rolagem horizontal.

    ApinColumn função contém dois parâmetros exigidos. O primeiro parâmetro é a coluna a ser fixada, e o segundo é com aPinnedPositions configuração de enumeração.

    Code Snippet

    O código a seguir demonstra como implementar o pinning de colunas na React Data Grid com o pin de coluna usando apinned propriedade epinColumn a função:

    <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-data-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);
}

    Toolbar's Column Pinning UI

    A interface de Fixação de Colunas é acessível dentro doIgrDataGridToolbar componente separado da grade. Para isso, tudo o que precisamos fazer é definir a propriedade dacolumnPinning barra de ferramentas como verdadeira. A barra de ferramentas então exibeIgrButton, ao clicar, a interface de fixação da coluna exibirá. Este botão também mostra o total das colunas fixadas à esquerda. Se a barra de ferramentas não for criada, ativar acolumnPinning propriedade não terá efeito e o botão será ocultado.

    EleIgrDataGridToolbar fornece propriedades adicionais, como adicionar um título à barra de ferramentas usando atoolbarTitle propriedade, colocar texto em aoIgrButton definir acolumnPinningText propriedade e adicionar um cabeçalho de título à coluna escondendo a interface por configuraçãocolumnPinningTitle.

    Demo

    Code Snippet

    <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-data-grids';
import { IgrDataGridToolbar } from 'igniteui-react-data-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 References