Descripción general de la fijación de columnas React Grid

    La Ignite UI for React Data Grid admite la capacidad de anclar columnas, lo que permite a los usuarios finales bloquear una columna en un orden de columna particular.

    Se pueden fijar una columna o varias columnas en el lado izquierdo o derecho de la cuadrícula de datos. Además, puede cambiar el estado de los pines de las columnas utilizando la función pinColumn.

    React Grid Column Pinning Example

    La API de fijación de columnas en Data Grid se puede habilitar configurando la propiedad Pinned de una columna o al configurarla utilizando la función pinColumn de la cuadrícula.

    La propiedad Pinned tiene tres opciones:

    • Izquierda: habilitar Left colocará las columnas fijadas en el lado izquierdo de la cuadrícula.
    • Derecha: habilitar Right colocará las columnas fijadas en el lado derecho de la cuadrícula.
    • Ninguno: habilitar None desanclará una columna y reubicará su ubicación predeterminada dentro de la cuadrícula.

    Las columnas no fijadas que están adyacentes a columnas fijadas seguirán manteniendo el desplazamiento horizontal.

    La función pinColumn contiene dos parámetros obligatorios. El primer parámetro es la columna que se va a fijar y el segundo es la configuración de enumeración PinnedPositions.

    Code Snippet

    El siguiente código demuestra cómo implementar la fijación de columnas en React Data Grid con fijación de columnas mediante la propiedad Pinned y la función 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);
}

    Toolbar's Column Pinning UI

    Se puede acceder a la interfaz de usuario de fijación de columnas desde el componente IgrDataGridToolbar separado de la cuadrícula. Para ello, todo lo que tenemos que hacer es establecer la propiedad columnPinning de la barra de herramientas en verdadero. La barra de herramientas mostrará un IgrButton y, al hacer clic en él, se mostrará la interfaz de usuario de fijación de columnas. Este botón también muestra el total de columnas fijadas a la izquierda. Si no se crea la barra de herramientas, habilitar la propiedad columnPinning no tendrá ningún efecto y ocultará el botón.

    ​IgrDataGridToolbar proporciona propiedades adicionales, como agregar un título a la barra de herramientas mediante la propiedad toolbarTitle, colocar texto en IgrButton configurando la propiedad columnPinningText y agregar un encabezado de título a la interfaz de usuario que oculta la columna configurando columnPinningTitle.

    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-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 References