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.

    Una columna o varias columnas pueden fijarse en el lado izquierdo o derecho de la Red de Datos. Además, puedes cambiar el estado del pin de las columnas utilizando lapinColumn función.

    React Ejemplo de anclaje de columnas de cuadrícula

    La API de fijación de columnas en la Red de Datos puede activarse estableciendo lapinned propiedad de una columna o, al configurarla, utilizando lapinColumn función de la cuadra.

    Lapinned propiedad tiene tres opciones:

    • Izquierda - activandoLeft las columnas clavadas en el lado izquierdo de la cuadrícula.
    • Derecha - habilitarRight posicionará las columnas clavadas en el lado derecho de la cuadrícula.
    • Ninguno: activarNone la colocación de una columna se desclava y se recoloca su posición predeterminada dentro de la cuadrícula.

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

    LapinColumn función contiene dos parámetros requeridos. El primer parámetro es la columna a fijar, y el segundo es con elPinnedPositions ajuste de enumeración.

    Fragmento de código

    El siguiente código demuestra cómo implementar el pinning de columnas en la Red de Datos de React con el pinning de columnas usando lapinned propiedad ypinColumn función:

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

    IU de fijación de columnas de la barra de herramientas

    La interfaz de fijación de columnas es accesible dentro delIgrDataGridToolbar componente separado de la cuadrícula. Para este propósito, solo tenemos que poner la propiedad decolumnPinning la barra de herramientas en true. La barra de herramientas mostrará entonces,IgrButton al hacer clic, 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, activar lacolumnPinning propiedad no tendrá efecto y ocultará el botón.

    ProporcionaIgrDataGridToolbar propiedades adicionales como añadir un título a la barra de herramientas usando latoolbarTitle propiedad, colocar texto en laIgrButton al establecer lacolumnPinningText propiedad y añadir un encabezado de título a la columna ocultando la interfaz mediante la configuracióncolumnPinningTitle.

    Manifestación

    Fragmento de código

    <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";
    }
}

    Referencias de API