React Fixação de coluna de grade

    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.

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

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

    Demo

    Column Pinning on Both Sides

    Além disso, você pode especificar cada localização de fixação de coluna separadamente, permitindo fixar colunas em ambos os lados da grade para maior conveniência e otimização mais fácil dos conjuntos de dados. Por favor, consulte a demonstração abaixo para mais referência. Para fixar uma coluna, selecione uma coluna clicando em um cabeçalho e use os botões de fixação adicionados à barra de ferramentas, ou simplesmente arraste uma coluna para outra fixada.

    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} ref={grid}>
    <IgrColumn field="ID" hidden={true}></IgrColumn>

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

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

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

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

    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:

    <IgrGrid id="grid"></IgrGrid>

    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.