React Grid Column Pinning

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

React Grid Column Pinning Example

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

Column Pinning API

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

<IgrGrid data={nwindData} autoGenerate="false">
    <IgrColumn field="Name" pinned="true"></IgrColumn>
    <IgrColumn field="AthleteNumber"></IgrColumn>
    <IgrColumn field="TrackProgress"></IgrColumn>
</IgrGrid>

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

gridRef.current.pinColumn('AthleteNumber');
gridRef.current.unpinColumn('Name');

Ambos os métodos retornam um valor booleano indicando se sua respectiva operação foi bem-sucedida ou não. Normalmente, o motivo pelo qual eles falham é que a coluna já está no estado desejado.

Uma coluna é fixada à direita da coluna fixada mais à direita. Alterar a ordem das colunas fixadas pode ser feito assinando o evento ColumnPin e alterando a propriedade InsertAtIndex dos argumentos do evento para o índice de posição desejado.

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

Pinning Position

Você pode alterar a posição de fixação da coluna por meio da pinning opção de configuração. Ele permite que você defina a posição das colunas como Início ou Fim. Quando definido como Final, as colunas são renderizadas no final da grade, após as colunas desafixadas. As colunas não afixadas podem ser roladas horizontalmente, enquanto as colunas fixadas permanecem fixas à direita.

const pinningConfig = new IgrPinningConfig();
pinningConfig.columns = ColumnPinningPosition.End;

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

Demo

Custom Column Pinning UI

Você pode definir sua interface do usuário personalizada e alterar o estado do pino das colunas por meio da API relacionada.

Digamos que, em vez de uma barra de ferramentas, você queira definir ícones de alfinetes nos cabeçalhos das colunas, nos quais o usuário final pode clicar para alterar o estado de alfinete de uma coluna específica.

Isso pode ser feito criando um modelo de cabeçalho para as colunas com um ícone personalizado.

<IgrGrid autoGenerate="false" data={CustomersData} name="grid" ref={grid}>
    <IgrColumn field="ID" hidden="true"></IgrColumn>

    <IgrColumn field="CompanyName" header="Company" width="300px" 
    name="column1" headerTemplate={toggleColumnPin}></IgrColumn>

    <IgrColumn field="ContactName" header="Name" width="200px" pinned="true"
    name="column2" headerTemplate={toggleColumnPin}> </IgrColumn>

    <IgrColumn field="ContactTitle" header="Title" width="200px" pinned="true"
    name="column3" headerTemplate={toggleColumnPin}> </IgrColumn>
</IgrGrid>

function toggleColumnPin({ dataContext: ctx }: { dataContext: 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 IgrGrid 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 IgrGrid.

Styling

Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir um ID para a grade primeiro:

Em seguida, defina as propriedades CSS relacionadas a esta classe:

#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

Nossa comunidade é ativa e sempre acolhedora para novas ideias.