Fijación de columnas en cuadrículas jerárquicas React

    The Ignite UI for React Column Pinning feature in React Hierarchical Grid enables developers to lock specific columns in a desired order, ensuring visibility all the time even when users scroll horizontally through the IgrHierarchicalGrid. There’s an integrated UI for Column Pinning, accessible via the React Hierarchical Grid toolbar. Additionally, developers have the flexibility to build a custom user interface which changes the pin state of the columns.

    React Hierarchical Grid Column Pinning Example

    This example demonstrates how you can pin a column or multiple columns to the left or right side of the IgrHierarchicalGrid.

    Column Pinning API

    Column pinning is controlled through the pinned property of the IgrColumn. Pinned columns are rendered on the left side of the IgrHierarchicalGrid by default and stay fixed through horizontal scrolling of the unpinned columns in the IgrHierarchicalGrid body.

    <IgrHierarchicalGrid data={nwindData} autoGenerate={false}>
    <IgrColumn field="CompanyName" pinned={true}></IgrColumn>
    <IgrColumn field="ContactName"></IgrColumn>
    <IgrColumn field="ContactTitle"></IgrColumn>
</IgrHierarchicalGrid>

    You may also use the IgrHierarchicalGrid's pinColumn or unpinColumn methods of the IgrHierarchicalGrid to pin or unpin columns by their field name:

    gridRef.current.pinColumn('Artist');
gridRef.current.unpinColumn('Debut');

    Ambos métodos devuelven un valor booleano que indica si su operación respectiva fue exitosa o no. Generalmente la razón por la que fallan es que la columna ya se encuentra en el estado deseado.

    A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the ColumnPin event and changing the InsertAtIndex property of the event arguments to the desired position index.

    const columnPinning = (event: IgrPinColumnCancellableEventArgs) = {
    if (event.detail.column.field === 'Name') {
        event.detail.insertAtIndex = 0;
    }
}

    Pinning Position

    You can change the column pinning position via the pinning configuration option. It allows you to set the columns position to either Start or End. When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right.

    const pinningConfig: IgrPinningConfig = { columns: ColumnPinningPosition.End };

    <IgrHierarchicalGrid data={nwindData} autoGenerate={true} pinning={pinningConfig}></IgrHierarchicalGrid>

    Demo

    Column Pinning on Both Sides

    Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one.

    Custom Column Pinning UI

    Puede definir su interfaz de usuario personalizada y cambiar el estado del pin de las columnas a través de la API relacionada.

    Digamos que en lugar de una barra de herramientas le gustaría definir íconos de pin en los encabezados de las columnas en los que el usuario final puede hacer clic para cambiar el estado del pin de la columna en particular.

    Esto se puede hacer creando una plantilla de encabezado para las columnas con un ícono personalizado.

    <IgrHierarchicalGrid autoGenerate={false} data={HierarchicalCustomersData} ref={grid}>
    <IgrColumn field="CustomerID" hidden={true}></IgrColumn>

    <IgrColumn field="Company" header="Company Name" width="300px"
    headerTemplate={toggleColumnPin} pinned={true}></IgrColumn>

    <IgrColumn field="ContactName" header="Contact Name" width="200px"
    headerTemplate={toggleColumnPin}> </IgrColumn>

    <IgrColumn field="ContactTitle" header="Contact Title" width="200px"
    headerTemplate={toggleColumnPin}></IgrColumn>
</IgrHierarchicalGrid>

    const toggleColumnPin = (ctx: IgrColumnTemplateContext) => {
  const togglePin = () => {
    const col = ctx.column;
    col.pinned = !col.pinned;
  }

  const col = ctx.column;

  return(
    <div>
      <span style={{ float: 'left' }}>{col.header}</span>
      <span style={{ float: 'right' }} onClick={() => togglePin()}>📌</span>
    </div>
  );
}

    Demo

    Pinning Limitations

    • Setting column widths in percentage (%) explicitly makes the IgrHierarchicalGrid body and header content to be misaligned when there are pinned columns. For column pinning to function correctly the column widths should be in pixels (px) or auto-assigned by the IgrHierarchicalGrid.

    Styling

    In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set an ID for the grid first:

    <IgrHierarchicalGrid id="grid"></IgrHierarchicalGrid>

    Luego establezca las propiedades CSS relacionadas con esta clase:

    #grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-pinned-border-style: double;
    --ig-grid-cell-active-border-color: #FFCD0F;
}

    Demo

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.