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 coluna ou várias colunas podem ser fixadas no lado esquerdo ou direito da Grade de Dados. Além disso, você pode alterar o estado do pino das colunas utilizando a pinColumn função.

React Grid Column Pinning Example

A API de fixação de coluna na grade de dados pode ser ativada definindo a propriedade de Pinned uma coluna ou ao defini-la utilizando a pinColumn função da grade.

A Pinned propriedade tem três opções:

• Esquerda - a ativação Left posicionará as colunas fixadas no lado esquerdo da grade.
• Direita - habilitar Right posicionará as colunas fixadas no lado direito da grade.
• Nenhum - habilitar None desafixará uma coluna e reposicionará seu posicionamento padrão na grade.

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

A pinColumn função contém dois parâmetros obrigatórios. O primeiro parâmetro é a coluna a ser fixada e o segundo é com a configuração de PinnedPositions enumeração.

Code Snippet

O código a seguir demonstra como implementar a fixação de coluna na Grade de Dados do React com fixação de coluna usando o método Pinned propriedade e pinColumn 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 do usuário de fixação de coluna pode ser acessada dentro do IgrDataGridToolbar componente separado da grade. Para isso, tudo o que precisamos fazer é definir a propriedade da columnPinning barra de ferramentas como true. A barra de ferramentas exibirá um IgrButton, quando clicado, exibirá a interface do usuário de fixação de coluna. Esse botão também exibe o total de colunas fixadas à esquerda. Se a barra de ferramentas não for criada, habilitar a columnPinning propriedade não terá efeito e ocultará o botão.

O IgrDataGridToolbar fornece propriedades adicionais, como adicionar um título à barra de ferramentas usando a toolbarTitle propriedade, colocar texto na IgrButton configuração columnPinningText da propriedade e adicionar um cabeçalho de título à configuração da interface do usuário columnPinningTitle oculta da coluna.

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

• IgrButton
• IgrDataGridToolbar
• pinColumn
• PinnedPositions
• Pinned